feat(ui): parse statistics data to display

web/src/pages/Home/index.tsx

@@ -8,7 +8,6 @@ import {
   ContentTable,
   TableMorePanel,
 } from './styled'
-import { parseSimpleDate } from '../../utils/date'
 import Content from '../../components/Content'
 import AppContext from '../../contexts/App'
 import {
@@ -35,6 +34,8 @@ import { BlockWrapper } from '../../http/response/Block'
 import { StatisticsWrapper, Statistics } from '../../http/response/Statistics'
 import { Response } from '../../http/response/Response'
 import { shannonToCkb } from '../../utils/util'
+import { parseTime, parseSimpleDate } from '../../utils/date'
+import { parseHashRate } from '../../utils/number'
 
 const BlockchainItem = ({ name, value, image, tip }: { name: string; value: string; image: any; tip?: string }) => {
   return (
@@ -131,21 +132,21 @@ export default () => {
     },
     {
       name: 'Difficulty',
-      value: `${statistics.average_difficulty}`,
+      value: `${parseInt(`${statistics.average_difficulty}`, 10).toLocaleString()}`,
       image: DifficultyImage,
-      tip: 'Average Difficulty of the current Epoch',
+      tip: 'Average Difficulty of the last 500 blocks',
     },
     {
       name: 'Hash Rate',
-      value: statistics.hash_rate,
+      value: parseHashRate(Number(statistics.hash_rate) * 1000),
       image: HashRateImage,
-      tip: 'Average Hash Rate of the current Epoch',
+      tip: 'Average Hash Rate of the last 500 blocks',
     },
     {
       name: 'Average Block Time',
-      value: statistics.average_block_time,
+      value: parseTime(Number(statistics.average_block_time)),
       image: BlockTimeImage,
-      tip: 'Average Block Time of the current Epoch',
+      tip: 'Average Block Time of the last 500 blocks',
     },
   ]
 
@@ -154,7 +155,9 @@ export default () => {
       <HomeHeaderPanel>
         {window.innerWidth > 700 &&
           BlockchainDatas.map((data: BlockchainData) => {
-            return <BlockchainItem name={data.name} value={data.value} image={data.image} tip={data.tip} />
+            return (
+              <BlockchainItem name={data.name} value={data.value} image={data.image} tip={data.tip} key={data.name} />
+            )
           })}
         {window.innerWidth <= 700 &&
           BlockchainDatas.map((data: BlockchainData) => {

web/src/pages/Home/styled.tsx

@@ -24,16 +24,9 @@ export const HomeHeaderPanel = styled.div`
     padding-top: 20px;
     padding-bottom: 10px;
 
-    > div:nth-child(even) {
-      margin-left: 15px;
-    }
-
-    > div:nth-child(odd) {
-      margin-left: 0px;
-    }
-
     > div:nth-child(n) {
-      margin-bottom: 15px;
+      margin-left: 0px;
+      margin-bottom: 10px;
     }
   }
 `
@@ -92,7 +85,7 @@ export const HomeHeaderItemPanel = styled.div`
 `
 
 export const HomeHeaderItemMobilePanel = styled.div`
-  width: 160px;
+  width: 85%;
   height: 80px;
   display: flex;
   flex-direction: column;
@@ -105,14 +98,14 @@ export const HomeHeaderItemMobilePanel = styled.div`
   .blockchain__item__value {
     color: #3cc68a;
     text-align: center;
-    font-size: 18px;
+    font-size: 20px;
     margin-top: 12px;
   }
 
   .blockchain__item__name {
     color: #888888;
     text-align: center;
-    font-size: 14px;
+    font-size: 16px;
     margin-top: 5px;
   }
 `

web/src/utils/date.ts

@@ -28,8 +28,22 @@ export const getCurrentYear = () => {
   return new Date().getFullYear()
 }
 
+export const parseTime = (millisecond: number) => {
+  const second = millisecond / 1000
+  const minute = second / 60
+  const hour = minute / 60
+  if (hour >= 1) {
+    return `${hour.toFixed()} h ${minute.toFixed()} m ${second.toFixed(1)} s`
+  }
+  if (minute >= 1) {
+    return `${minute.toFixed()} m ${second.toFixed(1)} s`
+  }
+  return `${second.toFixed(2)} s`
+}
+
 export default {
   parseDate,
   parseSimpleDate,
   getCurrentYear,
+  parseTime,
 }

web/src/utils/number.ts

@@ -0,0 +1,32 @@
+export const parseHashRate = (value: number) => {
+  const kv = value / 1000
+  const mv = kv / 1000
+  const gv = mv / 1000
+  const tv = gv / 1000
+  const pv = tv / 1000
+  const ev = pv / 1000
+
+  if (ev >= 1) {
+    return `${ev.toFixed(2)} EH/s`
+  }
+  if (pv >= 1) {
+    return `${pv.toFixed(2)} PH/s`
+  }
+  if (tv >= 1) {
+    return `${tv.toFixed(2)} TH/s`
+  }
+  if (gv >= 1) {
+    return `${gv.toFixed(2)} GH/s`
+  }
+  if (mv >= 1) {
+    return `${mv.toFixed(2)} MH/s`
+  }
+  if (kv >= 1) {
+    return `${kv.toFixed(2)} KH/s`
+  }
+  return `${value.toFixed(2)} H/s`
+}
+
+export default {
+  parseHashRate,
+}