Added graphs for CPU and GPU temperatures

Author: yashkathe

frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import RamUtil from './sockets/RamUtil'
 import CpuUtil from './sockets/CpuUtil'
+import CpuTemp from './sockets/CpuTemp'
+import GpuTemp from './sockets/GpuTemp'
 
 import classes from './App.module.css'
 
@@ -9,6 +11,8 @@ const App: React.FC = () => {
         <div className={classes.parent}>
                 <RamUtil />
                 <CpuUtil />
+                <GpuTemp/>
+                <CpuTemp/>
         </div>
     )
 }

frontend/src/graphs/AreaChartGraph.tsx

@@ -5,7 +5,7 @@ import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, Legend, Responsi
 import Wrapper from '../shared/Wrapper';
 
 // COMPONENT
-const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel}) => {
+const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel, dataX }) => {
     return (
         <Wrapper>
             <ResponsiveContainer width="100%" height="100%">
@@ -17,11 +17,11 @@ const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel}) => {
                         </linearGradient>
                     </defs>
                     <XAxis stroke="#ccc" />
-                    <YAxis stroke="#ccc"/>
+                    <YAxis stroke="#ccc" />
                     <Legend />
                     <CartesianGrid strokeDasharray="2 2" stroke="rgba(204, 204, 204, 0.5)" />
                     <Tooltip />
-                    <Area name={dataLabel} type="monotone" dataKey="x" stroke="#4CAF50" fillOpacity={1} fill="url(#colorUv)" />
+                    <Area name={dataLabel} type="monotone" dataKey={dataX} stroke="#4CAF50" fillOpacity={1} fill="url(#colorUv)" />
                 </AreaChart>
             </ResponsiveContainer>
         </Wrapper>

frontend/src/hooks/useSocket.ts

@@ -3,7 +3,7 @@ import socketIOClient from 'socket.io-client'
 
 const backendServer: string = import.meta.env.VITE_BACKEND_SERVER as string
 
-export const useSocket = <T>(eventName: string, socketUrl: string = backendServer) => {
+export const useSocket = <T>(eventName: string, logData: boolean = false, socketUrl: string = backendServer) => {
     const [data, setData] = useState<T[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(true);
 
@@ -13,6 +13,7 @@ export const useSocket = <T>(eventName: string, socketUrl: string = backendServe
         // connect to a socket 
         socket.on(eventName, (data: T[]) => {
             setData(data);
+            if (logData) console.log(data)
             setIsLoading(false);
         });
 

frontend/src/sockets/CpuTemp.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import AreaChartGraph from '../graphs/AreaChartGraph'
+
+import Spinner from '../shared/Spinner'
+import { useSocket } from '../hooks/useSocket'
+import { isTemperature } from '../types/types'
+
+import classes from './shared.module.css'
+
+const CpuTemp: React.FC = () => {
+
+    const { data, isLoading } = useSocket<isTemperature>("cpuTemp")
+
+    return (
+        <div className={classes.parent}>
+            <h1>CPU Temperature</h1>
+            {isLoading && <Spinner />}
+            {!isLoading && <AreaChartGraph data={data} dataLabel='CPU Temperature' dataX='temp' />}
+        </div>
+    )
+}
+
+export default CpuTemp

frontend/src/sockets/GpuTemp.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import AreaChartGraph from '../graphs/AreaChartGraph'
+
+import Spinner from '../shared/Spinner'
+import { useSocket } from '../hooks/useSocket'
+import { isTemperature } from '../types/types'
+
+import classes from './shared.module.css'
+
+const GpuTemp: React.FC = () => {
+
+    const { data, isLoading } = useSocket<isTemperature>("gpuTemp")
+
+    return (
+        <div className={classes.parent}>
+            <h1>GPU Temperature</h1>
+            {isLoading && <Spinner />}
+            {!isLoading && <AreaChartGraph data={data} dataLabel='GPU Temperature' dataX='temp' />}
+        </div>
+    )
+}
+
+export default GpuTemp

frontend/src/sockets/RamUtil.tsx

@@ -16,7 +16,7 @@ const RamUtil: React.FC = () => {
         <div className={classes.parent}>
             <h1>Ram Utilization</h1>
             {isLoading && <Spinner />}
-            {!isLoading && <AreaChartGraph data={data} dataLabel='RAM utilisation' />}
+            {!isLoading && <AreaChartGraph data={data} dataLabel='RAM utilisation' dataX='x'/>}
         </div>
     )
 }

frontend/src/types/types.ts

@@ -1,6 +1,7 @@
 export interface AreaChartProps {
-    data: { name: string, x: number }[];
+    data: { name: string, x: number | string }[];
     dataLabel : string
+    dataX: string
 }
 
 export interface BarChartProps {
@@ -18,4 +19,9 @@ export interface isRamUtil {
 export interface isCpuUtil {
     core: number;
     load: number;
+}
+
+export interface isTemperature {
+    name: string;
+    x: number;
 }