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>
-        <Statistic
+        <center>
-          title={title}
+          <View {...props} />
-          value={value}
+        </center>
-          valueStyle={valueStyle}
-          prefix={prefix}
-        />
       </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}
+  />
+  )
 }

web/pages/hardware-info.tsx

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