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
-          title={title}
-          value={value}
-          valueStyle={valueStyle}
-          prefix={prefix}
-        />
+        <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}
+  />
+  )
 }