[ᚬmaster] Add more statistic charts

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@cryptape/sdk-ts-config": "^0.0.1",
+    "@types/echarts": "^4.4.1",
     "@types/eslint": "^6.1.1",
     "@types/jest": "24.0.15",
     "@types/node": "12.0.10",
@@ -14,8 +15,9 @@
     "antd": "^3.25.1",
     "axios": "^0.18.1",
     "bignumber.js": "^9.0.0",
-    "bizcharts": "^3.5.4",
     "camelcase-keys": "^6.0.1",
+    "echarts": "^4.5.0",
+    "echarts-for-react": "^2.0.15-beta.1",
     "env-cmd": "^9.0.1",
     "eslint": "^6.2.2",
     "history": "^4.7.2",

src/contexts/providers/reducer.ts

@@ -35,6 +35,13 @@ export enum PageActions {
   UpdateStatisticsChartData = 'updateStatisticsChartData',
   UpdateStatisticsUncleRate = 'updateStatisticsUncleRate',
 
+  UpdateStatisticDifficultyHashRate = 'updateStatisticDifficultyHashRate',
+  UpdateStatisticDifficultyUncleRate = 'updateStatisticDifficultyUncleRate',
+  UpdateStatisticTransactionCount = 'updateStatisticTransactionCount',
+  UpdateStatisticAddressCount = 'updateStatisticAddressCount',
+  UpdateStatisticTotalDaoDeposit = 'updateStatisticTotalDaoDeposit',
+  UpdateStatisticCellCount = 'updateStatisticCellCount',
+
   UpdateNervosDao = 'updateNervosDao',
   UpdateNervosDaoTransactions = 'updateNervosDaoTransactions',
   UpdateNervosDaoTransactionsTotal = 'updateNervosDaoTransactionsTotal',
@@ -269,6 +276,37 @@ export const reducer = (
         ...state,
         statisticsUncleRates: payload.statisticsUncleRates,
       }
+    case PageActions.UpdateStatisticDifficultyHashRate:
+      return {
+        ...state,
+        statisticDifficultyHashRates: payload.statisticDifficultyHashRates,
+      }
+    case PageActions.UpdateStatisticDifficultyUncleRate:
+      return {
+        ...state,
+        statisticDifficultyUncleRates: payload.statisticDifficultyUncleRates,
+      }
+    case PageActions.UpdateStatisticTransactionCount:
+      return {
+        ...state,
+        statisticTransactionCounts: payload.statisticTransactionCounts,
+      }
+    case PageActions.UpdateStatisticAddressCount:
+      return {
+        ...state,
+        statisticAddressCounts: payload.statisticAddressCounts,
+      }
+    case PageActions.UpdateStatisticTotalDaoDeposit:
+      return {
+        ...state,
+        statisticTotalDaoDeposits: payload.statisticTotalDaoDeposits,
+      }
+    case PageActions.UpdateStatisticCellCount:
+      return {
+        ...state,
+        statisticCellCounts: payload.statisticCellCounts,
+      }
+
     case PageActions.UpdateNervosDao:
       return {
         ...state,

src/contexts/states/index.ts

@@ -15,8 +15,16 @@ const initState: State.AppState = {
   addressState: initAddressState,
   transactionState: initTransactionState,
   statistics: initStatistics,
+
   statisticsChartData: [],
   statisticsUncleRates: [],
+  statisticDifficultyHashRates: [],
+  statisticAddressCounts: [],
+  statisticCellCounts: [],
+  statisticDifficultyUncleRates: [],
+  statisticTotalDaoDeposits: [],
+  statisticTransactionCounts: [],
+
   homeBlocks: [],
   nervosDaoState: initNervosDaoState,
 

src/index.css

@@ -42,6 +42,7 @@ a {
   color: inherit;
 }
 
+
 @media (max-width: 700px) {
   .rc-pagination-options-quick-jumper {
     display: none;

src/locales/en.json

@@ -37,6 +37,15 @@
       "mainnet": "Lina Mainnet",
       "testnet": "Testnet"
     },
+    "statistic": {
+      "transaction_count": "Transaction Count",
+      "address_count": "Address Count",
+      "total_dao_deposit": "Total Nervos DAO Deposit",
+      "live_cell": "Live Cell",
+      "dead_cell": "Dead Cell",
+      "cell_count": "Cell Count",
+      "date": "Date"
+    },
     "home": {
       "height": "Height",
       "transactions": "Transactions",
@@ -135,6 +144,7 @@
       "hash_rate_hps": "Hash Rate(H/s)",
       "hash_rate": "Hash Rate",
       "uncle_rate": "Uncle Rate",
+      "uncle_rate_target": "Uncle rate target",
       "transactions_root": "Transactions Root",
       "pending": "Pending",
       "calculating": "Pending",

src/locales/zh.json

@@ -37,6 +37,15 @@
       "mainnet": "Lina Mainnet",
       "testnet": "Testnet"
     },
+    "statistic": {
+      "transaction_count": "交易数量",
+      "address_count": "地址数量",
+      "total_dao_deposit": "Nervos DAO 锁定总额",
+      "live_cell": "未花费 Cell",
+      "dead_cell": "已花费 Cell",
+      "cell_count": "Cell 数量",
+      "date": "时间"
+    },
     "home": {
       "height": "高度",
       "transactions": "交易",
@@ -135,6 +144,7 @@
       "hash_rate_hps": "哈希率(H/s)",
       "hash_rate": "哈希率",
       "uncle_rate": "叔块率",
+      "uncle_rate_target": "叔块率目标值",
       "transactions_root": "Transactions Root",
       "witnesses_root": "Witnesses Root",
       "pending": "待发放",

src/pages/StatisticsChart/AddressCount.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useContext } from 'react'
+import ReactEchartsCore from 'echarts-for-react/lib/core'
+import echarts from 'echarts/lib/echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
+import BigNumber from 'bignumber.js'
+import Content from '../../components/Content'
+import { getStatisticAddressCount } from '../../service/app/statisticsChart'
+import { StateWithDispatch } from '../../contexts/providers/reducer'
+import { AppContext } from '../../contexts/providers'
+import i18n from '../../utils/i18n'
+import Loading from '../../components/Loading'
+import { handleAxis } from '../../utils/chart'
+import { ChartTitle, ChartPanel, LoadingPanel, ChartCardLoadingPanel } from './styled'
+import { parseDateNoTime } from '../../utils/date'
+import { isMobile } from '../../utils/screen'
+import SmallLoading from '../../components/Loading/SmallLoading'
+
+const colors = ['#3182bd']
+
+const gridThumbnail = {
+  left: '4%',
+  right: '10%',
+  top: '8%',
+  bottom: '6%',
+  containLabel: true,
+}
+const grid = {
+  left: '3%',
+  right: '4%',
+  bottom: '3%',
+  containLabel: true,
+}
+
+const getOption = (statisticAddressCounts: State.StatisticAddressCount[], isThumbnail = false) => {
+  return {
+    color: colors,
+    tooltip: !isThumbnail && {
+      trigger: 'axis',
+      formatter: (dataList: any[]) => {
+        const colorSpan = (color: string) =>
+          `<span style="display:inline-block;margin-right:8px;margin-left:5px;margin-bottom:2px;border-radius:10px;width:6px;height:6px;background-color:${color}"></span>`
+        const widthSpan = (value: string) => `<span style="width:120px;display:inline-block;">${value}:</span>`
+        let result = `<div>${colorSpan('#333333')}${widthSpan(i18n.t('statistic.date'))} ${parseDateNoTime(
+          dataList[0].name,
+        )}</div>`
+        result += `<div>${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.address_count'))} ${handleAxis(
+          dataList[0].data,
+        )}</div>`
+        return result
+      },
+    },
+    grid: isThumbnail ? gridThumbnail : grid,
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: statisticAddressCounts.map(data => data.createdAtUnixtimestamp),
+        axisLabel: {
+          formatter: (value: string) => parseDateNoTime(value),
+        },
+      },
+    ],
+    yAxis: [
+      {
+        position: 'left',
+        name: isMobile() || isThumbnail ? '' : i18n.t('statistic.address_count'),
+        type: 'value',
+        scale: true,
+        axisLine: {
+          lineStyle: {
+            color: colors[0],
+          },
+        },
+        axisLabel: {
+          formatter: (value: string) => handleAxis(new BigNumber(value)),
+        },
+      },
+    ],
+    series: [
+      {
+        name: i18n.t('statistic.address_count'),
+        type: 'line',
+        yAxisIndex: '0',
+        symbol: isThumbnail ? 'none' : 'circle',
+        symbolSize: 3,
+        data: statisticAddressCounts.map(data => new BigNumber(data.addressesCount).toNumber()),
+      },
+    ],
+  }
+}
+
+export const AddressCountChart = ({
+  statisticAddressCounts,
+  isThumbnail = false,
+}: {
+  statisticAddressCounts: State.StatisticAddressCount[]
+  isThumbnail?: boolean
+}) => {
+  if (statisticAddressCounts.length === 0) {
+    return isThumbnail ? (
+      <ChartCardLoadingPanel>
+        <SmallLoading />
+      </ChartCardLoadingPanel>
+    ) : null
+  }
+  return (
+    <ReactEchartsCore
+      echarts={echarts}
+      option={getOption(statisticAddressCounts, isThumbnail)}
+      notMerge
+      lazyUpdate
+      style={{
+        height: isThumbnail ? '230px' : '70vh',
+      }}
+    />
+  )
+}
+
+export default ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>) => {
+  const { statisticAddressCounts } = useContext(AppContext)
+
+  useEffect(() => {
+    getStatisticAddressCount(dispatch)
+  }, [dispatch])
+
+  return (
+    <Content>
+      <ChartTitle>{i18n.t('statistic.address_count')}</ChartTitle>
+      {statisticAddressCounts.length > 0 ? (
+        <ChartPanel>
+          <AddressCountChart statisticAddressCounts={statisticAddressCounts} />
+        </ChartPanel>
+      ) : (
+        <LoadingPanel>
+          <Loading show />
+        </LoadingPanel>
+      )}
+    </Content>
+  )
+}