⚡ Working on system info

package.json

@@ -50,6 +50,7 @@
 		"prism-react-renderer": "^1.3.1",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
+		"systeminformation": "^5.11.16",
 		"uuid": "^8.3.2"
 	},
 	"devDependencies": {

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' }]}

yarn.lock

@@ -9444,6 +9444,7 @@ __metadata:
     react: ^17.0.1
     react-dom: ^17.0.1
     require-from-string: ^2.0.2
+    systeminformation: ^5.11.16
     typescript: 4.6.4
     uuid: ^8.3.2
   languageName: unknown
@@ -15069,6 +15070,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"systeminformation@npm:^5.11.16":
+  version: 5.11.16
+  resolution: "systeminformation@npm:5.11.16"
+  bin:
+    systeminformation: lib/cli.js
+  checksum: 4e4fb4c9c86c658c7e07a7661ac85a102bfb0a134f76cc5c5e7daf7ba13f9b43895d4ce4d80e55275a3395d254d20a84c53f036f1baececf5b94028ec93242c4
+  conditions: (os=darwin | os=linux | os=win32 | os=freebsd | os=openbsd | os=netbsd | os=sunos | os=android)
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0, tapable@npm:^1.1.3":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"