clean up of home section; now with styling

web/pages/components/statistic.tsx

@@ -1,32 +1,25 @@
 import { Typography, Statistic, Card, Col, Progress} from "antd";
 const { Text } = Typography;
 
-interface ItemProps {
-  title: string, 
-  value: string,
-  prefix: JSX.Element,
-  color: string,
+interface StatisticItemProps {
+  title?: string, 
+  value?: any,
+  prefix?: JSX.Element,
+  // color?: string,
   progress?: boolean,
-  centered: boolean,
+  centered?: boolean,
+};
+const defaultProps = {
+  title: '', 
+  value: 0,
+  prefix: null,
+  // color: '',
+  progress: false,
+  centered: false,
 };
 
-export default function StatisticItem(props: ItemProps) {
-  const { title, value, prefix } = props;
-  const View = props.progress ? ProgressView : StatisticView;
-  const style = props.centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
 
-  return (
-    <Col span={8}>
-      <Card>
-        <div style={style}>
-          <View {...props} />
-        </div>
-      </Card>
-    </Col>
-  );
-}
-
-function ProgressView({title, value, prefix, color}) {
+function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
   const endColor = value > 90 ? 'red' : color;
   const content = (
     <div>
@@ -36,22 +29,43 @@ function ProgressView({title, value, prefix, color}) {
     </div>
   )
   return (
-    <Progress type="dashboard" percent={value} width={120} strokeColor={{
-      '0%': color,
-      '90%': endColor,
-    }} format={percent => content} />
+    <Progress
+      type="dashboard"
+      percent={value}
+      width={120}
+      strokeColor={{
+        '0%': color,
+        '90%': endColor,
+      }}
+      format={percent => content}
+    />
   )
 }
+ProgressView.defaultProps = defaultProps;
 
-function StatisticView({title, value, prefix, color}) {
-  const valueStyle = { fontSize: "1.8rem" };
-
+function StatisticView({ title, value, prefix }: StatisticItemProps) {
   return (
     <Statistic
-    title={title}
-    value={value}
-    valueStyle={valueStyle}
-    prefix={prefix}
+      title={title}
+      value={value}
+      prefix={prefix}
   />
   )
-}
+}
+StatisticView.defaultProps = defaultProps;
+
+export default function StatisticItem(props: StatisticItemProps) {
+  const { progress, centered } = props;
+  const View = progress ? ProgressView : StatisticView;
+
+  const style = centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {};
+
+  return (
+      <Card type="inner">
+        <div style={style}>
+          <View {...props} />
+        </div>
+      </Card>
+  );
+}
+StatisticItem.defaultProps = defaultProps;