Replace recharts with custom canvas

src/client/components/chart-cards/network.tsx

@@ -1,21 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { ChartCard } from './index';
+import { ChartCard } from './common/card';
 
 export const Network = () => {
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).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 />;
@@ -25,12 +12,11 @@ export const Network = () => {
     <ChartCard
       title='Network'
       legend={{
-        values: [dynamicData.network.down, dynamicData.network.up],
         labels: ['Down', 'Up'],
       }}
       hueOffset={60}
       formatOptions={{ units: 'B/s' }}
-      data={history}
+      data={[dynamicData.network.down, dynamicData.network.up]}
       total={2}
     />
   );