⚡ Working on system info

src/components/modules/calendar/CalendarModule.tsx

@@ -11,7 +11,7 @@ import {
   RadarrMediaDisplay,
   LidarrMediaDisplay,
   ReadarrMediaDisplay,
-} from './MediaDisplay';
+} from '../common';
 import { serviceItem } from '../../../tools/types';
 
 export const CalendarModule: IModule = {

src/components/modules/common/MediaDisplay.tsx

@@ -14,7 +14,7 @@ export interface IMedia {
   episodeNumber?: number;
 }
 
-function MediaDisplay(props: { media: IMedia }) {
+export function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group position="apart">

src/components/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './MediaDisplay';

src/components/modules/system/SystemModule.tsx

@@ -1,9 +1,20 @@
-import { Center, Group, RingProgress, Title } from '@mantine/core';
+import {
+  Card,
+  Center,
+  ColorSwatch,
+  Group,
+  RingProgress,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
 import { Cpu } from 'tabler-icons-react';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import si from 'systeminformation';
+import { ResponsiveLine } from '@nivo/line';
 import { IModule } from '../modules';
+import { useListState } from '@mantine/hooks';
 
 export const SystemModule: IModule = {
   title: 'System info',
@@ -21,21 +32,86 @@ interface ApiResponse {
 
 export default function SystemInfo(args: any) {
   const [data, setData] = useState<ApiResponse>();
-  // Refresh data every 5 seconds
+
+  // Refresh data every second
   useEffect(() => {
-    axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
     setInterval(() => {
       axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
-    }, 3 * 1000);
-  }, []);
+    }, 1000);
+  }, [args]);
+
+    // Update data every time data changes
+  const [cpuLoadHistory, cpuLoadHistoryHandlers] =
+    useListState<si.Systeminformation.CurrentLoadData>([]);
+
+    // useEffect(() => {
+      
+    // }, [data]);
+
+  const theme = useMantineTheme();
+  const currentLoad = data?.load?.currentLoad ?? 0;
+    
 
   return (
     <Center>
       <Group p="sm" direction="column" align="center">
         <Title order={3}>Current CPU load</Title>
+        <ResponsiveLine
+          isInteractive
+          enableSlices="x"
+          sliceTooltip={({ slice }) => {
+            const Download = slice.points[0].data.y as number;
+            const Upload = slice.points[1].data.y as number;
+            // Get the number of seconds since the last update.
+            const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000;
+            // Round to the nearest second.
+            const roundedSeconds = Math.round(seconds);
+            return (
+              <Card p="sm" radius="md" withBorder>
+                <Text size="md">{roundedSeconds} seconds ago</Text>
+                <Card.Section p="sm">
+                  <Group direction="column">
+                    <Group>
+                      <ColorSwatch size={10} color={theme.colors.green[5]} />
+                      <Text size="md">CPU: {currentLoad}</Text>
+                    </Group>
+                  </Group>
+                </Card.Section>
+              </Card>
+            );
+          }}
+          data={[
+            {
+              id: 'downloads',
+              data: chartDataUp,
+            },
+          ]}
+          curve="monotoneX"
+          yFormat=" >-.2f"
+          axisTop={null}
+          axisRight={null}
+          enablePoints={false}
+          animate={false}
+          enableGridX={false}
+          enableGridY={false}
+          enableArea
+          defs={[
+            linearGradientDef('gradientA', [
+              { offset: 0, color: 'inherit' },
+              { offset: 100, color: 'inherit', opacity: 0 },
+            ]),
+          ]}
+          fill={[{ match: '*', id: 'gradientA' }]}
+          colors={[
+            // Blue
+            theme.colors.blue[5],
+            // Green
+            theme.colors.green[5],
+          ]}
+        />
         <RingProgress
           size={120}
-          label={<Center>{`${data?.load?.currentLoad.toFixed(2)}%`}</Center>}
+          label={<Center>{`${(currentLoad * 100).toFixed(2)}%`}</Center>}
           thickness={12}
           roundCaps
           sections={[{ value: data?.load?.currentLoad ?? 0, color: 'cyan' }]}