WIP for some additional statistic views

web/pages/components/statistic.tsx

@@ -1,25 +1,55 @@
-import { Statistic, Card, Col} from "antd";
+import { Typography, Statistic, Card, Col, Progress} from "antd";
+const { Text, Link } = Typography;
 
 interface ItemProps {
   title: string, 
   value: string,
   prefix: JSX.Element,
+  color: string,
+  progress: boolean,
 };
 
 export default function StatisticItem(props: ItemProps) {
   const { title, value, prefix } = props;
-  const valueStyle = { color: "#334", fontSize: "1.8rem" };
+  const View = props.progress ? ProgressView : StatisticView;
 
   return (
     <Col span={8}>
       <Card>
+        <center>
+          <View {...props} />
+        </center>
+      </Card>
+    </Col>
+  );
+}
+
+function ProgressView({title, value, prefix, color}) {
+  const endColor = value > 90 ? 'red' : color;
+  const content = (
+    <div>
+    {prefix}
+    <div><Text type="secondary">{title}</Text></div>
+    <div><Text type="secondary">{value}%</Text></div>
+    </div>
+  )
+  return (
+    <Progress type="dashboard" percent={value} width={120} strokeColor={{
+      '0%': color,
+      '90%': endColor,
+    }} format={percent => content} />
+  )
+}
+
+function StatisticView({title, value, prefix}) {
+  const valueStyle = { color: "#334", fontSize: "1.8rem" };
+
+  return (
     <Statistic
     title={title}
     value={value}
     valueStyle={valueStyle}
     prefix={prefix}
   />
-      </Card>
-    </Col>
-  );
+  )
 }

web/pages/hardware-info.tsx

@@ -76,19 +76,25 @@ const series = [
           <h2>Hardware Info</h2>
           <Row gutter={[16, 16]}>
             <StatisticItem
-              title="CPU used"
-              value={`${currentCPUUsage} %`}
-              prefix={<LaptopOutlined />}
+              title="CPU"
+              value={`${currentCPUUsage}`}
+              prefix={<LaptopOutlined style={{color: '#FF7700' }}/>}
+              color="#FF7700"
+              progress
             />
             <StatisticItem
-              title="Memory used"
-              value={`${currentRamUsage} %`}
-              prefix={<BulbOutlined />}
+              title="RAM"
+              value={`${currentRamUsage}`}
+              prefix={<BulbOutlined style={{color: '#004777' }} />}
+              color="#004777"
+              progress
             />
             <StatisticItem
-              title="Disk used"
-              value={`${currentDiskUsage} %`}
-              prefix={<SaveOutlined />}
+              title="Disk"
+              value={`${currentDiskUsage}`}
+              prefix={<SaveOutlined  style={{color: '#A9E190' }} />}
+              color="#A9E190"
+              progress
             />
           </Row>