38 lines
919 B
TypeScript
38 lines
919 B
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useEffect, useState } from 'react';
|
|
import { ChartCard } from './index';
|
|
|
|
export const Network = () => {
|
|
const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
|
|
const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
|
|
|
|
useEffect(() => {
|
|
if (dynamicData) {
|
|
setHistory(history => {
|
|
const newHistory = history.slice(1);
|
|
newHistory.push([dynamicData.network.down, dynamicData.network.up]);
|
|
|
|
return newHistory;
|
|
});
|
|
}
|
|
}, [dynamicData]);
|
|
|
|
if (!dynamicData) {
|
|
return <div />;
|
|
}
|
|
|
|
return (
|
|
<ChartCard
|
|
title='Network'
|
|
legend={{
|
|
values: [dynamicData.network.down, dynamicData.network.up],
|
|
labels: ['Down', 'Up'],
|
|
}}
|
|
hueOffset={60}
|
|
formatOptions={{ units: 'B/s' }}
|
|
data={history}
|
|
total={2}
|
|
/>
|
|
);
|
|
};
|