Combine hardware graphs into a single graph

web/pages/components/chart.tsx

@@ -14,6 +14,7 @@ interface ChartProps {
   data: number,
   color: string,
   unit: string,
+  dataCollections?: [],
 }
 
 function CustomizedTooltip(props: ToolTipProps) {
@@ -32,21 +33,30 @@ function CustomizedTooltip(props: ToolTipProps) {
 }
 CustomizedTooltip.defaultProps = defaultProps;
 
-export default function Chart({ data, color, unit }: ChartProps) {
+export default function Chart({ data, color, unit, dataCollections }: ChartProps) {
   const timeFormatter = (tick: string) => {
     return timeFormat("%I:%M")(new Date(tick));
   };
 
+  if (dataCollections) {
+    var ticks = dataCollections[0]?.data.map(function (collection) {
+      return collection?.time;
+    })
+  } else {
+    var ticks = data.map(function (item) {
+      return item?.time;
+    });
+  }
   return (
     <LineChart width={1200} height={400} data={data}>
       <XAxis
         dataKey="time"
-        // type="number"
         tickFormatter={timeFormatter}
         interval="preserveStartEnd"
         tickCount={5}
         minTickGap={15}
         domain={["dataMin", "dataMax"]}
+        ticks={ticks}
       />
       <YAxis
         dataKey="value"
@@ -63,6 +73,18 @@ export default function Chart({ data, color, unit }: ChartProps) {
         dot={null}
         strokeWidth={3}
       />
+      {dataCollections?.map((s) => (
+        <Line
+          dataKey="value"
+          data={s.data}
+          name={s.name}
+          key={s.name}
+          type="monotone"
+          stroke={s.color}
+          dot={null}
+          strokeWidth={3}
+        />
+      ))}
     </LineChart>
   );
 }

web/pages/hardware-info.tsx

@@ -45,6 +45,25 @@ export default function HardwareInfo() {
     hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
   const currentDiskUsage =
     hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
+  
+const series = [
+  {
+    name: "CPU",
+    color: "#FF7700",
+    data: hardwareStatus.cpu,
+  },
+  {
+    name: "Memory",
+    color: "#004777",
+    data: hardwareStatus.memory,
+  },
+  {
+    name: "Disk",
+    color: "#A9E190",
+    data: hardwareStatus.disk,
+  },
+];
+  
     return (
       <div>
         <div>
@@ -68,12 +87,7 @@ export default function HardwareInfo() {
           </Row>
 
           <div className="chart-container">
-            <h3>CPU</h3>
-            <Chart data={hardwareStatus.cpu} color="#FF7700" unit="%" />
-            <h3>Memory</h3>
-            <Chart data={hardwareStatus.memory} color="#004777" unit="%" />
-            <h3>Disk</h3>
-            <Chart data={hardwareStatus.disk} color="#A9E190" unit="%" />
+            <Chart dataCollections={series} color="#FF7700" unit="%" />
           </div>
         </div>
         <p>cpu:[], disk: [], memory: []; value = %age.</p>