Support centered and left-justified statistic views

web/pages/components/statistic.tsx

@@ -7,16 +7,18 @@ interface ItemProps {
   prefix: JSX.Element,
   color: string,
   progress?: boolean,
+  centered: boolean,
 };
 
 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={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+        <div style={style}>
           <View {...props} />
         </div>
       </Card>

web/pages/hardware-info.tsx

@@ -81,6 +81,7 @@ const series = [
               prefix={<LaptopOutlined style={{color: series[0].color }}/>}
               color={series[0].color}
               progress
+              centered
             />
             <StatisticItem
               title={series[1].name}
@@ -88,6 +89,7 @@ const series = [
               prefix={<BulbOutlined style={{color: series[1].color }} />}
               color={series[1].color}
               progress
+              centered
             />
             <StatisticItem
               title={series[2].name}
@@ -95,6 +97,7 @@ const series = [
               prefix={<SaveOutlined  style={{color: series[2].color }} />}
               color={series[2].color}
               progress
+              centered
             />
           </Row>