Customize legend titles. Hide empty graph lines. Update colors.

web/pages/components/chart.tsx

@@ -22,6 +22,7 @@ interface TimedValue {
 
 interface ChartProps {
   data?: TimedValue[],
+  title?: string,
   color: string,
   unit: string,
   dataCollections?: any[],
@@ -43,7 +44,7 @@ function CustomizedTooltip(props: ToolTipProps) {
 }
 CustomizedTooltip.defaultProps = defaultProps;
 
-export default function Chart({ data, color, unit, dataCollections }: ChartProps) {
+export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) {
   if (!data && !dataCollections) {
     return null;
   }
@@ -67,6 +68,18 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
     });
   }
 
+  const line = data ? (
+    <Line
+    type="natural"
+    dataKey="value"
+    stroke={color}
+    dot={null}
+    strokeWidth={3}
+    legendType="square"
+    name={title}
+  />
+  ) : null;
+
   return (
     <div className={styles.lineChartContainer}>
       <LineChart width={chartWidth} height={chartHeight} data={data}>
@@ -87,23 +100,18 @@ export default function Chart({ data, color, unit, dataCollections }: ChartProps
         />
         <Tooltip content={<CustomizedTooltip unit={unit} />} />
         <Legend />
-        <Line
+        {line}
-          type="monotone"
-          dataKey="value"
-          stroke={color}
-          dot={null}
-          strokeWidth={3}
-        />
         {dataCollections?.map((s) => (
           <Line
             dataKey="value"
             data={s.data}
             name={s.name}
             key={s.name}
-            type="monotone"
+            type="natural"
             stroke={s.color}
             dot={null}
             strokeWidth={3}
+            legendType="square"
           />
         ))}
       </LineChart>

web/pages/hardware-info.tsx

@@ -55,17 +55,17 @@ export default function HardwareInfo() {
 const series = [
   {
     name: "CPU",
-    color: "#FF7700",
+    color: "#B63FFF",
     data: hardwareStatus.cpu,
   },
   {
     name: "Memory",
-    color: "#004777",
+    color: "#2087E2",
     data: hardwareStatus.memory,
   },
   {
     name: "Disk",
-    color: "#A9E190",
+    color: "#FF7700",
     data: hardwareStatus.disk,
   },
 ];
@@ -76,24 +76,24 @@ const series = [
           <h2>Hardware Info</h2>
           <Row gutter={[16, 16]}>
             <StatisticItem
-              title="CPU"
+              title={series[0].name}
               value={`${currentCPUUsage}`}
-              prefix={<LaptopOutlined style={{color: '#FF7700' }}/>}
+              prefix={<LaptopOutlined style={{color: series[0].color }}/>}
-              color="#FF7700"
+              color={series[0].color}
               progress
             />
             <StatisticItem
-              title="RAM"
+              title={series[1].name}
               value={`${currentRamUsage}`}
-              prefix={<BulbOutlined style={{color: '#004777' }} />}
+              prefix={<BulbOutlined style={{color: series[1].color }} />}
-              color="#004777"
+              color={series[1].color}
               progress
             />
             <StatisticItem
-              title="Disk"
+              title={series[2].name}
               value={`${currentDiskUsage}`}
-              prefix={<SaveOutlined  style={{color: '#A9E190' }} />}
+              prefix={<SaveOutlined  style={{color: series[2].color }} />}
-              color="#A9E190"
+              color={series[2].color}
               progress
             />
           </Row>

web/pages/viewer-info.tsx

@@ -125,7 +125,7 @@ export default function ViewersOverTime() {
         />
       </Row>
       <div className="chart-container">
-        <Chart data={viewerInfo} color="#ff84d8" unit="" />
+        <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
       </div>
       <Table dataSource={clients} columns={columns} />;
     </div>