From b7d82f7310d18d15b8a9a46a59c8fadcd80d0e04 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Wed, 4 Dec 2019 14:15:46 +0800 Subject: [PATCH 01/22] feat: add statistic chart data and service --- src/service/http/fetcher.ts | 36 ++++++++++++++++++++++++++++++++++++ src/types/App/index.d.ts | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+) diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 3cec7ae4d..902e32ba6 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -155,3 +155,39 @@ export const fetchNervosDaoDepositors = () => { toCamelcase[]>>(res.data), ) } + +export const fetchStatisticTxCount = () => { + return axiosIns(`/daily_statistics/transactions_count`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} + +export const fetchStatisticAddressesCount = () => { + return axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} + +export const fetchStatisticTotalDaoDeposit = () => { + return axiosIns(`/daily_statistics/total_dao_deposit`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} + +export const fetchStatisticDifficultyHashRate = () => { + return axiosIns(`/daily_statistics/difficulty-hash_rate`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} + +export const fetchStatisticCellCount = () => { + return axiosIns(`/daily_statistics/live_cell_count-dead_cell_count`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} + +export const fetchStatisticDifficultyUncleRate = () => { + return axiosIns(`/daily_statistics/difficulty-uncle_rate`).then((res: AxiosResponse) => + toCamelcase[]>>(res.data), + ) +} diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index 3ec14b796..b33e130f6 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -195,6 +195,39 @@ declare namespace State { epochNumber: number } + export interface StatisticsTxCount { + transactionsCount: string + createdAtUnixtimestamp: string + } + + export interface StatisticsAddressesCount { + addressesCount: string + createdAtUnixtimestamp: string + } + + export interface StatisticsTotalDaoDeposit { + totalDaoDeposit: string + createdAtUnixtimestamp: string + } + + export interface StatisticsDifficultyHashRate { + difficulty: string + hashRate: string + blockNumber: string + } + + export interface StatisticsCellCount { + liveCellCount: string + dead_cell_count: string + blockNumber: string + } + + export interface StatisticsDifficultyUncleRate { + difficulty: string + uncleRate: string + epochNumber: string + } + export interface Components { // mobile header search state searchBarEditable: boolean From e24ee9704bcb28873845084665476abd315928ab Mon Sep 17 00:00:00 2001 From: duanyytop Date: Wed, 4 Dec 2019 21:50:58 +0800 Subject: [PATCH 02/22] feat: impl difficulty and hash rate chart --- package.json | 3 + src/contexts/providers/reducer.ts | 8 + src/contexts/states/index.ts | 8 + .../DifficultyHashRate/index.tsx | 181 ++++++++++++++++++ src/routes/index.tsx | 2 +- src/service/app/statisticsChart.ts | 29 ++- src/service/http/fetcher.ts | 6 +- src/types/App/index.d.ts | 6 + yarn.lock | 37 ++++ 9 files changed, 275 insertions(+), 5 deletions(-) create mode 100644 src/pages/StatisticsChart/DifficultyHashRate/index.tsx diff --git a/package.json b/package.json index 367127abf..409663d8d 100644 --- a/package.json +++ b/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", @@ -16,6 +17,8 @@ "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", diff --git a/src/contexts/providers/reducer.ts b/src/contexts/providers/reducer.ts index 2099f392d..5dae25cde 100644 --- a/src/contexts/providers/reducer.ts +++ b/src/contexts/providers/reducer.ts @@ -35,6 +35,8 @@ export enum PageActions { UpdateStatisticsChartData = 'updateStatisticsChartData', UpdateStatisticsUncleRate = 'updateStatisticsUncleRate', + UpdateStatisticDifficultyHashRate = 'updateStatisticDifficultyHashRate', + UpdateNervosDao = 'updateNervosDao', UpdateNervosDaoTransactions = 'updateNervosDaoTransactions', UpdateNervosDaoTransactionsTotal = 'updateNervosDaoTransactionsTotal', @@ -269,6 +271,12 @@ export const reducer = ( ...state, statisticsUncleRates: payload.statisticsUncleRates, } + case PageActions.UpdateStatisticDifficultyHashRate: + return { + ...state, + statisticsDifficultyHashRates: payload.statisticsDifficultyHashRates, + } + case PageActions.UpdateNervosDao: return { ...state, diff --git a/src/contexts/states/index.ts b/src/contexts/states/index.ts index 947caa07d..702fb5c8b 100644 --- a/src/contexts/states/index.ts +++ b/src/contexts/states/index.ts @@ -15,8 +15,16 @@ const initState: State.AppState = { addressState: initAddressState, transactionState: initTransactionState, statistics: initStatistics, + statisticsChartData: [], statisticsUncleRates: [], + statisticsDifficultyHashRates: [], + statisticsAddressesCounts: [], + statisticsCellCounts: [], + statisticsDifficultyUncleRates: [], + statisticsTotalDaoDeposits: [], + statisticsTxCounts: [], + homeBlocks: [], nervosDaoState: initNervosDaoState, diff --git a/src/pages/StatisticsChart/DifficultyHashRate/index.tsx b/src/pages/StatisticsChart/DifficultyHashRate/index.tsx new file mode 100644 index 000000000..32d4d9f3e --- /dev/null +++ b/src/pages/StatisticsChart/DifficultyHashRate/index.tsx @@ -0,0 +1,181 @@ +import React, { useEffect, useContext } from 'react' +import styled from 'styled-components' +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 { getStatisticDifficultyHashRate } 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 { handleDifficulty, handleHashRate } from '../../../utils/number' + +const ChartPanel = styled.div` + margin: 0 10% 30px 10%; + padding-bottom: 30px; + background: white; + + @media (max-width: 700px) { + margin: 0 4% 30px 4%; + padding-bottom: 0; + } +` + +const ChartTitle = styled.div` + color: #66666; + background: white; + margin: 30px 10% 0 10%; + padding-top: 10px; + font-size: 24px; + text-align: center; + + @media (max-width: 700px) { + margin: 20px 4% 0 4%; + font-size: 16px; + } +` + +const LoadingPanel = styled.div` + display: flex; + width: 100%; + height: 70vh; + align-items: center; + justify-content: center; + + > img { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + + @media (max-width: 700px) { + width: 50px; + height: 50px; + } + } +` + +const colors = ['#3182bd', '#66CC99'] + +const getOption = (statisticsChartData: State.StatisticsDifficultyHashRate[]) => { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${dataList[0].name}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('block.difficulty'))} ${handleDifficulty( + dataList[0].data, + )}
` + result += `
${colorSpan(colors[1])}${widthSpan(i18n.t('block.hash_rate'))} ${handleHashRate( + dataList[1].data, + )}
` + return result + }, + }, + legend: { + data: [i18n.t('block.difficulty'), i18n.t('block.hash_rate_hps')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticsChartData.map(data => data.blockNumber), + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + yAxis: [ + { + position: 'left', + name: i18n.t('block.difficulty'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[0], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + { + position: 'right', + name: i18n.t('block.hash_rate_hps'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[1], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + series: [ + { + name: i18n.t('block.difficulty'), + type: 'line', + yAxisIndex: '0', + data: statisticsChartData.map(data => new BigNumber(data.difficulty).toNumber()), + }, + { + name: i18n.t('block.hash_rate_hps'), + type: 'line', + yAxisIndex: '1', + data: statisticsChartData.map(data => new BigNumber(data.hashRate).toNumber()), + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticsDifficultyHashRates } = useContext(AppContext) + + useEffect(() => { + getStatisticDifficultyHashRate(dispatch) + }, [dispatch]) + + return ( + + {`${i18n.t('block.difficulty')} & ${i18n.t('block.hash_rate')}`} + {statisticsDifficultyHashRates.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9b8a3222c..250aad7cf 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,7 +16,7 @@ import NotFoundPage from '../pages/404' import SearchFail from '../pages/SearchFail' import Maintain from '../pages/Maintain' import Sheet from '../components/Sheet' -import StatisticsChart from '../pages/StatisticsChart' +import StatisticsChart from '../pages/StatisticsChart/DifficultyHashRate' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index 97c9cb5d4..91b4ba088 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -1,5 +1,5 @@ import BigNumber from 'bignumber.js' -import { fetchStatisticsChart } from '../http/fetcher' +import { fetchStatisticsChart, fetchStatisticDifficultyHashRate } from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' const findDifficulty = ( @@ -103,4 +103,31 @@ export const getStatisticsChart = (dispatch: AppDispatch) => { }) } +export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { + fetchStatisticDifficultyHashRate().then( + (response: Response.Response[]> | null) => { + if (response) { + const { data } = response + const difficultyHashRates = data + .map(wrapper => { + return { + blockNumber: wrapper.attributes.blockNumber, + difficulty: wrapper.attributes.difficulty, + hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toNumber(), + } + }) + .reverse() + if (difficultyHashRates.length > 0) { + dispatch({ + type: PageActions.UpdateStatisticDifficultyHashRate, + payload: { + statisticsDifficultyHashRates: difficultyHashRates, + }, + }) + } + } + }, + ) +} + export default getStatisticsChart diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 902e32ba6..02da0ca10 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -175,19 +175,19 @@ export const fetchStatisticTotalDaoDeposit = () => { } export const fetchStatisticDifficultyHashRate = () => { - return axiosIns(`/daily_statistics/difficulty-hash_rate`).then((res: AxiosResponse) => + return axiosIns(`/block_statistics/difficulty-hash_rate`).then((res: AxiosResponse) => toCamelcase[]>>(res.data), ) } export const fetchStatisticCellCount = () => { - return axiosIns(`/daily_statistics/live_cell_count-dead_cell_count`).then((res: AxiosResponse) => + return axiosIns(`/block_statistics/live_cell_count-dead_cell_count`).then((res: AxiosResponse) => toCamelcase[]>>(res.data), ) } export const fetchStatisticDifficultyUncleRate = () => { - return axiosIns(`/daily_statistics/difficulty-uncle_rate`).then((res: AxiosResponse) => + return axiosIns(`/epoch_statistics/difficulty-uncle_rate`).then((res: AxiosResponse) => toCamelcase[]>>(res.data), ) } diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index b33e130f6..f69bdd82d 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -293,6 +293,12 @@ declare namespace State { statistics: Statistics statisticsChartData: StatisticsBaseData[] statisticsUncleRates: StatisticsUncleRateChart[] + statisticsDifficultyHashRates: StatisticsDifficultyHashRate[] + statisticsDifficultyUncleRates: StatisticsDifficultyUncleRate[] + statisticsTxCounts: StatisticsTxCount[] + statisticsCellCounts: StatisticsCellCount[] + statisticsTotalDaoDeposits: StatisticsTotalDaoDeposit[] + statisticsAddressesCounts: StatisticsAddressesCount[] nervosDaoState: NervosDaoState components: Components diff --git a/yarn.lock b/yarn.lock index d0bf44963..c4b3a46b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2048,6 +2048,13 @@ dependencies: "@babel/types" "^7.3.0" +"@types/echarts@^4.4.1": + version "4.4.1" + resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.4.1.tgz#d5b257d38d7af62b7bba8cca952e814f610b1f03" + integrity sha512-Tq2XdnrxaneIVHBQa8Vkm69u4yL1xFgh6gFWK5XlVave23VFUEwg3dfzTjec1XdfgZI/jKPsf6QS/TpTa9Gr9g== + dependencies: + "@types/zrender" "*" + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -2238,6 +2245,11 @@ dependencies: "@types/yargs-parser" "*" +"@types/zrender@*": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd" + integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w== + "@typescript-eslint/eslint-plugin@1.11.0": version "1.11.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.11.0.tgz#870f752c520db04db6d3668af7479026a6f2fb9a" @@ -4838,6 +4850,21 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" +echarts-for-react@^2.0.15-beta.1: + version "2.0.15-beta.1" + resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.15-beta.1.tgz#1afa21ee0f08f9023eff0b5ab3351f2fe0f708b6" + integrity sha512-wR8XaI3j/4JvTidZrrJVfP/RqSggLRlzKOwcruytyLSA6AyE51T7mK+EucfwZ0NkX8H6tPFCHCvgJH1LyXjiIg== + dependencies: + fast-deep-equal "^2.0.1" + size-sensor "^0.2.0" + +echarts@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.5.0.tgz#2111960645a345eb819ddac4792a2c065bdff162" + integrity sha512-q9M0errodeX/786uPifro76x0elbrUQkbSHh235QzbkaASuvP9AQoMErhGBno4iC/yq6kFDLqgmm3XCPWQGLzA== + dependencies: + zrender "4.1.2" + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -11698,6 +11725,11 @@ sisteransi@^1.0.3: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb" integrity sha512-SbEG75TzH8G7eVXFSN5f9EExILKfly7SUvVY5DhhYLvfhKqhDFY0OzevWa/zwak0RLRfWS5AvfMWpd9gJvr5Yg== +size-sensor@^0.2.0: + version "0.2.5" + resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-0.2.5.tgz#e8ffb7cc5258893472bfda4f5734d66583247757" + integrity sha512-Rip8d6LmCHIBUY5iIS3nKln1X4bF8260oFI4suo6MX+vOV/aNpNWYKTyjamSJMbxP17qMlR0DmGXFEio3BYJUg== + slash@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55" @@ -13453,3 +13485,8 @@ yargs@~3.10.0: cliui "^2.1.0" decamelize "^1.0.0" window-size "0.1.0" + +zrender@4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.1.2.tgz#8368deff24c7e237cbcbd3a2ff93017905ae43f7" + integrity sha512-MJYEo1ZOVesjxYsfcGtPXnUREmh4ACMV08QZLGZ3S7D1xOd96iz3O6nf6pv5PHb5NSHkbizr7ChSIgtAGwncvA== From 597a320dc9330cdc632ae34686438b53e0bff3f6 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 11:35:49 +0800 Subject: [PATCH 03/22] feat: impl difficulty and uncle rate chart --- src/contexts/providers/reducer.ts | 6 + src/locales/en.json | 1 + src/locales/zh.json | 1 + .../DifficultyHashRate/index.tsx | 51 +------ .../DifficultyUncleRate/index.tsx | 143 ++++++++++++++++++ src/pages/StatisticsChart/styled.tsx | 45 ++++++ src/routes/index.tsx | 2 +- src/service/app/statisticsChart.ts | 33 +++- 8 files changed, 232 insertions(+), 50 deletions(-) create mode 100644 src/pages/StatisticsChart/DifficultyUncleRate/index.tsx create mode 100644 src/pages/StatisticsChart/styled.tsx diff --git a/src/contexts/providers/reducer.ts b/src/contexts/providers/reducer.ts index 5dae25cde..149b7718e 100644 --- a/src/contexts/providers/reducer.ts +++ b/src/contexts/providers/reducer.ts @@ -36,6 +36,7 @@ export enum PageActions { UpdateStatisticsUncleRate = 'updateStatisticsUncleRate', UpdateStatisticDifficultyHashRate = 'updateStatisticDifficultyHashRate', + UpdateStatisticDifficultyUncleRate = 'updateStatisticDifficultyUncleRate', UpdateNervosDao = 'updateNervosDao', UpdateNervosDaoTransactions = 'updateNervosDaoTransactions', @@ -276,6 +277,11 @@ export const reducer = ( ...state, statisticsDifficultyHashRates: payload.statisticsDifficultyHashRates, } + case PageActions.UpdateStatisticDifficultyUncleRate: + return { + ...state, + statisticsDifficultyUncleRates: payload.statisticsDifficultyUncleRates, + } case PageActions.UpdateNervosDao: return { diff --git a/src/locales/en.json b/src/locales/en.json index cfd79f6b7..f5f42444a 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -135,6 +135,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", diff --git a/src/locales/zh.json b/src/locales/zh.json index 1916bfd59..f34705217 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -135,6 +135,7 @@ "hash_rate_hps": "哈希率(H/s)", "hash_rate": "哈希率", "uncle_rate": "叔块率", + "uncle_rate_target": "叔块率目标值", "transactions_root": "Transactions Root", "witnesses_root": "Witnesses Root", "pending": "待发放", diff --git a/src/pages/StatisticsChart/DifficultyHashRate/index.tsx b/src/pages/StatisticsChart/DifficultyHashRate/index.tsx index 32d4d9f3e..0fdd4b780 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate/index.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate/index.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useContext } from 'react' -import styled from 'styled-components' import ReactEchartsCore from 'echarts-for-react/lib/core' import echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/line' @@ -14,52 +13,7 @@ import i18n from '../../../utils/i18n' import Loading from '../../../components/Loading' import { handleAxis } from '../../../utils/chart' import { handleDifficulty, handleHashRate } from '../../../utils/number' - -const ChartPanel = styled.div` - margin: 0 10% 30px 10%; - padding-bottom: 30px; - background: white; - - @media (max-width: 700px) { - margin: 0 4% 30px 4%; - padding-bottom: 0; - } -` - -const ChartTitle = styled.div` - color: #66666; - background: white; - margin: 30px 10% 0 10%; - padding-top: 10px; - font-size: 24px; - text-align: center; - - @media (max-width: 700px) { - margin: 20px 4% 0 4%; - font-size: 16px; - } -` - -const LoadingPanel = styled.div` - display: flex; - width: 100%; - height: 70vh; - align-items: center; - justify-content: center; - - > img { - width: 120px; - height: 120px; - display: flex; - align-items: center; - justify-content: center; - - @media (max-width: 700px) { - width: 50px; - height: 50px; - } - } -` +import { ChartTitle, ChartPanel, LoadingPanel } from '../styled' const colors = ['#3182bd', '#66CC99'] @@ -136,12 +90,14 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyHashRate[]) => name: i18n.t('block.difficulty'), type: 'line', yAxisIndex: '0', + symbol: 'none', data: statisticsChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.hash_rate_hps'), type: 'line', yAxisIndex: '1', + symbol: 'none', data: statisticsChartData.map(data => new BigNumber(data.hashRate).toNumber()), }, ], @@ -165,7 +121,6 @@ export default ({ dispatch }: React.PropsWithoutRef) => { option={getOption(statisticsDifficultyHashRates)} notMerge lazyUpdate - theme="theme_name" style={{ height: '70vh', }} diff --git a/src/pages/StatisticsChart/DifficultyUncleRate/index.tsx b/src/pages/StatisticsChart/DifficultyUncleRate/index.tsx new file mode 100644 index 000000000..71924cbd6 --- /dev/null +++ b/src/pages/StatisticsChart/DifficultyUncleRate/index.tsx @@ -0,0 +1,143 @@ +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 'echarts/lib/component/markLine' +import BigNumber from 'bignumber.js' +import Content from '../../../components/Content' +import { getStatisticDifficultyUncleRate } 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 { handleDifficulty } from '../../../utils/number' +import { ChartTitle, ChartPanel, LoadingPanel } from '../styled' + +const colors = ['#3182bd', '#66CC99'] + +const getOption = (statisticsChartData: State.StatisticsDifficultyUncleRate[]) => { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.epoch_number'))} ${dataList[0].name}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('block.difficulty'))} ${handleDifficulty( + dataList[0].data, + )}
` + result += `
${colorSpan(colors[1])}${widthSpan(i18n.t('block.uncle_rate'))} ${dataList[1].data}%
` + return result + }, + }, + legend: { + data: [i18n.t('block.difficulty'), i18n.t('block.uncle_rate')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticsChartData.map(data => data.epochNumber), + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + yAxis: [ + { + position: 'left', + name: i18n.t('block.difficulty'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[0], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + { + position: 'right', + name: i18n.t('block.uncle_rate'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[1], + }, + }, + axisLabel: { + formatter: (value: string) => `${value}%`, + }, + }, + ], + series: [ + { + name: i18n.t('block.difficulty'), + type: 'line', + yAxisIndex: '0', + symbol: 'none', + data: statisticsChartData.map(data => new BigNumber(data.difficulty).toNumber()), + }, + { + name: i18n.t('block.uncle_rate'), + type: 'line', + yAxisIndex: '1', + symbol: 'none', + data: statisticsChartData.map(data => (Number(data.uncleRate) * 100).toFixed(2)), + markLine: { + data: [ + { + name: i18n.t('block.uncle_rate_target'), + yAxis: '2.5', + }, + ], + }, + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticsDifficultyUncleRates } = useContext(AppContext) + + useEffect(() => { + getStatisticDifficultyUncleRate(dispatch) + }, [dispatch]) + + return ( + + {`${i18n.t('block.difficulty')} & ${i18n.t('block.uncle_rate')}`} + {statisticsDifficultyUncleRates.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx new file mode 100644 index 000000000..1ede741f9 --- /dev/null +++ b/src/pages/StatisticsChart/styled.tsx @@ -0,0 +1,45 @@ +import styled from 'styled-components' + +export const ChartPanel = styled.div` + margin: 0 10% 30px 10%; + background: white; + + @media (max-width: 700px) { + margin: 0 4% 30px 4%; + } +` + +export const ChartTitle = styled.div` + color: #66666; + background: white; + margin: 30px 10% 0 10%; + padding-top: 10px; + font-size: 24px; + text-align: center; + + @media (max-width: 700px) { + margin: 20px 4% 0 4%; + font-size: 16px; + } +` + +export const LoadingPanel = styled.div` + display: flex; + width: 100%; + height: 70vh; + align-items: center; + justify-content: center; + + > img { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + + @media (max-width: 700px) { + width: 50px; + height: 50px; + } + } +` diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 250aad7cf..8da4baa43 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,7 +16,7 @@ import NotFoundPage from '../pages/404' import SearchFail from '../pages/SearchFail' import Maintain from '../pages/Maintain' import Sheet from '../components/Sheet' -import StatisticsChart from '../pages/StatisticsChart/DifficultyHashRate' +import StatisticsChart from '../pages/StatisticsChart/DifficultyUncleRate' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index 91b4ba088..85207a90b 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -1,5 +1,9 @@ import BigNumber from 'bignumber.js' -import { fetchStatisticsChart, fetchStatisticDifficultyHashRate } from '../http/fetcher' +import { + fetchStatisticsChart, + fetchStatisticDifficultyHashRate, + fetchStatisticDifficultyUncleRate, +} from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' const findDifficulty = ( @@ -130,4 +134,31 @@ export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { ) } +export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { + fetchStatisticDifficultyUncleRate().then( + (response: Response.Response[]> | null) => { + if (response) { + const { data } = response + const difficultyUncleRates = data + .map(wrapper => { + return { + epochNumber: wrapper.attributes.epochNumber, + difficulty: wrapper.attributes.difficulty, + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toNumber().toFixed(4), + } + }) + .reverse() + if (difficultyUncleRates.length > 0) { + dispatch({ + type: PageActions.UpdateStatisticDifficultyUncleRate, + payload: { + statisticsDifficultyUncleRates: difficultyUncleRates, + }, + }) + } + } + }, + ) +} + export default getStatisticsChart From 1995794a17cb78b2885ed57599207dbecb73edb7 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 11:41:37 +0800 Subject: [PATCH 04/22] refactor: update charts folds and files --- .../index.tsx => DifficultyHashRate.tsx} | 18 +++++++++--------- .../index.tsx => DifficultyUncleRate.tsx} | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) rename src/pages/StatisticsChart/{DifficultyHashRate/index.tsx => DifficultyHashRate.tsx} (87%) rename src/pages/StatisticsChart/{DifficultyUncleRate/index.tsx => DifficultyUncleRate.tsx} (88%) diff --git a/src/pages/StatisticsChart/DifficultyHashRate/index.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx similarity index 87% rename from src/pages/StatisticsChart/DifficultyHashRate/index.tsx rename to src/pages/StatisticsChart/DifficultyHashRate.tsx index 0fdd4b780..2dd72c976 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate/index.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -5,15 +5,15 @@ 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 { getStatisticDifficultyHashRate } 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 { handleDifficulty, handleHashRate } from '../../../utils/number' -import { ChartTitle, ChartPanel, LoadingPanel } from '../styled' +import Content from '../../components/Content' +import { getStatisticDifficultyHashRate } 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 { handleDifficulty, handleHashRate } from '../../utils/number' +import { ChartTitle, ChartPanel, LoadingPanel } from './styled' const colors = ['#3182bd', '#66CC99'] diff --git a/src/pages/StatisticsChart/DifficultyUncleRate/index.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx similarity index 88% rename from src/pages/StatisticsChart/DifficultyUncleRate/index.tsx rename to src/pages/StatisticsChart/DifficultyUncleRate.tsx index 71924cbd6..18fe498c4 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate/index.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -6,15 +6,15 @@ import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/markLine' import BigNumber from 'bignumber.js' -import Content from '../../../components/Content' -import { getStatisticDifficultyUncleRate } 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 { handleDifficulty } from '../../../utils/number' -import { ChartTitle, ChartPanel, LoadingPanel } from '../styled' +import Content from '../../components/Content' +import { getStatisticDifficultyUncleRate } 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 { handleDifficulty } from '../../utils/number' +import { ChartTitle, ChartPanel, LoadingPanel } from './styled' const colors = ['#3182bd', '#66CC99'] From f01be09e25990a3ac5b83cba685c22c4a219b329 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 15:27:54 +0800 Subject: [PATCH 05/22] feat: impl transaction count chart --- src/contexts/providers/reducer.ts | 10 +- src/contexts/states/index.ts | 12 +- src/locales/en.json | 4 + src/locales/zh.json | 4 + .../StatisticsChart/DifficultyHashRate.tsx | 14 +-- .../StatisticsChart/DifficultyUncleRate.tsx | 14 +-- .../StatisticsChart/TransactionCount.tsx | 114 ++++++++++++++++++ src/routes/index.tsx | 2 +- src/service/app/statisticsChart.ts | 33 ++++- src/service/http/fetcher.ts | 12 +- src/types/App/index.d.ts | 24 ++-- src/utils/chart.ts | 9 +- src/utils/date.ts | 5 + 13 files changed, 208 insertions(+), 49 deletions(-) create mode 100644 src/pages/StatisticsChart/TransactionCount.tsx diff --git a/src/contexts/providers/reducer.ts b/src/contexts/providers/reducer.ts index 149b7718e..38231410c 100644 --- a/src/contexts/providers/reducer.ts +++ b/src/contexts/providers/reducer.ts @@ -37,6 +37,7 @@ export enum PageActions { UpdateStatisticDifficultyHashRate = 'updateStatisticDifficultyHashRate', UpdateStatisticDifficultyUncleRate = 'updateStatisticDifficultyUncleRate', + UpdateStatisticTransactionCount = 'updateStatisticTransactionCount', UpdateNervosDao = 'updateNervosDao', UpdateNervosDaoTransactions = 'updateNervosDaoTransactions', @@ -275,12 +276,17 @@ export const reducer = ( case PageActions.UpdateStatisticDifficultyHashRate: return { ...state, - statisticsDifficultyHashRates: payload.statisticsDifficultyHashRates, + statisticDifficultyHashRates: payload.statisticDifficultyHashRates, } case PageActions.UpdateStatisticDifficultyUncleRate: return { ...state, - statisticsDifficultyUncleRates: payload.statisticsDifficultyUncleRates, + statisticDifficultyUncleRates: payload.statisticDifficultyUncleRates, + } + case PageActions.UpdateStatisticTransactionCount: + return { + ...state, + statisticTransactionCounts: payload.statisticTransactionCounts, } case PageActions.UpdateNervosDao: diff --git a/src/contexts/states/index.ts b/src/contexts/states/index.ts index 702fb5c8b..d04da0ac6 100644 --- a/src/contexts/states/index.ts +++ b/src/contexts/states/index.ts @@ -18,12 +18,12 @@ const initState: State.AppState = { statisticsChartData: [], statisticsUncleRates: [], - statisticsDifficultyHashRates: [], - statisticsAddressesCounts: [], - statisticsCellCounts: [], - statisticsDifficultyUncleRates: [], - statisticsTotalDaoDeposits: [], - statisticsTxCounts: [], + statisticDifficultyHashRates: [], + statisticAddressesCounts: [], + statisticCellCounts: [], + statisticDifficultyUncleRates: [], + statisticTotalDaoDeposits: [], + statisticTransactionCounts: [], homeBlocks: [], nervosDaoState: initNervosDaoState, diff --git a/src/locales/en.json b/src/locales/en.json index f5f42444a..5cd5180c9 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -37,6 +37,10 @@ "mainnet": "Lina Mainnet", "testnet": "Testnet" }, + "statistic": { + "transaction_count": "Transaction Count", + "date": "Date" + }, "home": { "height": "Height", "transactions": "Transactions", diff --git a/src/locales/zh.json b/src/locales/zh.json index f34705217..00d3ca6ca 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -37,6 +37,10 @@ "mainnet": "Lina Mainnet", "testnet": "Testnet" }, + "statistic": { + "transaction_count": "交易数量", + "date": "时间" + }, "home": { "height": "高度", "transactions": "交易", diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index 2dd72c976..140bdc348 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -17,7 +17,7 @@ import { ChartTitle, ChartPanel, LoadingPanel } from './styled' const colors = ['#3182bd', '#66CC99'] -const getOption = (statisticsChartData: State.StatisticsDifficultyHashRate[]) => { +const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { return { color: colors, tooltip: { @@ -49,7 +49,7 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyHashRate[]) => { type: 'category', boundaryGap: false, - data: statisticsChartData.map(data => data.blockNumber), + data: statisticChartData.map(data => data.blockNumber), axisLabel: { formatter: (value: string) => handleAxis(new BigNumber(value)), }, @@ -91,21 +91,21 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyHashRate[]) => type: 'line', yAxisIndex: '0', symbol: 'none', - data: statisticsChartData.map(data => new BigNumber(data.difficulty).toNumber()), + data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.hash_rate_hps'), type: 'line', yAxisIndex: '1', symbol: 'none', - data: statisticsChartData.map(data => new BigNumber(data.hashRate).toNumber()), + data: statisticChartData.map(data => new BigNumber(data.hashRate).toNumber()), }, ], } } export default ({ dispatch }: React.PropsWithoutRef) => { - const { statisticsDifficultyHashRates } = useContext(AppContext) + const { statisticDifficultyHashRates } = useContext(AppContext) useEffect(() => { getStatisticDifficultyHashRate(dispatch) @@ -114,11 +114,11 @@ export default ({ dispatch }: React.PropsWithoutRef) => { return ( {`${i18n.t('block.difficulty')} & ${i18n.t('block.hash_rate')}`} - {statisticsDifficultyHashRates.length > 0 ? ( + {statisticDifficultyHashRates.length > 0 ? ( { +const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => { return { color: colors, tooltip: { @@ -48,7 +48,7 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyUncleRate[]) = { type: 'category', boundaryGap: false, - data: statisticsChartData.map(data => data.epochNumber), + data: statisticChartData.map(data => data.epochNumber), axisLabel: { formatter: (value: string) => handleAxis(new BigNumber(value)), }, @@ -90,14 +90,14 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyUncleRate[]) = type: 'line', yAxisIndex: '0', symbol: 'none', - data: statisticsChartData.map(data => new BigNumber(data.difficulty).toNumber()), + data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.uncle_rate'), type: 'line', yAxisIndex: '1', symbol: 'none', - data: statisticsChartData.map(data => (Number(data.uncleRate) * 100).toFixed(2)), + data: statisticChartData.map(data => (Number(data.uncleRate) * 100).toFixed(2)), markLine: { data: [ { @@ -112,7 +112,7 @@ const getOption = (statisticsChartData: State.StatisticsDifficultyUncleRate[]) = } export default ({ dispatch }: React.PropsWithoutRef) => { - const { statisticsDifficultyUncleRates } = useContext(AppContext) + const { statisticDifficultyUncleRates } = useContext(AppContext) useEffect(() => { getStatisticDifficultyUncleRate(dispatch) @@ -121,11 +121,11 @@ export default ({ dispatch }: React.PropsWithoutRef) => { return ( {`${i18n.t('block.difficulty')} & ${i18n.t('block.uncle_rate')}`} - {statisticsDifficultyUncleRates.length > 0 ? ( + {statisticDifficultyUncleRates.length > 0 ? ( { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('statistic.date'))} ${parseDateNoTime( + dataList[0].name, + )}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.transaction_count'))} ${handleAxis( + dataList[0].data, + )}
` + return result + }, + }, + legend: { + data: [i18n.t('statistic.transaction_count')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticTransactionCounts.map(data => data.createdAtUnixtimestamp), + axisLabel: { + formatter: (value: string) => parseDateNoTime(value), + }, + }, + ], + yAxis: [ + { + position: 'left', + name: i18n.t('statistic.transaction_count'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[0], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + series: [ + { + name: i18n.t('statistic.transaction_count'), + type: 'line', + yAxisIndex: '0', + symbol: 'none', + data: statisticTransactionCounts.map(data => new BigNumber(data.transactionsCount).toNumber()), + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticTransactionCounts } = useContext(AppContext) + + useEffect(() => { + getStatisticTransactionCount(dispatch) + }, [dispatch]) + + return ( + + {i18n.t('statistic.transaction_count')} + {statisticTransactionCounts.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 8da4baa43..07f9e54ff 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,7 +16,7 @@ import NotFoundPage from '../pages/404' import SearchFail from '../pages/SearchFail' import Maintain from '../pages/Maintain' import Sheet from '../components/Sheet' -import StatisticsChart from '../pages/StatisticsChart/DifficultyUncleRate' +import StatisticsChart from '../pages/StatisticsChart/TransactionCount' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index 85207a90b..a0f7533a2 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -3,6 +3,7 @@ import { fetchStatisticsChart, fetchStatisticDifficultyHashRate, fetchStatisticDifficultyUncleRate, + fetchStatisticTransactionCount, } from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' @@ -109,7 +110,7 @@ export const getStatisticsChart = (dispatch: AppDispatch) => { export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { fetchStatisticDifficultyHashRate().then( - (response: Response.Response[]> | null) => { + (response: Response.Response[]> | null) => { if (response) { const { data } = response const difficultyHashRates = data @@ -125,7 +126,7 @@ export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { dispatch({ type: PageActions.UpdateStatisticDifficultyHashRate, payload: { - statisticsDifficultyHashRates: difficultyHashRates, + statisticDifficultyHashRates: difficultyHashRates, }, }) } @@ -136,7 +137,7 @@ export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { fetchStatisticDifficultyUncleRate().then( - (response: Response.Response[]> | null) => { + (response: Response.Response[]> | null) => { if (response) { const { data } = response const difficultyUncleRates = data @@ -152,7 +153,31 @@ export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { dispatch({ type: PageActions.UpdateStatisticDifficultyUncleRate, payload: { - statisticsDifficultyUncleRates: difficultyUncleRates, + statisticDifficultyUncleRates: difficultyUncleRates, + }, + }) + } + } + }, + ) +} + +export const getStatisticTransactionCount = (dispatch: AppDispatch) => { + fetchStatisticTransactionCount().then( + (response: Response.Response[]> | null) => { + if (response) { + const { data } = response + const transactionCounts = data.map(wrapper => { + return { + transactionsCount: wrapper.attributes.transactionsCount, + createdAtUnixtimestamp: wrapper.attributes.createdAtUnixtimestamp, + } + }) + if (transactionCounts.length > 0) { + dispatch({ + type: PageActions.UpdateStatisticTransactionCount, + payload: { + statisticTransactionCounts: transactionCounts, }, }) } diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 02da0ca10..55835a410 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -156,27 +156,27 @@ export const fetchNervosDaoDepositors = () => { ) } -export const fetchStatisticTxCount = () => { +export const fetchStatisticTransactionCount = () => { return axiosIns(`/daily_statistics/transactions_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } export const fetchStatisticAddressesCount = () => { return axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } export const fetchStatisticTotalDaoDeposit = () => { return axiosIns(`/daily_statistics/total_dao_deposit`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } export const fetchStatisticDifficultyHashRate = () => { return axiosIns(`/block_statistics/difficulty-hash_rate`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } @@ -188,6 +188,6 @@ export const fetchStatisticCellCount = () => { export const fetchStatisticDifficultyUncleRate = () => { return axiosIns(`/epoch_statistics/difficulty-uncle_rate`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index f69bdd82d..4a640ca39 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -190,27 +190,27 @@ declare namespace State { epochNumber?: number } - export interface StatisticsUncleRate { + export interface StatisticUncleRate { uncleRate: number epochNumber: number } - export interface StatisticsTxCount { + export interface StatisticTransactionCount { transactionsCount: string createdAtUnixtimestamp: string } - export interface StatisticsAddressesCount { + export interface StatisticAddressesCount { addressesCount: string createdAtUnixtimestamp: string } - export interface StatisticsTotalDaoDeposit { + export interface StatisticTotalDaoDeposit { totalDaoDeposit: string createdAtUnixtimestamp: string } - export interface StatisticsDifficultyHashRate { + export interface StatisticDifficultyHashRate { difficulty: string hashRate: string blockNumber: string @@ -222,7 +222,7 @@ declare namespace State { blockNumber: string } - export interface StatisticsDifficultyUncleRate { + export interface StatisticDifficultyUncleRate { difficulty: string uncleRate: string epochNumber: string @@ -293,12 +293,12 @@ declare namespace State { statistics: Statistics statisticsChartData: StatisticsBaseData[] statisticsUncleRates: StatisticsUncleRateChart[] - statisticsDifficultyHashRates: StatisticsDifficultyHashRate[] - statisticsDifficultyUncleRates: StatisticsDifficultyUncleRate[] - statisticsTxCounts: StatisticsTxCount[] - statisticsCellCounts: StatisticsCellCount[] - statisticsTotalDaoDeposits: StatisticsTotalDaoDeposit[] - statisticsAddressesCounts: StatisticsAddressesCount[] + statisticDifficultyHashRates: StatisticsDifficultyHashRate[] + statisticDifficultyUncleRates: StatisticsDifficultyUncleRate[] + statisticTransactionCounts: StatisticTransactionCount[] + statisticCellCounts: StatisticsCellCount[] + statisticTotalDaoDeposits: StatisticTotalDaoDeposit[] + statisticAddressesCounts: StatisticAddressesCount[] nervosDaoState: NervosDaoState components: Components diff --git a/src/utils/chart.ts b/src/utils/chart.ts index 6a850f9e7..3d53091d6 100644 --- a/src/utils/chart.ts +++ b/src/utils/chart.ts @@ -1,9 +1,10 @@ import BigNumber from 'bignumber.js' import { isMobile } from './screen' -export const handleAxis = (value: BigNumber) => { - if (value.isNaN() || value.isZero()) return '0' - const kv = value.dividedBy(1000) +export const handleAxis = (value: BigNumber | string | number) => { + const bigValue = typeof value === 'string' || typeof value === 'number' ? new BigNumber(value) : value + if (bigValue.isNaN() || bigValue.isZero()) return '0' + const kv = bigValue.dividedBy(1000) const mv = kv.dividedBy(1000) const gv = mv.dividedBy(1000) const tv = gv.dividedBy(1000) @@ -36,7 +37,7 @@ export const handleAxis = (value: BigNumber) => { if (kv.isGreaterThanOrEqualTo(1)) { return `${kv.toFixed()}K` } - return `${value.toFixed()}` + return `${bigValue.toFixed()}` } export const parseInterval = (max: number, min: number) => { diff --git a/src/utils/date.ts b/src/utils/date.ts index 5d36e1b98..d04f15a8d 100644 --- a/src/utils/date.ts +++ b/src/utils/date.ts @@ -18,6 +18,11 @@ export const parseSimpleDateNoSecond = (timestamp: number | string) => { )}` } +export const parseDateNoTime = (timestamp: number | string) => { + const date = new Date(Number(timestamp) * 1000) + return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` +} + export const parseDate = (timestamp: number | string) => { const now = new Date().getTime() const diff = (now - Number(timestamp)) / 1000 From 921ae034b75e38f57288447cd305b9855cb3981a Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 16:59:16 +0800 Subject: [PATCH 06/22] feat: impl address count chart --- src/contexts/providers/reducer.ts | 6 + src/contexts/states/index.ts | 2 +- src/locales/en.json | 1 + src/locales/zh.json | 1 + src/pages/StatisticsChart/AddressCount.tsx | 114 ++++++++++++++++++ src/routes/index.tsx | 30 ++++- src/service/app/statisticsChart.ts | 129 ++++++++++++--------- src/service/http/fetcher.ts | 4 +- src/types/App/index.d.ts | 4 +- 9 files changed, 229 insertions(+), 62 deletions(-) create mode 100644 src/pages/StatisticsChart/AddressCount.tsx diff --git a/src/contexts/providers/reducer.ts b/src/contexts/providers/reducer.ts index 38231410c..402141496 100644 --- a/src/contexts/providers/reducer.ts +++ b/src/contexts/providers/reducer.ts @@ -38,6 +38,7 @@ export enum PageActions { UpdateStatisticDifficultyHashRate = 'updateStatisticDifficultyHashRate', UpdateStatisticDifficultyUncleRate = 'updateStatisticDifficultyUncleRate', UpdateStatisticTransactionCount = 'updateStatisticTransactionCount', + UpdateStatisticAddressCount = 'updateStatisticAddressCount', UpdateNervosDao = 'updateNervosDao', UpdateNervosDaoTransactions = 'updateNervosDaoTransactions', @@ -288,6 +289,11 @@ export const reducer = ( ...state, statisticTransactionCounts: payload.statisticTransactionCounts, } + case PageActions.UpdateStatisticAddressCount: + return { + ...state, + statisticAddressCounts: payload.statisticAddressCounts, + } case PageActions.UpdateNervosDao: return { diff --git a/src/contexts/states/index.ts b/src/contexts/states/index.ts index d04da0ac6..7b40debde 100644 --- a/src/contexts/states/index.ts +++ b/src/contexts/states/index.ts @@ -19,7 +19,7 @@ const initState: State.AppState = { statisticsChartData: [], statisticsUncleRates: [], statisticDifficultyHashRates: [], - statisticAddressesCounts: [], + statisticAddressCounts: [], statisticCellCounts: [], statisticDifficultyUncleRates: [], statisticTotalDaoDeposits: [], diff --git a/src/locales/en.json b/src/locales/en.json index 5cd5180c9..cec2704a3 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -39,6 +39,7 @@ }, "statistic": { "transaction_count": "Transaction Count", + "address_count": "Address Count", "date": "Date" }, "home": { diff --git a/src/locales/zh.json b/src/locales/zh.json index 00d3ca6ca..de1f269d9 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -39,6 +39,7 @@ }, "statistic": { "transaction_count": "交易数量", + "address_count": "地址数量", "date": "时间" }, "home": { diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx new file mode 100644 index 000000000..a4e4ae8d7 --- /dev/null +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -0,0 +1,114 @@ +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 } from './styled' +import { parseDateNoTime } from '../../utils/date' + +const colors = ['#3182bd'] + +const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('statistic.date'))} ${parseDateNoTime( + dataList[0].name, + )}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.address_count'))} ${handleAxis( + dataList[0].data, + )}
` + return result + }, + }, + legend: { + data: [i18n.t('statistic.address_count')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticAddressCounts.map(data => data.createdAtUnixtimestamp), + axisLabel: { + formatter: (value: string) => parseDateNoTime(value), + }, + }, + ], + yAxis: [ + { + position: 'left', + name: 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: 'none', + data: statisticAddressCounts.map(data => new BigNumber(data.addressesCount).toNumber()), + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticAddressCounts } = useContext(AppContext) + + useEffect(() => { + getStatisticAddressCount(dispatch) + }, [dispatch]) + + return ( + + {i18n.t('statistic.address_count')} + {statisticAddressCounts.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 07f9e54ff..3f44818fc 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -16,7 +16,11 @@ import NotFoundPage from '../pages/404' import SearchFail from '../pages/SearchFail' import Maintain from '../pages/Maintain' import Sheet from '../components/Sheet' -import StatisticsChart from '../pages/StatisticsChart/TransactionCount' +import StatisticsChart from '../pages/StatisticsChart/index' +import DifficultyHashRateChart from '../pages/StatisticsChart/DifficultyHashRate' +import DifficultyUncleRateChart from '../pages/StatisticsChart/DifficultyUncleRate' +import TransactionCountChart from '../pages/StatisticsChart/TransactionCount' +import AddressCountChart from '../pages/StatisticsChart/AddressCount' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { @@ -66,6 +70,30 @@ export const containers: CustomRouter.Route[] = [ exact: true, comp: StatisticsChart, }, + { + name: 'DifficultyHashRateChart', + path: '/charts/difficulty_hash_rate', + exact: true, + comp: DifficultyHashRateChart, + }, + { + name: 'DifficultyUncleRateChart', + path: '/charts/difficulty_uncle_rate', + exact: true, + comp: DifficultyUncleRateChart, + }, + { + name: 'TransactionCountChart', + path: '/charts/transaction_count', + exact: true, + comp: TransactionCountChart, + }, + { + name: 'DifficultyAddressCountChart', + path: '/charts/address_count', + exact: true, + comp: AddressCountChart, + }, { name: 'SearchFail', path: '/search/fail', diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index a0f7533a2..a7fded3b1 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -4,6 +4,7 @@ import { fetchStatisticDifficultyHashRate, fetchStatisticDifficultyUncleRate, fetchStatisticTransactionCount, + fetchStatisticAddressCount, } from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' @@ -111,26 +112,24 @@ export const getStatisticsChart = (dispatch: AppDispatch) => { export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { fetchStatisticDifficultyHashRate().then( (response: Response.Response[]> | null) => { - if (response) { - const { data } = response - const difficultyHashRates = data - .map(wrapper => { - return { - blockNumber: wrapper.attributes.blockNumber, - difficulty: wrapper.attributes.difficulty, - hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toNumber(), - } - }) - .reverse() - if (difficultyHashRates.length > 0) { - dispatch({ - type: PageActions.UpdateStatisticDifficultyHashRate, - payload: { - statisticDifficultyHashRates: difficultyHashRates, - }, - }) - } - } + if (!response) return + const { data } = response + const difficultyHashRates = data + .map(wrapper => { + return { + blockNumber: wrapper.attributes.blockNumber, + difficulty: wrapper.attributes.difficulty, + hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toNumber(), + } + }) + .reverse() + if (difficultyHashRates.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticDifficultyHashRate, + payload: { + statisticDifficultyHashRates: difficultyHashRates, + }, + }) }, ) } @@ -138,26 +137,24 @@ export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { fetchStatisticDifficultyUncleRate().then( (response: Response.Response[]> | null) => { - if (response) { - const { data } = response - const difficultyUncleRates = data - .map(wrapper => { - return { - epochNumber: wrapper.attributes.epochNumber, - difficulty: wrapper.attributes.difficulty, - uncleRate: new BigNumber(wrapper.attributes.uncleRate).toNumber().toFixed(4), - } - }) - .reverse() - if (difficultyUncleRates.length > 0) { - dispatch({ - type: PageActions.UpdateStatisticDifficultyUncleRate, - payload: { - statisticDifficultyUncleRates: difficultyUncleRates, - }, - }) - } - } + if (!response) return + const { data } = response + const difficultyUncleRates = data + .map(wrapper => { + return { + epochNumber: wrapper.attributes.epochNumber, + difficulty: wrapper.attributes.difficulty, + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toNumber().toFixed(4), + } + }) + .reverse() + if (difficultyUncleRates.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticDifficultyUncleRate, + payload: { + statisticDifficultyUncleRates: difficultyUncleRates, + }, + }) }, ) } @@ -165,23 +162,43 @@ export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { export const getStatisticTransactionCount = (dispatch: AppDispatch) => { fetchStatisticTransactionCount().then( (response: Response.Response[]> | null) => { - if (response) { - const { data } = response - const transactionCounts = data.map(wrapper => { - return { - transactionsCount: wrapper.attributes.transactionsCount, - createdAtUnixtimestamp: wrapper.attributes.createdAtUnixtimestamp, - } - }) - if (transactionCounts.length > 0) { - dispatch({ - type: PageActions.UpdateStatisticTransactionCount, - payload: { - statisticTransactionCounts: transactionCounts, - }, - }) + if (!response) return + const { data } = response + const transactionCounts = data.map(wrapper => { + return { + transactionsCount: wrapper.attributes.transactionsCount, + createdAtUnixtimestamp: wrapper.attributes.createdAtUnixtimestamp, } - } + }) + if (transactionCounts.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticTransactionCount, + payload: { + statisticTransactionCounts: transactionCounts, + }, + }) + }, + ) +} + +export const getStatisticAddressCount = (dispatch: AppDispatch) => { + fetchStatisticAddressCount().then( + (response: Response.Response[]> | null) => { + if (!response) return + const { data } = response + const addressCounts = data.map(wrapper => { + return { + addressesCount: wrapper.attributes.addressesCount, + createdAtUnixtimestamp: wrapper.attributes.createdAtUnixtimestamp, + } + }) + if (addressCounts.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticAddressCount, + payload: { + statisticAddressCounts: addressCounts, + }, + }) }, ) } diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 55835a410..018b3d6d8 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -162,9 +162,9 @@ export const fetchStatisticTransactionCount = () => { ) } -export const fetchStatisticAddressesCount = () => { +export const fetchStatisticAddressCount = () => { return axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index 4a640ca39..464ae15bf 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -200,7 +200,7 @@ declare namespace State { createdAtUnixtimestamp: string } - export interface StatisticAddressesCount { + export interface StatisticAddressCount { addressesCount: string createdAtUnixtimestamp: string } @@ -298,7 +298,7 @@ declare namespace State { statisticTransactionCounts: StatisticTransactionCount[] statisticCellCounts: StatisticsCellCount[] statisticTotalDaoDeposits: StatisticTotalDaoDeposit[] - statisticAddressesCounts: StatisticAddressesCount[] + statisticAddressCounts: StatisticAddressCount[] nervosDaoState: NervosDaoState components: Components From 53b1f3fb1ffad59841d34809d6d2de3c45ddaeb8 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 17:46:57 +0800 Subject: [PATCH 07/22] feat: impl total dao deposit chart --- src/contexts/providers/reducer.ts | 12 ++ src/locales/en.json | 1 + src/locales/zh.json | 1 + src/pages/StatisticsChart/TotalDaoDeposit.tsx | 115 ++++++++++++++++++ src/routes/index.tsx | 9 +- src/service/app/statisticsChart.ts | 25 +++- src/utils/chart.ts | 20 +-- tests/chart.test.ts | 2 + 8 files changed, 173 insertions(+), 12 deletions(-) create mode 100644 src/pages/StatisticsChart/TotalDaoDeposit.tsx diff --git a/src/contexts/providers/reducer.ts b/src/contexts/providers/reducer.ts index 402141496..9ad931608 100644 --- a/src/contexts/providers/reducer.ts +++ b/src/contexts/providers/reducer.ts @@ -39,6 +39,8 @@ export enum PageActions { UpdateStatisticDifficultyUncleRate = 'updateStatisticDifficultyUncleRate', UpdateStatisticTransactionCount = 'updateStatisticTransactionCount', UpdateStatisticAddressCount = 'updateStatisticAddressCount', + UpdateStatisticTotalDaoDeposit = 'updateStatisticTotalDaoDeposit', + UpdateStatisticCellCount = 'updateStatisticCellCount', UpdateNervosDao = 'updateNervosDao', UpdateNervosDaoTransactions = 'updateNervosDaoTransactions', @@ -294,6 +296,16 @@ export const reducer = ( ...state, statisticAddressCounts: payload.statisticAddressCounts, } + case PageActions.UpdateStatisticTotalDaoDeposit: + return { + ...state, + statisticTotalDaoDeposits: payload.statisticTotalDaoDeposits, + } + case PageActions.UpdateStatisticCellCount: + return { + ...state, + statisticCellCounts: payload.statisticCellCounts, + } case PageActions.UpdateNervosDao: return { diff --git a/src/locales/en.json b/src/locales/en.json index cec2704a3..66b25038e 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -40,6 +40,7 @@ "statistic": { "transaction_count": "Transaction Count", "address_count": "Address Count", + "total_dao_deposit": "Total Nervos DAO Deposit", "date": "Date" }, "home": { diff --git a/src/locales/zh.json b/src/locales/zh.json index de1f269d9..4103a3711 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -40,6 +40,7 @@ "statistic": { "transaction_count": "交易数量", "address_count": "地址数量", + "total_dao_deposit": "Nervos DAO 锁定总额", "date": "时间" }, "home": { diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx new file mode 100644 index 000000000..797278ed8 --- /dev/null +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -0,0 +1,115 @@ +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 { getStatisticTotalDaoDeposit } 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 } from './styled' +import { parseDateNoTime } from '../../utils/date' + +const colors = ['#3182bd'] + +const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) => { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('statistic.date'))} ${parseDateNoTime( + dataList[0].name, + )}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.total_dao_deposit'))} ${handleAxis( + dataList[0].data, + 2, + )}
` + return result + }, + }, + legend: { + data: [i18n.t('statistic.total_dao_deposit')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticTotalDaoDeposits.map(data => data.createdAtUnixtimestamp), + axisLabel: { + formatter: (value: string) => parseDateNoTime(value), + }, + }, + ], + yAxis: [ + { + position: 'left', + name: i18n.t('statistic.total_dao_deposit'), + type: 'value', + scale: true, + axisLine: { + lineStyle: { + color: colors[0], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(value), + }, + }, + ], + series: [ + { + name: i18n.t('statistic.total_dao_deposit'), + type: 'line', + yAxisIndex: '0', + symbol: 'none', + data: statisticTotalDaoDeposits.map(data => new BigNumber(data.totalDaoDeposit).toFixed(0)), + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticTotalDaoDeposits } = useContext(AppContext) + + useEffect(() => { + getStatisticTotalDaoDeposit(dispatch) + }, [dispatch]) + + return ( + + {i18n.t('statistic.total_dao_deposit')} + {statisticTotalDaoDeposits.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 3f44818fc..27da3ea17 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -21,6 +21,7 @@ import DifficultyHashRateChart from '../pages/StatisticsChart/DifficultyHashRate import DifficultyUncleRateChart from '../pages/StatisticsChart/DifficultyUncleRate' import TransactionCountChart from '../pages/StatisticsChart/TransactionCount' import AddressCountChart from '../pages/StatisticsChart/AddressCount' +import TotalDaoDepositChart from '../pages/StatisticsChart/TotalDaoDeposit' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { @@ -89,11 +90,17 @@ export const containers: CustomRouter.Route[] = [ comp: TransactionCountChart, }, { - name: 'DifficultyAddressCountChart', + name: 'AddressCountChart', path: '/charts/address_count', exact: true, comp: AddressCountChart, }, + { + name: 'TotalDaoDepositChart', + path: '/charts/total_dao_deposit', + exact: true, + comp: TotalDaoDepositChart, + }, { name: 'SearchFail', path: '/search/fail', diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index a7fded3b1..2ff911cc5 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -5,6 +5,7 @@ import { fetchStatisticDifficultyUncleRate, fetchStatisticTransactionCount, fetchStatisticAddressCount, + fetchStatisticTotalDaoDeposit, } from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' @@ -144,7 +145,7 @@ export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { return { epochNumber: wrapper.attributes.epochNumber, difficulty: wrapper.attributes.difficulty, - uncleRate: new BigNumber(wrapper.attributes.uncleRate).toNumber().toFixed(4), + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), } }) .reverse() @@ -203,4 +204,26 @@ export const getStatisticAddressCount = (dispatch: AppDispatch) => { ) } +export const getStatisticTotalDaoDeposit = (dispatch: AppDispatch) => { + fetchStatisticTotalDaoDeposit().then( + (response: Response.Response[]> | null) => { + if (!response) return + const { data } = response + const totalDaoDeposits = data.map(wrapper => { + return { + totalDaoDeposit: wrapper.attributes.totalDaoDeposit, + createdAtUnixtimestamp: wrapper.attributes.createdAtUnixtimestamp, + } + }) + if (totalDaoDeposits.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticTotalDaoDeposit, + payload: { + statisticTotalDaoDeposits: totalDaoDeposits, + }, + }) + }, + ) +} + export default getStatisticsChart diff --git a/src/utils/chart.ts b/src/utils/chart.ts index 3d53091d6..d671e2073 100644 --- a/src/utils/chart.ts +++ b/src/utils/chart.ts @@ -1,7 +1,7 @@ import BigNumber from 'bignumber.js' import { isMobile } from './screen' -export const handleAxis = (value: BigNumber | string | number) => { +export const handleAxis = (value: BigNumber | string | number, decimal?: number) => { const bigValue = typeof value === 'string' || typeof value === 'number' ? new BigNumber(value) : value if (bigValue.isNaN() || bigValue.isZero()) return '0' const kv = bigValue.dividedBy(1000) @@ -14,30 +14,30 @@ export const handleAxis = (value: BigNumber | string | number) => { const yv = zv.dividedBy(1000) if (yv.isGreaterThanOrEqualTo(1)) { - return `${yv.toFixed()}Y` + return `${decimal ? yv.toFixed(decimal) : yv.toFixed()}Y` } if (zv.isGreaterThanOrEqualTo(1)) { - return `${zv.toFixed()}Z` + return `${decimal ? zv.toFixed(decimal) : zv.toFixed()}Z` } if (ev.isGreaterThanOrEqualTo(1)) { - return `${ev.toFixed()}E` + return `${decimal ? ev.toFixed(decimal) : ev.toFixed()}E` } if (pv.isGreaterThanOrEqualTo(1)) { - return `${pv.toFixed()}P` + return `${decimal ? pv.toFixed(decimal) : pv.toFixed()}P` } if (tv.isGreaterThanOrEqualTo(1)) { - return `${tv.toFixed()}T` + return `${decimal ? tv.toFixed(decimal) : tv.toFixed()}T` } if (gv.isGreaterThanOrEqualTo(1)) { - return `${gv.toFixed()}G` + return `${decimal ? gv.toFixed(decimal) : gv.toFixed()}G` } if (mv.isGreaterThanOrEqualTo(1)) { - return `${mv.toFixed()}M` + return `${decimal ? mv.toFixed(decimal) : mv.toFixed()}M` } if (kv.isGreaterThanOrEqualTo(1)) { - return `${kv.toFixed()}K` + return `${decimal ? kv.toFixed(decimal) : kv.toFixed()}K` } - return `${bigValue.toFixed()}` + return `${decimal ? bigValue.toFixed(decimal) : bigValue.toFixed()}` } export const parseInterval = (max: number, min: number) => { diff --git a/tests/chart.test.ts b/tests/chart.test.ts index c0a3df788..18c4b9cee 100644 --- a/tests/chart.test.ts +++ b/tests/chart.test.ts @@ -5,6 +5,8 @@ describe('Chart tests', () => { it('handleAxis', async () => { expect(handleAxis(new BigNumber(102300))).toBe('102.3K') expect(handleAxis(new BigNumber(12233435))).toBe('12.233435M') + expect(handleAxis(new BigNumber(102300), 2)).toBe('102.30K') + expect(handleAxis(new BigNumber(12233435), 3)).toBe('12.233M') }) it('parseInterval', async () => { From 8d291b4af25002588e821226eb8ad842866b917c Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 18:29:12 +0800 Subject: [PATCH 08/22] feat: impl cell count chart --- src/locales/en.json | 2 + src/locales/zh.json | 2 + src/pages/StatisticsChart/CellCount.tsx | 130 ++++++++++++++++++ .../StatisticsChart/DifficultyHashRate.tsx | 1 + .../StatisticsChart/DifficultyUncleRate.tsx | 1 + src/routes/index.tsx | 7 + src/service/app/statisticsChart.ts | 24 ++++ src/service/http/fetcher.ts | 2 +- src/types/App/index.d.ts | 6 +- 9 files changed, 171 insertions(+), 4 deletions(-) create mode 100644 src/pages/StatisticsChart/CellCount.tsx diff --git a/src/locales/en.json b/src/locales/en.json index 66b25038e..c1e30510d 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -41,6 +41,8 @@ "transaction_count": "Transaction Count", "address_count": "Address Count", "total_dao_deposit": "Total Nervos DAO Deposit", + "live_cell": "Live Cell", + "dead_cell": "Dead Cell", "date": "Date" }, "home": { diff --git a/src/locales/zh.json b/src/locales/zh.json index 4103a3711..61a150a1a 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -41,6 +41,8 @@ "transaction_count": "交易数量", "address_count": "地址数量", "total_dao_deposit": "Nervos DAO 锁定总额", + "live_cell": "未花费 Cell", + "dead_cell": "已花费 Cell", "date": "时间" }, "home": { diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx new file mode 100644 index 000000000..7d30776cf --- /dev/null +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -0,0 +1,130 @@ +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/legend' +import 'echarts/lib/component/title' +import BigNumber from 'bignumber.js' +import Content from '../../components/Content' +import { getStatisticCellCount } 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 } from './styled' + +const colors = ['#3182bd', '#66CC99'] + +const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { + return { + color: colors, + tooltip: { + trigger: 'axis', + formatter: (dataList: any[]) => { + const colorSpan = (color: string) => + `` + const widthSpan = (value: string) => `${value}:` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${dataList[0].name}
` + result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.live_cell'))} ${handleAxis( + dataList[0].data, + 2, + )}
` + result += `
${colorSpan(colors[1])}${widthSpan(i18n.t('statistic.dead_cell'))} ${handleAxis( + dataList[1].data, + 2, + )}
` + return result + }, + }, + legend: { + data: [i18n.t('statistic.live_cell'), i18n.t('statistic.dead_cell')], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: statisticCellCounts.map(data => data.blockNumber), + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + yAxis: [ + { + type: 'value', + scale: false, + axisLine: { + lineStyle: { + color: colors[0], + }, + }, + axisLabel: { + formatter: (value: string) => handleAxis(new BigNumber(value)), + }, + }, + ], + series: [ + { + name: i18n.t('statistic.live_cell'), + type: 'line', + areaStyle: { + normal: { + origin: 'auto', + }, + }, + symbol: 'none', + data: statisticCellCounts.map(data => new BigNumber(data.liveCellCount).toNumber()), + }, + { + name: i18n.t('statistic.dead_cell'), + type: 'line', + areaStyle: { + normal: { + origin: 'auto', + }, + }, + symbol: 'none', + data: statisticCellCounts.map(data => new BigNumber(data.deadCellCount).toNumber()), + }, + ], + } +} + +export default ({ dispatch }: React.PropsWithoutRef) => { + const { statisticCellCounts } = useContext(AppContext) + + useEffect(() => { + getStatisticCellCount(dispatch) + }, [dispatch]) + + return ( + + {`${i18n.t('statistic.live_cell')} & ${i18n.t('statistic.dead_cell')}`} + {statisticCellCounts.length > 0 ? ( + + + + ) : ( + + + + )} + + ) +} diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index 140bdc348..ad3a79671 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -3,6 +3,7 @@ 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/legend' import 'echarts/lib/component/title' import BigNumber from 'bignumber.js' import Content from '../../components/Content' diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index 140478e88..db1c73725 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -3,6 +3,7 @@ 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/legend' import 'echarts/lib/component/title' import 'echarts/lib/component/markLine' import BigNumber from 'bignumber.js' diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 27da3ea17..bd4a3155d 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -22,6 +22,7 @@ import DifficultyUncleRateChart from '../pages/StatisticsChart/DifficultyUncleRa import TransactionCountChart from '../pages/StatisticsChart/TransactionCount' import AddressCountChart from '../pages/StatisticsChart/AddressCount' import TotalDaoDepositChart from '../pages/StatisticsChart/TotalDaoDeposit' +import CellCountChart from '../pages/StatisticsChart/CellCount' import { AppDispatch } from '../contexts/providers/reducer' const hasSearch = (pathname: string) => { @@ -101,6 +102,12 @@ export const containers: CustomRouter.Route[] = [ exact: true, comp: TotalDaoDepositChart, }, + { + name: 'CellCountChart', + path: '/charts/cell_count', + exact: true, + comp: CellCountChart, + }, { name: 'SearchFail', path: '/search/fail', diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index 2ff911cc5..f3ee901e6 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -6,6 +6,7 @@ import { fetchStatisticTransactionCount, fetchStatisticAddressCount, fetchStatisticTotalDaoDeposit, + fetchStatisticCellCount, } from '../http/fetcher' import { AppDispatch, PageActions } from '../../contexts/providers/reducer' @@ -226,4 +227,27 @@ export const getStatisticTotalDaoDeposit = (dispatch: AppDispatch) => { ) } +export const getStatisticCellCount = (dispatch: AppDispatch) => { + fetchStatisticCellCount().then((response: Response.Response[]> | null) => { + if (!response) return + const { data } = response + const cellCounts = data + .map(wrapper => { + return { + liveCellCount: wrapper.attributes.liveCellCount, + deadCellCount: wrapper.attributes.deadCellCount, + blockNumber: wrapper.attributes.blockNumber, + } + }) + .reverse() + if (cellCounts.length === 0) return + dispatch({ + type: PageActions.UpdateStatisticCellCount, + payload: { + statisticCellCounts: cellCounts, + }, + }) + }) +} + export default getStatisticsChart diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 018b3d6d8..585de40af 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -182,7 +182,7 @@ export const fetchStatisticDifficultyHashRate = () => { export const fetchStatisticCellCount = () => { return axiosIns(`/block_statistics/live_cell_count-dead_cell_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), + toCamelcase[]>>(res.data), ) } diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index 464ae15bf..a0502395e 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -216,9 +216,9 @@ declare namespace State { blockNumber: string } - export interface StatisticsCellCount { + export interface StatisticCellCount { liveCellCount: string - dead_cell_count: string + deadCellCount: string blockNumber: string } @@ -296,7 +296,7 @@ declare namespace State { statisticDifficultyHashRates: StatisticsDifficultyHashRate[] statisticDifficultyUncleRates: StatisticsDifficultyUncleRate[] statisticTransactionCounts: StatisticTransactionCount[] - statisticCellCounts: StatisticsCellCount[] + statisticCellCounts: StatisticCellCount[] statisticTotalDaoDeposits: StatisticTotalDaoDeposit[] statisticAddressCounts: StatisticAddressCount[] nervosDaoState: NervosDaoState From 677541c5173e8fcc7c723b8655b6b787f9a9e45b Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 18:31:25 +0800 Subject: [PATCH 09/22] chore: handle block number and epoch nunber for axis --- src/pages/StatisticsChart/CellCount.tsx | 5 ++++- src/pages/StatisticsChart/DifficultyHashRate.tsx | 5 ++++- src/pages/StatisticsChart/DifficultyUncleRate.tsx | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index 7d30776cf..2476c402f 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -26,7 +26,10 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { const colorSpan = (color: string) => `` const widthSpan = (value: string) => `${value}:` - let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${dataList[0].name}
` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${handleAxis( + dataList[0].name, + 1, + )}
` result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('statistic.live_cell'))} ${handleAxis( dataList[0].data, 2, diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index ad3a79671..3679d2200 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -27,7 +27,10 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { const colorSpan = (color: string) => `` const widthSpan = (value: string) => `${value}:` - let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${dataList[0].name}
` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.block_number'))} ${handleAxis( + dataList[0].name, + 1, + )}
` result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('block.difficulty'))} ${handleDifficulty( dataList[0].data, )}
` diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index db1c73725..1410b7653 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -28,7 +28,10 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => const colorSpan = (color: string) => `` const widthSpan = (value: string) => `${value}:` - let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.epoch_number'))} ${dataList[0].name}
` + let result = `
${colorSpan('#333333')}${widthSpan(i18n.t('block.epoch_number'))} ${handleAxis( + dataList[0].name, + 1, + )}
` result += `
${colorSpan(colors[0])}${widthSpan(i18n.t('block.difficulty'))} ${handleDifficulty( dataList[0].data, )}
` From 11a60fba6e0a5f165cabf3018d59ad3fe33df0a4 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Thu, 5 Dec 2019 21:47:52 +0800 Subject: [PATCH 10/22] chore: adapt chart for mobile --- src/pages/StatisticsChart/AddressCount.tsx | 6 ++---- src/pages/StatisticsChart/CellCount.tsx | 6 ++++-- src/pages/StatisticsChart/DifficultyHashRate.tsx | 13 ++++++++----- src/pages/StatisticsChart/DifficultyUncleRate.tsx | 13 ++++++++----- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 11 +++++------ src/pages/StatisticsChart/TransactionCount.tsx | 11 +++++------ 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx index a4e4ae8d7..510fe38a9 100644 --- a/src/pages/StatisticsChart/AddressCount.tsx +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -35,9 +35,6 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { return result }, }, - legend: { - data: [i18n.t('statistic.address_count')], - }, grid: { left: '3%', right: '4%', @@ -75,7 +72,8 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { name: i18n.t('statistic.address_count'), type: 'line', yAxisIndex: '0', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticAddressCounts.map(data => new BigNumber(data.addressesCount).toNumber()), }, ], diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index 2476c402f..f55a6b65c 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -83,7 +83,8 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { origin: 'auto', }, }, - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticCellCounts.map(data => new BigNumber(data.liveCellCount).toNumber()), }, { @@ -94,7 +95,8 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { origin: 'auto', }, }, - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticCellCounts.map(data => new BigNumber(data.deadCellCount).toNumber()), }, ], diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index 3679d2200..aa32a2e0b 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -15,6 +15,7 @@ import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' import { handleDifficulty, handleHashRate } from '../../utils/number' import { ChartTitle, ChartPanel, LoadingPanel } from './styled' +import { isMobile } from '../../utils/screen' const colors = ['#3182bd', '#66CC99'] @@ -44,7 +45,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { data: [i18n.t('block.difficulty'), i18n.t('block.hash_rate_hps')], }, grid: { - left: '3%', + left: '4%', right: '4%', bottom: '3%', containLabel: true, @@ -62,7 +63,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { yAxis: [ { position: 'left', - name: i18n.t('block.difficulty'), + name: isMobile() ? '' : i18n.t('block.difficulty'), type: 'value', scale: true, axisLine: { @@ -76,7 +77,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { }, { position: 'right', - name: i18n.t('block.hash_rate_hps'), + name: isMobile() ? '' : i18n.t('block.hash_rate_hps'), type: 'value', scale: true, axisLine: { @@ -94,14 +95,16 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { name: i18n.t('block.difficulty'), type: 'line', yAxisIndex: '0', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.hash_rate_hps'), type: 'line', yAxisIndex: '1', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticChartData.map(data => new BigNumber(data.hashRate).toNumber()), }, ], diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index 1410b7653..75c8eff7e 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -16,6 +16,7 @@ import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' import { handleDifficulty } from '../../utils/number' import { ChartTitle, ChartPanel, LoadingPanel } from './styled' +import { isMobile } from '../../utils/screen' const colors = ['#3182bd', '#66CC99'] @@ -43,7 +44,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => data: [i18n.t('block.difficulty'), i18n.t('block.uncle_rate')], }, grid: { - left: '3%', + left: '4%', right: '4%', bottom: '3%', containLabel: true, @@ -61,7 +62,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => yAxis: [ { position: 'left', - name: i18n.t('block.difficulty'), + name: isMobile() ? '' : i18n.t('block.difficulty'), type: 'value', scale: true, axisLine: { @@ -75,7 +76,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => }, { position: 'right', - name: i18n.t('block.uncle_rate'), + name: isMobile() ? '' : i18n.t('block.uncle_rate'), type: 'value', scale: true, axisLine: { @@ -93,14 +94,16 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => name: i18n.t('block.difficulty'), type: 'line', yAxisIndex: '0', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.uncle_rate'), type: 'line', yAxisIndex: '1', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticChartData.map(data => (Number(data.uncleRate) * 100).toFixed(2)), markLine: { data: [ diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx index 797278ed8..6bf64cf2f 100644 --- a/src/pages/StatisticsChart/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -14,6 +14,7 @@ import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' import { ChartTitle, ChartPanel, LoadingPanel } from './styled' import { parseDateNoTime } from '../../utils/date' +import { isMobile } from '../../utils/screen' const colors = ['#3182bd'] @@ -36,11 +37,8 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) return result }, }, - legend: { - data: [i18n.t('statistic.total_dao_deposit')], - }, grid: { - left: '3%', + left: '6%', right: '4%', bottom: '3%', containLabel: true, @@ -58,7 +56,7 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) yAxis: [ { position: 'left', - name: i18n.t('statistic.total_dao_deposit'), + name: isMobile() ? '' : i18n.t('statistic.total_dao_deposit'), type: 'value', scale: true, axisLine: { @@ -76,7 +74,8 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) name: i18n.t('statistic.total_dao_deposit'), type: 'line', yAxisIndex: '0', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticTotalDaoDeposits.map(data => new BigNumber(data.totalDaoDeposit).toFixed(0)), }, ], diff --git a/src/pages/StatisticsChart/TransactionCount.tsx b/src/pages/StatisticsChart/TransactionCount.tsx index 340a94ace..aac049734 100644 --- a/src/pages/StatisticsChart/TransactionCount.tsx +++ b/src/pages/StatisticsChart/TransactionCount.tsx @@ -14,6 +14,7 @@ import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' import { ChartTitle, ChartPanel, LoadingPanel } from './styled' import { parseDateNoTime } from '../../utils/date' +import { isMobile } from '../../utils/screen' const colors = ['#3182bd'] @@ -35,11 +36,8 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] return result }, }, - legend: { - data: [i18n.t('statistic.transaction_count')], - }, grid: { - left: '3%', + left: '4%', right: '4%', bottom: '3%', containLabel: true, @@ -57,7 +55,7 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] yAxis: [ { position: 'left', - name: i18n.t('statistic.transaction_count'), + name: isMobile() ? '' : i18n.t('statistic.transaction_count'), type: 'value', scale: true, axisLine: { @@ -75,7 +73,8 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] name: i18n.t('statistic.transaction_count'), type: 'line', yAxisIndex: '0', - symbol: 'none', + symbol: 'circle', + symbolSize: 3, data: statisticTransactionCounts.map(data => new BigNumber(data.transactionsCount).toNumber()), }, ], From a04266e0727e8118b44e2f68de9724a449058c1f Mon Sep 17 00:00:00 2001 From: duanyytop Date: Fri, 6 Dec 2019 12:03:50 +0800 Subject: [PATCH 11/22] feat: impl charts with cards --- src/pages/StatisticsChart/AddressCount.tsx | 60 ++-- src/pages/StatisticsChart/CellCount.tsx | 59 ++-- .../StatisticsChart/DifficultyHashRate.tsx | 71 ++-- .../StatisticsChart/DifficultyUncleRate.tsx | 63 ++-- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 59 ++-- .../StatisticsChart/TransactionCount.tsx | 59 ++-- src/pages/StatisticsChart/index.tsx | 315 +++++------------- src/pages/StatisticsChart/styled.tsx | 31 ++ 8 files changed, 362 insertions(+), 355 deletions(-) diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx index 510fe38a9..58e938dfa 100644 --- a/src/pages/StatisticsChart/AddressCount.tsx +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -14,13 +14,28 @@ import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' import { ChartTitle, ChartPanel, LoadingPanel } from './styled' import { parseDateNoTime } from '../../utils/date' +import { isMobile } from '../../utils/screen' const colors = ['#3182bd'] -const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { +const gridThumbnail = { + left: '4%', + right: '10%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticAddressCounts: State.StatisticAddressCount[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -35,12 +50,7 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { return result }, }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', @@ -54,7 +64,7 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { yAxis: [ { position: 'left', - name: i18n.t('statistic.address_count'), + name: isMobile() || isThumbnail ? '' : i18n.t('statistic.address_count'), type: 'value', scale: true, axisLine: { @@ -72,7 +82,7 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { name: i18n.t('statistic.address_count'), type: 'line', yAxisIndex: '0', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, data: statisticAddressCounts.map(data => new BigNumber(data.addressesCount).toNumber()), }, @@ -80,6 +90,26 @@ const getOption = (statisticAddressCounts: State.StatisticAddressCount[]) => { } } +export const AddressCountChart = ({ + statisticAddressCounts, + isThumbnail = false, +}: { + statisticAddressCounts: State.StatisticAddressCount[] + isThumbnail?: boolean +}) => { + return ( + + ) +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticAddressCounts } = useContext(AppContext) @@ -92,15 +122,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {i18n.t('statistic.address_count')} {statisticAddressCounts.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index f55a6b65c..18d8e0b7d 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -17,10 +17,24 @@ import { ChartTitle, ChartPanel, LoadingPanel } from './styled' const colors = ['#3182bd', '#66CC99'] -const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { +const gridThumbnail = { + left: '4%', + right: '4%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -41,15 +55,10 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { return result }, }, - legend: { + legend: !isThumbnail && { data: [i18n.t('statistic.live_cell'), i18n.t('statistic.dead_cell')], }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', @@ -83,7 +92,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { origin: 'auto', }, }, - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, data: statisticCellCounts.map(data => new BigNumber(data.liveCellCount).toNumber()), }, @@ -103,6 +112,26 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[]) => { } } +export const CellCountChart = ({ + statisticCellCounts, + isThumbnail = false, +}: { + statisticCellCounts: State.StatisticCellCount[] + isThumbnail?: boolean +}) => { + return ( + + ) +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticCellCounts } = useContext(AppContext) @@ -115,15 +144,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {`${i18n.t('statistic.live_cell')} & ${i18n.t('statistic.dead_cell')}`} {statisticCellCounts.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index aa32a2e0b..c3a4a89d4 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -19,10 +19,24 @@ import { isMobile } from '../../utils/screen' const colors = ['#3182bd', '#66CC99'] -const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { +const gridThumbnail = { + left: '4%', + right: '4%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticDifficultyHashRates: State.StatisticDifficultyHashRate[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -41,20 +55,15 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { return result }, }, - legend: { + legend: !isThumbnail && { data: [i18n.t('block.difficulty'), i18n.t('block.hash_rate_hps')], }, - grid: { - left: '4%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', boundaryGap: false, - data: statisticChartData.map(data => data.blockNumber), + data: statisticDifficultyHashRates.map(data => data.blockNumber), axisLabel: { formatter: (value: string) => handleAxis(new BigNumber(value)), }, @@ -63,7 +72,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { yAxis: [ { position: 'left', - name: isMobile() ? '' : i18n.t('block.difficulty'), + name: isMobile() || isThumbnail ? '' : i18n.t('block.difficulty'), type: 'value', scale: true, axisLine: { @@ -77,7 +86,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { }, { position: 'right', - name: isMobile() ? '' : i18n.t('block.hash_rate_hps'), + name: isMobile() || isThumbnail ? '' : i18n.t('block.hash_rate_hps'), type: 'value', scale: true, axisLine: { @@ -95,22 +104,42 @@ const getOption = (statisticChartData: State.StatisticDifficultyHashRate[]) => { name: i18n.t('block.difficulty'), type: 'line', yAxisIndex: '0', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, - data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), + data: statisticDifficultyHashRates.map(data => new BigNumber(data.difficulty).toNumber()), }, { name: i18n.t('block.hash_rate_hps'), type: 'line', yAxisIndex: '1', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, - data: statisticChartData.map(data => new BigNumber(data.hashRate).toNumber()), + data: statisticDifficultyHashRates.map(data => new BigNumber(data.hashRate).toNumber()), }, ], } } +export const DifficultyHashRateChart = ({ + statisticDifficultyHashRates, + isThumbnail = false, +}: { + statisticDifficultyHashRates: State.StatisticDifficultyHashRate[] + isThumbnail?: boolean +}) => { + return ( + + ) +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticDifficultyHashRates } = useContext(AppContext) @@ -123,15 +152,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {`${i18n.t('block.difficulty')} & ${i18n.t('block.hash_rate')}`} {statisticDifficultyHashRates.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index 75c8eff7e..7edf58d94 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -20,10 +20,24 @@ import { isMobile } from '../../utils/screen' const colors = ['#3182bd', '#66CC99'] -const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => { +const gridThumbnail = { + left: '4%', + right: '4%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -40,15 +54,10 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => return result }, }, - legend: { + legend: !isThumbnail && { data: [i18n.t('block.difficulty'), i18n.t('block.uncle_rate')], }, - grid: { - left: '4%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', @@ -62,7 +71,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => yAxis: [ { position: 'left', - name: isMobile() ? '' : i18n.t('block.difficulty'), + name: isMobile() || isThumbnail ? '' : i18n.t('block.difficulty'), type: 'value', scale: true, axisLine: { @@ -76,7 +85,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => }, { position: 'right', - name: isMobile() ? '' : i18n.t('block.uncle_rate'), + name: isMobile() || isThumbnail ? '' : i18n.t('block.uncle_rate'), type: 'value', scale: true, axisLine: { @@ -94,7 +103,7 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => name: i18n.t('block.difficulty'), type: 'line', yAxisIndex: '0', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, data: statisticChartData.map(data => new BigNumber(data.difficulty).toNumber()), }, @@ -118,6 +127,26 @@ const getOption = (statisticChartData: State.StatisticDifficultyUncleRate[]) => } } +export const DifficultyUncleRateChart = ({ + statisticDifficultyUncleRates, + isThumbnail = false, +}: { + statisticDifficultyUncleRates: State.StatisticDifficultyUncleRate[] + isThumbnail?: boolean +}) => { + return ( + + ) +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticDifficultyUncleRates } = useContext(AppContext) @@ -130,15 +159,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {`${i18n.t('block.difficulty')} & ${i18n.t('block.uncle_rate')}`} {statisticDifficultyUncleRates.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx index 6bf64cf2f..dea3a4ba4 100644 --- a/src/pages/StatisticsChart/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -18,10 +18,24 @@ import { isMobile } from '../../utils/screen' const colors = ['#3182bd'] -const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) => { +const gridThumbnail = { + left: '4%', + right: '10%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -37,12 +51,7 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) return result }, }, - grid: { - left: '6%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', @@ -56,7 +65,7 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) yAxis: [ { position: 'left', - name: isMobile() ? '' : i18n.t('statistic.total_dao_deposit'), + name: isMobile() || isThumbnail ? '' : i18n.t('statistic.total_dao_deposit'), type: 'value', scale: true, axisLine: { @@ -74,7 +83,7 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) name: i18n.t('statistic.total_dao_deposit'), type: 'line', yAxisIndex: '0', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, data: statisticTotalDaoDeposits.map(data => new BigNumber(data.totalDaoDeposit).toFixed(0)), }, @@ -82,6 +91,26 @@ const getOption = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) } } +export const TotalDaoDepositChart = ({ + statisticTotalDaoDeposits, + isThumbnail = false, +}: { + statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[] + isThumbnail?: boolean +}) => { + return statisticTotalDaoDeposits.length > 0 ? ( + + ) : null +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticTotalDaoDeposits } = useContext(AppContext) @@ -94,15 +123,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {i18n.t('statistic.total_dao_deposit')} {statisticTotalDaoDeposits.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/TransactionCount.tsx b/src/pages/StatisticsChart/TransactionCount.tsx index aac049734..dad1a756e 100644 --- a/src/pages/StatisticsChart/TransactionCount.tsx +++ b/src/pages/StatisticsChart/TransactionCount.tsx @@ -18,10 +18,24 @@ import { isMobile } from '../../utils/screen' const colors = ['#3182bd'] -const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[]) => { +const gridThumbnail = { + left: '4%', + right: '10%', + top: '8%', + bottom: '12%', + containLabel: true, +} +const grid = { + left: '4%', + right: '4%', + bottom: '3%', + containLabel: true, +} + +const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[], isThumbnail = false) => { return { color: colors, - tooltip: { + tooltip: !isThumbnail && { trigger: 'axis', formatter: (dataList: any[]) => { const colorSpan = (color: string) => @@ -36,12 +50,7 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] return result }, }, - grid: { - left: '4%', - right: '4%', - bottom: '3%', - containLabel: true, - }, + grid: isThumbnail ? gridThumbnail : grid, xAxis: [ { type: 'category', @@ -55,7 +64,7 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] yAxis: [ { position: 'left', - name: isMobile() ? '' : i18n.t('statistic.transaction_count'), + name: isMobile() || isThumbnail ? '' : i18n.t('statistic.transaction_count'), type: 'value', scale: true, axisLine: { @@ -73,7 +82,7 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] name: i18n.t('statistic.transaction_count'), type: 'line', yAxisIndex: '0', - symbol: 'circle', + symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, data: statisticTransactionCounts.map(data => new BigNumber(data.transactionsCount).toNumber()), }, @@ -81,6 +90,26 @@ const getOption = (statisticTransactionCounts: State.StatisticTransactionCount[] } } +export const TransactionCountChart = ({ + statisticTransactionCounts, + isThumbnail = false, +}: { + statisticTransactionCounts: State.StatisticTransactionCount[] + isThumbnail?: boolean +}) => { + return ( + + ) +} + export default ({ dispatch }: React.PropsWithoutRef) => { const { statisticTransactionCounts } = useContext(AppContext) @@ -93,15 +122,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {i18n.t('statistic.transaction_count')} {statisticTransactionCounts.length > 0 ? ( - + ) : ( diff --git a/src/pages/StatisticsChart/index.tsx b/src/pages/StatisticsChart/index.tsx index 2c3ad91e0..d03f056c7 100644 --- a/src/pages/StatisticsChart/index.tsx +++ b/src/pages/StatisticsChart/index.tsx @@ -1,252 +1,101 @@ -import React, { useEffect, useContext } from 'react' -import styled from 'styled-components' -import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts' -import BigNumber from 'bignumber.js' +import React, { useEffect, useContext, ReactNode } from 'react' +import { Link } from 'react-router-dom' import Content from '../../components/Content' -import { isMobile } from '../../utils/screen' -import getStatisticsChart from '../../service/app/statisticsChart' +import { + getStatisticDifficultyHashRate, + getStatisticDifficultyUncleRate, + getStatisticAddressCount, + getStatisticCellCount, + getStatisticTransactionCount, + getStatisticTotalDaoDeposit, +} 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 { parseInterval, handleAxis } from '../../utils/chart' +import { DifficultyHashRateChart } from './DifficultyHashRate' +import { DifficultyUncleRateChart } from './DifficultyUncleRate' +import { TransactionCountChart } from './TransactionCount' +import { AddressCountChart } from './AddressCount' +import { CellCountChart } from './CellCount' +import { TotalDaoDepositChart } from './TotalDaoDeposit' +import { ChartsPanel, ChartCardPanel } from './styled' -const ChartPanel = styled.div` - margin: 0 10% 30px 10%; - background: white; - - @media (max-width: 700px) { - margin: 0 4% 30px 4%; - } -` - -const ChartTitle = styled.div` - color: #66666; - background: white; - margin: 30px 10% 0 10%; - padding-top: 10px; - font-size: 24px; - text-align: center; - - @media (max-width: 700px) { - margin: 20px 4% 0 4%; - font-size: 16px; - } -` - -const LoadingPanel = styled.div` - display: flex; - width: 100%; - height: 70vh; - align-items: center; - justify-content: center; - - > img { - width: 120px; - height: 120px; - display: flex; - align-items: center; - justify-content: center; - - @media (max-width: 700px) { - width: 50px; - height: 50px; - } - } -` +interface ChartData { + title: string + chart: ReactNode + path: string +} -const uncleRateScale = () => { - return { - uncleRate: { - min: 0, - alias: i18n.t('block.uncle_rate'), - }, - } +const ChartCard = ({ chartData }: { chartData: ChartData }) => { + return ( + + +
{chartData.title}
+
{chartData.chart}
+ + + ) } export default ({ dispatch }: React.PropsWithoutRef) => { - const { statisticsChartData, statisticsUncleRates } = useContext(AppContext) - - let min = 0 - let max = 0 - if (statisticsChartData && statisticsChartData.length > 0) { - min = statisticsChartData[0].blockNumber - max = statisticsChartData[statisticsChartData.length - 1].blockNumber - } + const { + statisticDifficultyHashRates, + statisticDifficultyUncleRates, + statisticAddressCounts, + statisticTotalDaoDeposits, + statisticCellCounts, + statisticTransactionCounts, + } = useContext(AppContext) - const scale = () => { - return { - difficulty: { - min: 0, - alias: i18n.t('block.difficulty'), - }, - hashRate: { - min: 0, - alias: i18n.t('block.hash_rate_hps'), - }, - epochNumber: { - min: 0, - alias: i18n.t('block.epoch_number'), - }, - blockNumber: { - min, - max, - alias: i18n.t('block.block_number'), - tickInterval: parseInterval(max, min), - }, - } - } + const charts: ChartData[] = [ + { + title: `${i18n.t('block.difficulty')} & ${i18n.t('block.hash_rate')}`, + chart: , + path: '/charts/difficulty_hash_rate', + }, + { + title: `${i18n.t('block.difficulty')} & ${i18n.t('block.uncle_rate')}`, + chart: , + path: '/charts/difficulty_uncle_rate', + }, + { + title: `${i18n.t('statistic.transaction_count')}`, + chart: , + path: '/charts/transaction_count', + }, + { + title: `${i18n.t('statistic.address_count')}`, + chart: , + path: '/charts/address_count', + }, + { + title: `${i18n.t('statistic.live_cell')} & ${i18n.t('statistic.dead_cell')}`, + chart: , + path: '/charts/cell_count', + }, + { + title: `${i18n.t('statistic.total_dao_deposit')}`, + chart: , + path: '/charts/total_dao_deposit', + }, + ] useEffect(() => { - getStatisticsChart(dispatch) + getStatisticDifficultyHashRate(dispatch) + getStatisticDifficultyUncleRate(dispatch) + getStatisticAddressCount(dispatch) + getStatisticCellCount(dispatch) + getStatisticTransactionCount(dispatch) + getStatisticTotalDaoDeposit(dispatch) }, [dispatch]) return ( - {`${i18n.t('block.difficulty')} & ${i18n.t('block.hash_rate')}`} - {statisticsChartData.length > 0 ? ( - - - - { - return handleAxis(new BigNumber(text)) - }, - }} - /> - { - return handleAxis(new BigNumber(text)) - }, - }} - /> - { - return handleAxis(new BigNumber(text)) - }, - }} - /> - - - - - - - - ) : ( - - - - )} - - {`${i18n.t('block.uncle_rate')}`} - {statisticsUncleRates.length > 0 ? ( - - - - { - return `${new BigNumber(text).multipliedBy(100).toString()}%` - }, - }} - /> - - - - - ) : ( - - - - )} + + {charts.map(chart => ( + + ))} + ) } diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index 1ede741f9..6371e0634 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -43,3 +43,34 @@ export const LoadingPanel = styled.div` } } ` +export const ChartsPanel = styled.div` + margin: 40px 10%; + padding: 20px 0; + background: white; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + + @media (max-width: 700px) { + margin: 20px 4%; + padding: 10px 0; + } +` + +export const ChartCardPanel = styled.div` + width: 330px; + height: 250px; + background: white; + border-radius: 6px; + box-shadow: 2px 2px 6px 0 #dfdfdf; + margin: 10px 0; + + .chart__card_title { + height: 40px; + line-height: 40px; + padding-left: 20px; + background: rgb(151, 151, 151, 0.4); + color: ${props => props.theme.primary}; + font-size: 14px; + } +` From 0bd4e034ac9b2983f03758664baa847e257cd6ff Mon Sep 17 00:00:00 2001 From: duanyytop Date: Fri, 6 Dec 2019 12:22:29 +0800 Subject: [PATCH 12/22] chore: remove bizcharts lib --- package.json | 1 - yarn.lock | 349 ++------------------------------------------------- 2 files changed, 13 insertions(+), 337 deletions(-) diff --git a/package.json b/package.json index 409663d8d..824781394 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "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", diff --git a/yarn.lock b/yarn.lock index c4b3a46b2..bf44ff8c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -30,84 +30,6 @@ resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-2.1.1.tgz#7b9c08dffd4f5d41db667d9dbe5e0107d0bd9a4a" integrity sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w== -"@antv/adjust@~0.1.0": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@antv/adjust/-/adjust-0.1.1.tgz#e263ab0e1a1941a648842fc086cf65a7e3b75e98" - integrity sha512-9FaMOyBlM4AgoRL0b5o0VhEKAYkexBNUrxV8XmpHU/9NBPJONBOB/NZUlQDqxtLItrt91tCfbAuMQmF529UX2Q== - dependencies: - "@antv/util" "~1.3.1" - -"@antv/attr@~0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@antv/attr/-/attr-0.1.2.tgz#2eeb122fcaaf851a2d8749abc7c60519d3f77e37" - integrity sha512-QXjP+T2I+pJQcwZx1oCA4tipG43vgeCeKcGGKahlcxb71OBAzjJZm1QbF4frKXcnOqRkxVXtCr70X9TRair3Ew== - dependencies: - "@antv/util" "~1.3.1" - -"@antv/component@~0.3.2": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@antv/component/-/component-0.3.8.tgz#677ecd3b5026907d4cb70d9082951d7c3c2b5434" - integrity sha512-1WN3FzeRyJ1jraS/2og5gnm2ragnwtRMVQMiLolztWaUgC++F/B1CcSrPYfV1WvYrfuwbpX/QQxo3HL9aS+YJA== - dependencies: - "@antv/attr" "~0.1.2" - "@antv/g" "~3.3.5" - "@antv/util" "~1.3.1" - wolfy87-eventemitter "~5.1.0" - -"@antv/coord@~0.1.0": - version "0.1.0" - resolved "https://registry.yarnpkg.com/@antv/coord/-/coord-0.1.0.tgz#48a80ae36d07552f96657e7f8095227c63f0c0a9" - integrity sha512-W1R8h3Jfb3AfMBVfCreFPMVetgEYuwHBIGn0+d3EgYXe2ckOF8XWjkpGF1fZhOMHREMr+Gt27NGiQh8yBdLUgg== - dependencies: - "@antv/util" "~1.3.1" - -"@antv/g2@3.5.8-beta.1": - version "3.5.8-beta.1" - resolved "https://registry.yarnpkg.com/@antv/g2/-/g2-3.5.8-beta.1.tgz#71ba5b065ce513be916ceca258d2a02e1ea8e441" - integrity sha512-Lpq9rPDZI2mJzlaeY3qZ6R/Asb1wz6xopRmekOn3TXl8kzgQjp2m0U35gO7M2/Z+HxYOafzVjHkxCLuicsEuQw== - dependencies: - "@antv/adjust" "~0.1.0" - "@antv/attr" "~0.1.2" - "@antv/component" "~0.3.2" - "@antv/coord" "~0.1.0" - "@antv/g" "~3.3.6" - "@antv/scale" "~0.1.1" - "@antv/util" "~1.3.1" - venn.js "~0.2.20" - wolfy87-eventemitter "~5.1.0" - -"@antv/g@~3.3.5", "@antv/g@~3.3.6": - version "3.3.6" - resolved "https://registry.yarnpkg.com/@antv/g/-/g-3.3.6.tgz#11fed9ddc9ed4e5a2aa244b7c8abb982a003f201" - integrity sha512-2GtyTz++s0BbN6s0ZL2/nrqGYCkd52pVoNH92YkrTdTOvpO6Z4DNoo6jGVgZdPX6Nzwli6yduC8MinVAhE8X6g== - dependencies: - "@antv/gl-matrix" "~2.7.1" - "@antv/util" "~1.3.1" - d3-ease "~1.0.3" - d3-interpolate "~1.1.5" - d3-timer "~1.0.6" - wolfy87-eventemitter "~5.1.0" - -"@antv/gl-matrix@^2.7.1", "@antv/gl-matrix@~2.7.1": - version "2.7.1" - resolved "https://registry.yarnpkg.com/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14" - integrity sha512-oOWcVNlpELIKi9x+Mm1Vwbz8pXfkbJKykoCIOJ/dNK79hSIANbpXJ5d3Rra9/wZqK6MC961B7sybFhPlLraT3Q== - -"@antv/scale@~0.1.1": - version "0.1.3" - resolved "https://registry.yarnpkg.com/@antv/scale/-/scale-0.1.3.tgz#4876e6140cb7dcda190e7fe2e780882dcac6b09d" - integrity sha512-oknlOg4OUqIh8LygrfQttx+OAnNJm2fQ81si4g8aby1WJJwj/TU1gCr+J3loIpKBtBK4VpP/OzTTqg1Ym67SOQ== - dependencies: - "@antv/util" "~1.3.1" - fecha "~2.3.3" - -"@antv/util@~1.3.1": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@antv/util/-/util-1.3.1.tgz#30a34b201ff9126ec0d58c72c8166a9c3e644ccd" - integrity sha512-cbUta0hIJrKEaW3eKoGarz3Ita+9qUPF2YzTj8A6wds/nNiy20G26ztIWHU+5ThLc13B1n5Ik52LbaCaeg9enA== - dependencies: - "@antv/gl-matrix" "^2.7.1" - "@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d" @@ -2588,25 +2510,11 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5: json-schema-traverse "^0.4.1" uri-js "^4.2.2" -align-text@^0.1.1, align-text@^0.1.3: - version "0.1.4" - resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117" - integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc= - dependencies: - kind-of "^3.0.2" - longest "^1.0.1" - repeat-string "^1.5.2" - alphanum-sort@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM= -amdefine@>=0.0.4: - version "1.0.1" - resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" - integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= - ansi-colors@^3.0.0: version "3.2.4" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf" @@ -3175,18 +3083,6 @@ binary-extensions@^1.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65" integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw== -bizcharts@^3.5.4: - version "3.5.5" - resolved "https://registry.yarnpkg.com/bizcharts/-/bizcharts-3.5.5.tgz#108fb79c6dd203456361effbe3558b08ed82bf0e" - integrity sha512-2qTwWAylfPGdGX81u26a5t4IKUVHGbTK/lga873Wf+1/9mhG0TN6kLKmTpsPN9WKJmdDjFnZugFyNtB1bUWcKA== - dependencies: - "@antv/g2" "3.5.8-beta.1" - invariant "^2.2.2" - lodash.debounce "^4.0.8" - prop-types "^15.6.0" - resize-observer-polyfill "^1.5.1" - warning "^3.0.0" - bluebird@^3.5.5: version "3.7.1" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de" @@ -3585,14 +3481,6 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= -center-align@^0.1.1: - version "0.1.3" - resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad" - integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60= - dependencies: - align-text "^0.1.3" - lazy-cache "^1.0.3" - chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -3602,7 +3490,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4. escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: +chalk@^1.0.0, chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg= @@ -3716,15 +3604,6 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk= -cliui@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" - integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE= - dependencies: - center-align "^0.1.1" - right-align "^0.1.1" - wordwrap "0.0.2" - cliui@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49" @@ -4373,57 +4252,6 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= -d3-color@1: - version "1.4.0" - resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.0.tgz#89c45a995ed773b13314f06460df26d60ba0ecaf" - integrity sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg== - -d3-dispatch@1: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015" - integrity sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g== - -d3-ease@1, d3-ease@~1.0.3: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb" - integrity sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ== - -d3-interpolate@1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68" - integrity sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w== - dependencies: - d3-color "1" - -d3-interpolate@~1.1.5: - version "1.1.6" - resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6" - integrity sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A== - dependencies: - d3-color "1" - -d3-selection@^1.0.2, d3-selection@^1.1.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474" - integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg== - -d3-timer@1, d3-timer@~1.0.6: - version "1.0.9" - resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba" - integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg== - -d3-transition@^1.0.1: - version "1.2.0" - resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.2.0.tgz#f538c0e21b2aa1f05f3e965f8567e81284b3b2b8" - integrity sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw== - dependencies: - d3-color "1" - d3-dispatch "1" - d3-ease "1" - d3-interpolate "1" - d3-selection "^1.1.0" - d3-timer "1" - d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -4486,7 +4314,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: dependencies: ms "^2.1.1" -decamelize@^1.0.0, decamelize@^1.2.0: +decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= @@ -4513,11 +4341,6 @@ deep-equal@^1.0.1: object-keys "^1.1.1" regexp.prototype.flags "^1.2.0" -deep-equal@~1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" - integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU= - deep-extend@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" @@ -4978,7 +4801,7 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" -es-abstract@^1.12.0, es-abstract@^1.15.0, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.7.0: +es-abstract@^1.12.0, es-abstract@^1.15.0, es-abstract@^1.5.1, es-abstract@^1.7.0: version "1.16.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.0.tgz#d3a26dc9c3283ac9750dca569586e976d9dcc06d" integrity sha512-xdQnfykZ9JMEiasTAJZJdMWCQ1Vm00NBw79/AWi7ELfZuuPCSOMDZbT9mkOfSctVtfhb+sAAzrm+j//GjjLHLg== @@ -5611,11 +5434,6 @@ fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.9: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fecha@~2.3.3: - version "2.3.3" - resolved "https://registry.yarnpkg.com/fecha/-/fecha-2.3.3.tgz#948e74157df1a32fd1b12c3a3c3cdcb6ec9d96cd" - integrity sha512-lUGBnIamTAwk4znq5BcqsDaxSmZ9nDVJaij6NvRt/Tg4R69gERA+otPKbS86ROw9nxVMw2/mp1fnaiWqbs6Sdg== - figgy-pudding@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" @@ -5777,17 +5595,6 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" -fmin@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/fmin/-/fmin-0.0.2.tgz#59bbb40d43ffdc1c94cd00a568c41f95f1973017" - integrity sha1-Wbu0DUP/3ByUzQClaMQflfGXMBc= - dependencies: - contour_plot "^0.0.1" - json2module "^0.0.3" - rollup "^0.25.8" - tape "^4.5.1" - uglify-js "^2.6.2" - follow-redirects@1.5.10: version "1.5.10" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" @@ -5802,13 +5609,6 @@ follow-redirects@^1.0.0: dependencies: debug "^3.0.0" -for-each@~0.3.3: - version "0.3.3" - resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e" - integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw== - dependencies: - is-callable "^1.1.3" - for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" @@ -5948,7 +5748,7 @@ fsevents@^1.2.7: nan "^2.12.1" node-pre-gyp "^0.12.0" -function-bind@^1.0.2, function-bind@^1.1.1, function-bind@~1.1.1: +function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== @@ -6043,7 +5843,7 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= -glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.4: +glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: version "7.1.5" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.5.tgz#6714c69bee20f3c3e64c4dd905553e532b40cdc0" integrity sha512-J9dlskqUXK1OeTOYBEn5s8aMukWMwWfs+rPTn/jn50Ux4MNXVhubL1wu/j2t+H4NVI+cXEcCaYellqaPVGXNqQ== @@ -6248,7 +6048,7 @@ has-values@^1.0.0: is-number "^3.0.0" kind-of "^4.0.0" -has@^1.0.0, has@^1.0.1, has@^1.0.3, has@~1.0.3: +has@^1.0.0, has@^1.0.1, has@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== @@ -6646,7 +6446,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3, inherits@~2.0.4: +inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3: version "2.0.4" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== @@ -6800,7 +6600,7 @@ is-buffer@^2.0.2: resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623" integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A== -is-callable@^1.1.3, is-callable@^1.1.4: +is-callable@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA== @@ -7650,13 +7450,6 @@ json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= -json2module@^0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/json2module/-/json2module-0.0.3.tgz#00fb5f4a9b7adfc3f0647c29cb17bcd1979be9b2" - integrity sha1-APtfSpt638PwZHwpyxe80Zeb6bI= - dependencies: - rw "^1.3.2" - json2mq@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" @@ -8014,11 +7807,6 @@ loglevel@^1.6.4: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312" integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ== -longest@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" - integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc= - loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -8307,7 +8095,7 @@ minimist@0.0.8: resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= -minimist@^1.1.1, minimist@^1.2.0, minimist@~1.2.0: +minimist@^1.1.1, minimist@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= @@ -8748,7 +8536,7 @@ object-hash@^1.3.1: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df" integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA== -object-inspect@^1.6.0, object-inspect@~1.6.0: +object-inspect@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b" integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ== @@ -11136,7 +10924,7 @@ repeat-element@^1.1.2: resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce" integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g== -repeat-string@^1.5.2, repeat-string@^1.6.1: +repeat-string@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc= @@ -11270,13 +11058,6 @@ resolve@1.x, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2, dependencies: path-parse "^1.0.6" -resolve@~1.11.1: - version "1.11.1" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e" - integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw== - dependencies: - path-parse "^1.0.6" - restore-cursor@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf" @@ -11293,13 +11074,6 @@ restore-cursor@^3.1.0: onetime "^5.1.0" signal-exit "^3.0.2" -resumer@~0.0.0: - version "0.0.0" - resolved "https://registry.yarnpkg.com/resumer/-/resumer-0.0.0.tgz#f1e8f461e4064ba39e82af3cdc2a8c893d076759" - integrity sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k= - dependencies: - through "~2.3.4" - ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" @@ -11338,13 +11112,6 @@ rgba-regex@^1.0.0: resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM= -right-align@^0.1.1: - version "0.1.3" - resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef" - integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8= - dependencies: - align-text "^0.1.1" - rimraf@2.6.3: version "2.6.3" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" @@ -11382,15 +11149,6 @@ rmc-feedback@^2.0.0: babel-runtime "6.x" classnames "^2.2.5" -rollup@^0.25.8: - version "0.25.8" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.25.8.tgz#bf6ce83b87510d163446eeaa577ed6a6fc5835e0" - integrity sha1-v2zoO4dRDRY0Ru6qV37WpvxYNeA= - dependencies: - chalk "^1.1.1" - minimist "^1.2.0" - source-map-support "^0.3.2" - rsvp@^4.8.4: version "4.8.5" resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734" @@ -11420,11 +11178,6 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rw@^1.3.2: - version "1.3.3" - resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" - integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q= - rxjs@^6.3.3, rxjs@^6.4.0: version "6.5.3" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a" @@ -11832,13 +11585,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: source-map-url "^0.4.0" urix "^0.1.0" -source-map-support@^0.3.2: - version "0.3.3" - resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.3.3.tgz#34900977d5ba3f07c7757ee72e73bb1a9b53754f" - integrity sha1-NJAJd9W6PwfHdX7nLnO7GptTdU8= - dependencies: - source-map "0.1.32" - source-map-support@^0.5.6, source-map-support@~0.5.12: version "0.5.16" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042" @@ -11852,19 +11598,12 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM= -source-map@0.1.32: - version "0.1.32" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.32.tgz#c8b6c167797ba4740a8ea33252162ff08591b266" - integrity sha1-yLbBZ3l7pHQKjqMyUhYv8IWRsmY= - dependencies: - amdefine ">=0.0.4" - source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.1: +source-map@^0.5.0, source-map@^0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -12096,15 +11835,6 @@ string-width@^4.1.0: is-fullwidth-code-point "^3.0.0" strip-ansi "^5.2.0" -string.prototype.trim@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea" - integrity sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo= - dependencies: - define-properties "^1.1.2" - es-abstract "^1.5.0" - function-bind "^1.0.2" - string.prototype.trimleft@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634" @@ -12312,25 +12042,6 @@ tapable@^1.0.0, tapable@^1.1.0, tapable@^1.1.3: resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== -tape@^4.5.1: - version "4.11.0" - resolved "https://registry.yarnpkg.com/tape/-/tape-4.11.0.tgz#63d41accd95e45a23a874473051c57fdbc58edc1" - integrity sha512-yixvDMX7q7JIs/omJSzSZrqulOV51EC9dK8dM0TzImTIkHWfe2/kFyL5v+d9C+SrCMaICk59ujsqFAVidDqDaA== - dependencies: - deep-equal "~1.0.1" - defined "~1.0.0" - for-each "~0.3.3" - function-bind "~1.1.1" - glob "~7.1.4" - has "~1.0.3" - inherits "~2.0.4" - minimist "~1.2.0" - object-inspect "~1.6.0" - resolve "~1.11.1" - resumer "~0.0.0" - string.prototype.trim "~1.1.2" - through "~2.3.8" - tar@^4: version "4.4.13" resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" @@ -12405,7 +12116,7 @@ through2@^2.0.0: readable-stream "~2.3.6" xtend "~4.0.1" -through@^2.3.6, through@~2.3.4, through@~2.3.8: +through@^2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= @@ -12652,16 +12363,6 @@ uglify-js@3.4.x: commander "~2.19.0" source-map "~0.6.1" -uglify-js@^2.6.2: - version "2.8.29" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" - integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0= - dependencies: - source-map "~0.5.1" - yargs "~3.10.0" - optionalDependencies: - uglify-to-browserify "~1.0.0" - uglify-js@^3.1.4: version "3.6.8" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.8.tgz#5edcbcf9d49cbb0403dc49f856fe81530d65145e" @@ -12670,11 +12371,6 @@ uglify-js@^3.1.4: commander "~2.20.3" source-map "~0.6.1" -uglify-to-browserify@~1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" - integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc= - unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818" @@ -12877,15 +12573,6 @@ vendors@^1.0.0: resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0" integrity sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw== -venn.js@~0.2.20: - version "0.2.20" - resolved "https://registry.yarnpkg.com/venn.js/-/venn.js-0.2.20.tgz#3f0e50cc75cba1f58692a8a32f67bd7aaf1aa6fa" - integrity sha512-bb5SYq/wamY9fvcuErb9a0FJkgIFHJjkLZWonQ+DoKKuDX3WPH2B4ouI1ce4K2iejBklQy6r1ly8nOGIyOCO6w== - dependencies: - d3-selection "^1.0.2" - d3-transition "^1.0.1" - fmin "0.0.2" - verror@1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400" @@ -13476,16 +13163,6 @@ yargs@^13.3.0: y18n "^4.0.0" yargs-parser "^13.1.1" -yargs@~3.10.0: - version "3.10.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1" - integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E= - dependencies: - camelcase "^1.0.2" - cliui "^2.1.0" - decamelize "^1.0.0" - window-size "0.1.0" - zrender@4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.1.2.tgz#8368deff24c7e237cbcbd3a2ff93017905ae43f7" From c3c7f26535bedfbb4c4e3363099a47ec155d9a1d Mon Sep 17 00:00:00 2001 From: duanyytop Date: Fri, 6 Dec 2019 15:04:12 +0800 Subject: [PATCH 13/22] feat: add loading to charts --- src/pages/StatisticsChart/AddressCount.tsx | 10 +++++++++- src/pages/StatisticsChart/CellCount.tsx | 10 +++++++++- src/pages/StatisticsChart/DifficultyHashRate.tsx | 10 +++++++++- src/pages/StatisticsChart/DifficultyUncleRate.tsx | 10 +++++++++- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 14 +++++++++++--- src/pages/StatisticsChart/TransactionCount.tsx | 10 +++++++++- src/pages/StatisticsChart/styled.tsx | 11 +++++++++++ 7 files changed, 67 insertions(+), 8 deletions(-) diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx index 58e938dfa..e4930e98a 100644 --- a/src/pages/StatisticsChart/AddressCount.tsx +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -12,9 +12,10 @@ import { AppContext } from '../../contexts/providers' import i18n from '../../utils/i18n' import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' -import { ChartTitle, ChartPanel, LoadingPanel } from './styled' +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'] @@ -97,6 +98,13 @@ export const AddressCountChart = ({ statisticAddressCounts: State.StatisticAddressCount[] isThumbnail?: boolean }) => { + if (statisticAddressCounts.length === 0) { + return isThumbnail ? ( + + + + ) : null + } return ( { + if (statisticCellCounts.length === 0) { + return isThumbnail ? ( + + + + ) : null + } return ( { + if (statisticDifficultyHashRates.length === 0) { + return isThumbnail ? ( + + + + ) : null + } return ( { + if (statisticDifficultyUncleRates.length === 0) { + return isThumbnail ? ( + + + + ) : null + } return ( { - return statisticTotalDaoDeposits.length > 0 ? ( + if (statisticTotalDaoDeposits.length === 0) { + return isThumbnail ? ( + + + + ) : null + } + return ( - ) : null + ) } export default ({ dispatch }: React.PropsWithoutRef) => { diff --git a/src/pages/StatisticsChart/TransactionCount.tsx b/src/pages/StatisticsChart/TransactionCount.tsx index dad1a756e..b8dcb4971 100644 --- a/src/pages/StatisticsChart/TransactionCount.tsx +++ b/src/pages/StatisticsChart/TransactionCount.tsx @@ -12,9 +12,10 @@ import { AppContext } from '../../contexts/providers' import i18n from '../../utils/i18n' import Loading from '../../components/Loading' import { handleAxis } from '../../utils/chart' -import { ChartTitle, ChartPanel, LoadingPanel } from './styled' +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'] @@ -97,6 +98,13 @@ export const TransactionCountChart = ({ statisticTransactionCounts: State.StatisticTransactionCount[] isThumbnail?: boolean }) => { + if (statisticTransactionCounts.length === 0) { + return isThumbnail ? ( + + + + ) : null + } return ( Date: Sun, 8 Dec 2019 13:50:01 +0800 Subject: [PATCH 14/22] chore: adjust charts ui --- src/locales/en.json | 1 + src/locales/zh.json | 1 + src/pages/StatisticsChart/AddressCount.tsx | 2 +- src/pages/StatisticsChart/CellCount.tsx | 6 ++++-- src/pages/StatisticsChart/DifficultyHashRate.tsx | 5 ++++- src/pages/StatisticsChart/DifficultyUncleRate.tsx | 2 +- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 2 +- src/pages/StatisticsChart/TransactionCount.tsx | 2 +- src/pages/StatisticsChart/index.tsx | 2 +- 9 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index c1e30510d..5c1320e14 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -43,6 +43,7 @@ "total_dao_deposit": "Total Nervos DAO Deposit", "live_cell": "Live Cell", "dead_cell": "Dead Cell", + "cell_count": "Cell Count", "date": "Date" }, "home": { diff --git a/src/locales/zh.json b/src/locales/zh.json index 61a150a1a..46c32fb5a 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -43,6 +43,7 @@ "total_dao_deposit": "Nervos DAO 锁定总额", "live_cell": "未花费 Cell", "dead_cell": "已花费 Cell", + "cell_count": "Cell 数量", "date": "时间" }, "home": { diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx index e4930e98a..392eb076c 100644 --- a/src/pages/StatisticsChart/AddressCount.tsx +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -112,7 +112,7 @@ export const AddressCountChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index 6304eb01c..c713214a5 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -88,6 +88,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail { name: i18n.t('statistic.live_cell'), type: 'line', + stack: '总量', areaStyle: { normal: { origin: 'auto', @@ -100,6 +101,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail { name: i18n.t('statistic.dead_cell'), type: 'line', + stack: '总量', areaStyle: { normal: { origin: 'auto', @@ -134,7 +136,7 @@ export const CellCountChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) @@ -149,7 +151,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { return ( - {`${i18n.t('statistic.live_cell')} & ${i18n.t('statistic.dead_cell')}`} + {i18n.t('statistic.cell_count')} {statisticCellCounts.length > 0 ? ( diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index 16e20f838..4297a9814 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -89,6 +89,9 @@ const getOption = (statisticDifficultyHashRates: State.StatisticDifficultyHashRa position: 'right', name: isMobile() || isThumbnail ? '' : i18n.t('block.hash_rate_hps'), type: 'value', + splitLine: { + show: !isThumbnail, + }, scale: true, axisLine: { lineStyle: { @@ -142,7 +145,7 @@ export const DifficultyHashRateChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index 6341db67f..6ecabb0b2 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -149,7 +149,7 @@ export const DifficultyUncleRateChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx index 38423013c..510625df4 100644 --- a/src/pages/StatisticsChart/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -113,7 +113,7 @@ export const TotalDaoDepositChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) diff --git a/src/pages/StatisticsChart/TransactionCount.tsx b/src/pages/StatisticsChart/TransactionCount.tsx index b8dcb4971..9df860896 100644 --- a/src/pages/StatisticsChart/TransactionCount.tsx +++ b/src/pages/StatisticsChart/TransactionCount.tsx @@ -112,7 +112,7 @@ export const TransactionCountChart = ({ notMerge lazyUpdate style={{ - height: isThumbnail ? '30vh' : '70vh', + height: isThumbnail ? '230px' : '70vh', }} /> ) diff --git a/src/pages/StatisticsChart/index.tsx b/src/pages/StatisticsChart/index.tsx index d03f056c7..3ce347819 100644 --- a/src/pages/StatisticsChart/index.tsx +++ b/src/pages/StatisticsChart/index.tsx @@ -69,7 +69,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { path: '/charts/address_count', }, { - title: `${i18n.t('statistic.live_cell')} & ${i18n.t('statistic.dead_cell')}`, + title: i18n.t('statistic.cell_count'), chart: , path: '/charts/cell_count', }, From 41c214c07fd077ac29dffcd3934180bb8d404a0c Mon Sep 17 00:00:00 2001 From: duanyytop Date: Sun, 8 Dec 2019 22:52:43 +0800 Subject: [PATCH 15/22] chore: updatee series stack --- src/pages/StatisticsChart/CellCount.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index c713214a5..9bd761faf 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -88,7 +88,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail { name: i18n.t('statistic.live_cell'), type: 'line', - stack: '总量', + stack: i18n.t('statistic.cell_count'), areaStyle: { normal: { origin: 'auto', @@ -101,7 +101,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail { name: i18n.t('statistic.dead_cell'), type: 'line', - stack: '总量', + stack: i18n.t('statistic.cell_count'), areaStyle: { normal: { origin: 'auto', From 6fa416e28e56176236d1281af1576468f018accd Mon Sep 17 00:00:00 2001 From: duanyytop Date: Sun, 8 Dec 2019 22:54:15 +0800 Subject: [PATCH 16/22] chore: update chart card css cursor --- src/pages/StatisticsChart/styled.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index d577dcb36..e11a62b49 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -64,6 +64,7 @@ export const ChartCardPanel = styled.div` border-radius: 6px; box-shadow: 2px 2px 6px 0 #dfdfdf; margin: 10px 0; + cursor: pointer; .chart__card_title { height: 40px; From afee76c64f9c8bfbce89c34de76756dc0a4a2061 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 10:11:13 +0800 Subject: [PATCH 17/22] chore: remove reverse function --- src/service/app/statisticsChart.ts | 48 +++++++++++++----------------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index f3ee901e6..26a740432 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -116,15 +116,13 @@ export const getStatisticDifficultyHashRate = (dispatch: AppDispatch) => { (response: Response.Response[]> | null) => { if (!response) return const { data } = response - const difficultyHashRates = data - .map(wrapper => { - return { - blockNumber: wrapper.attributes.blockNumber, - difficulty: wrapper.attributes.difficulty, - hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toNumber(), - } - }) - .reverse() + const difficultyHashRates = data.map(wrapper => { + return { + blockNumber: wrapper.attributes.blockNumber, + difficulty: wrapper.attributes.difficulty, + hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toNumber(), + } + }) if (difficultyHashRates.length === 0) return dispatch({ type: PageActions.UpdateStatisticDifficultyHashRate, @@ -141,15 +139,13 @@ export const getStatisticDifficultyUncleRate = (dispatch: AppDispatch) => { (response: Response.Response[]> | null) => { if (!response) return const { data } = response - const difficultyUncleRates = data - .map(wrapper => { - return { - epochNumber: wrapper.attributes.epochNumber, - difficulty: wrapper.attributes.difficulty, - uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), - } - }) - .reverse() + const difficultyUncleRates = data.map(wrapper => { + return { + epochNumber: wrapper.attributes.epochNumber, + difficulty: wrapper.attributes.difficulty, + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), + } + }) if (difficultyUncleRates.length === 0) return dispatch({ type: PageActions.UpdateStatisticDifficultyUncleRate, @@ -231,15 +227,13 @@ export const getStatisticCellCount = (dispatch: AppDispatch) => { fetchStatisticCellCount().then((response: Response.Response[]> | null) => { if (!response) return const { data } = response - const cellCounts = data - .map(wrapper => { - return { - liveCellCount: wrapper.attributes.liveCellCount, - deadCellCount: wrapper.attributes.deadCellCount, - blockNumber: wrapper.attributes.blockNumber, - } - }) - .reverse() + const cellCounts = data.map(wrapper => { + return { + liveCellCount: wrapper.attributes.liveCellCount, + deadCellCount: wrapper.attributes.deadCellCount, + blockNumber: wrapper.attributes.blockNumber, + } + }) if (cellCounts.length === 0) return dispatch({ type: PageActions.UpdateStatisticCellCount, From 0012e650599a636c092f2d489cdf8f117b565929 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 11:03:18 +0800 Subject: [PATCH 18/22] fix: solve conflicts --- yarn.lock | 46 +++++++++++++++------------------------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/yarn.lock b/yarn.lock index bf44ff8c6..3c71e1aa6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3429,11 +3429,6 @@ camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -camelcase@^1.0.2: - version "1.2.1" - resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39" - integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk= - camelcase@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" @@ -3835,11 +3830,6 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -contour_plot@^0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/contour_plot/-/contour_plot-0.0.1.tgz#475870f032b8e338412aa5fc507880f0bf495c77" - integrity sha1-R1hw8DK44zhBKqX8UHiA8L9JXHc= - convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" @@ -4388,11 +4378,6 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" -defined@~1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= - del@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4" @@ -11334,7 +11319,7 @@ send@0.17.1: range-parser "~1.2.1" statuses "~1.5.0" -serialize-javascript@^2.1.0: +serialize-javascript@^2.1.0, serialize-javascript@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.1.tgz#952907a04a3e3a75af7f73d92d15e233862048b2" integrity sha512-MPLPRpD4FNqWq9tTIjYG5LesFouDhdyH0EPY3gVK4DRD5+g4aDqdNSzLIwceulo3Yj+PL1bPh6laE5+H6LTcrQ== @@ -12069,6 +12054,20 @@ terser-webpack-plugin@2.2.1: terser "^4.3.9" webpack-sources "^1.4.3" +terser-webpack-plugin@^1.4.1: + version "1.4.2" + resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.2.tgz#e23c0d554587d1f473bd0cf68627720e733890a4" + integrity sha512-fdEb91kR2l+BVgES77N/NTXWZlpX6vX+pYPjnX5grcDYBF2CMnzJiXX4NNlna4l04lvCW39lZ+O/jSvUhHH/ew== + dependencies: + cacache "^12.0.2" + find-cache-dir "^2.1.0" + is-wsl "^1.1.0" + schema-utils "^1.0.0" + serialize-javascript "^2.1.1" + source-map "^0.6.1" + terser "^4.1.2" + webpack-sources "^1.4.0" + worker-farm "^1.7.0" terser@^4.1.2: version "4.3.9" @@ -12830,26 +12829,11 @@ wide-align@^1.1.0: dependencies: string-width "^1.0.2 || 2" -window-size@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" - integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0= - -wolfy87-eventemitter@~5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/wolfy87-eventemitter/-/wolfy87-eventemitter-5.1.0.tgz#35c1ac0dd1ac0c15e35d981508fc22084a13a011" - integrity sha1-NcGsDdGsDBXjXZgVCPwiCEoToBE= - word-wrap@~1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== -wordwrap@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" - integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8= - wordwrap@~0.0.2: version "0.0.3" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" From c2ba18fd4df3a65c5f97ebd58575e897e4377c09 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 13:34:29 +0800 Subject: [PATCH 19/22] chore: update charts css and cell count service --- src/index.css | 4 ++++ src/pages/StatisticsChart/AddressCount.tsx | 2 +- src/pages/StatisticsChart/CellCount.tsx | 6 ++--- .../StatisticsChart/DifficultyHashRate.tsx | 2 +- .../StatisticsChart/DifficultyUncleRate.tsx | 2 +- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 2 +- .../StatisticsChart/TransactionCount.tsx | 2 +- src/pages/StatisticsChart/index.tsx | 2 +- src/pages/StatisticsChart/styled.tsx | 22 +++++++++++-------- src/service/app/statisticsChart.ts | 4 ++-- src/service/http/fetcher.ts | 2 +- src/types/App/index.d.ts | 4 ++-- 12 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/index.css b/src/index.css index aec16883a..144ebfc4f 100644 --- a/src/index.css +++ b/src/index.css @@ -42,6 +42,10 @@ a { color: inherit; } +.echarts-for-react canvas { + cursor: pointer; +} + @media (max-width: 700px) { .rc-pagination-options-quick-jumper { display: none; diff --git a/src/pages/StatisticsChart/AddressCount.tsx b/src/pages/StatisticsChart/AddressCount.tsx index 392eb076c..2724cb27d 100644 --- a/src/pages/StatisticsChart/AddressCount.tsx +++ b/src/pages/StatisticsChart/AddressCount.tsx @@ -23,7 +23,7 @@ const gridThumbnail = { left: '4%', right: '10%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { diff --git a/src/pages/StatisticsChart/CellCount.tsx b/src/pages/StatisticsChart/CellCount.tsx index 9bd761faf..9b32dd68a 100644 --- a/src/pages/StatisticsChart/CellCount.tsx +++ b/src/pages/StatisticsChart/CellCount.tsx @@ -22,7 +22,7 @@ const gridThumbnail = { left: '4%', right: '4%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { @@ -96,7 +96,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail }, symbol: isThumbnail ? 'none' : 'circle', symbolSize: 3, - data: statisticCellCounts.map(data => new BigNumber(data.liveCellCount).toNumber()), + data: statisticCellCounts.map(data => new BigNumber(data.liveCellsCount).toNumber()), }, { name: i18n.t('statistic.dead_cell'), @@ -109,7 +109,7 @@ const getOption = (statisticCellCounts: State.StatisticCellCount[], isThumbnail }, symbol: 'circle', symbolSize: 3, - data: statisticCellCounts.map(data => new BigNumber(data.deadCellCount).toNumber()), + data: statisticCellCounts.map(data => new BigNumber(data.deadCellsCount).toNumber()), }, ], } diff --git a/src/pages/StatisticsChart/DifficultyHashRate.tsx b/src/pages/StatisticsChart/DifficultyHashRate.tsx index 4297a9814..346f00ceb 100644 --- a/src/pages/StatisticsChart/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/DifficultyHashRate.tsx @@ -24,7 +24,7 @@ const gridThumbnail = { left: '4%', right: '4%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { diff --git a/src/pages/StatisticsChart/DifficultyUncleRate.tsx b/src/pages/StatisticsChart/DifficultyUncleRate.tsx index 6ecabb0b2..6a6391c61 100644 --- a/src/pages/StatisticsChart/DifficultyUncleRate.tsx +++ b/src/pages/StatisticsChart/DifficultyUncleRate.tsx @@ -25,7 +25,7 @@ const gridThumbnail = { left: '4%', right: '4%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx index 510625df4..3780127cb 100644 --- a/src/pages/StatisticsChart/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -23,7 +23,7 @@ const gridThumbnail = { left: '4%', right: '10%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { diff --git a/src/pages/StatisticsChart/TransactionCount.tsx b/src/pages/StatisticsChart/TransactionCount.tsx index 9df860896..c98a58804 100644 --- a/src/pages/StatisticsChart/TransactionCount.tsx +++ b/src/pages/StatisticsChart/TransactionCount.tsx @@ -23,7 +23,7 @@ const gridThumbnail = { left: '4%', right: '10%', top: '8%', - bottom: '12%', + bottom: '6%', containLabel: true, } const grid = { diff --git a/src/pages/StatisticsChart/index.tsx b/src/pages/StatisticsChart/index.tsx index 3ce347819..92e08ff08 100644 --- a/src/pages/StatisticsChart/index.tsx +++ b/src/pages/StatisticsChart/index.tsx @@ -31,7 +31,7 @@ const ChartCard = ({ chartData }: { chartData: ChartData }) => {
{chartData.title}
-
{chartData.chart}
+
{chartData.chart}
 ) diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index e11a62b49..fb694a656 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -45,7 +45,7 @@ export const LoadingPanel = styled.div` ` export const ChartsPanel = styled.div` margin: 40px 10%; - padding: 20px 0; + padding: 0 0 20px 0; background: white; display: flex; flex-wrap: wrap; @@ -61,27 +61,31 @@ export const ChartCardPanel = styled.div` width: 330px; height: 250px; background: white; - border-radius: 6px; - box-shadow: 2px 2px 6px 0 #dfdfdf; - margin: 10px 0; + margin: 25px 10px; cursor: pointer; .chart__card_title { height: 40px; line-height: 40px; padding-left: 20px; - background: rgb(151, 151, 151, 0.4); + background: #fbfbfb; + border-radius: 6px 6px 0 0; + border: 1px solid #e2e2e2; + border-width: 1px 1px 0 1px; color: ${props => props.theme.primary}; font-size: 14px; } + + .chart__card_body { + border-radius: 0 0 6px 6px; + box-shadow: 2px 2px 10px 0 rgb(43, 43, 43, 0.05); + border: 1px solid #e2e2e2; + } ` export const ChartCardLoadingPanel = styled.div` width: 330px; - height: 250px; - background: white; - border-radius: 6px; - box-shadow: 2px 2px 6px 0 #dfdfdf; + height: 230px; display: flex; justify-content: center; align-items: center; diff --git a/src/service/app/statisticsChart.ts b/src/service/app/statisticsChart.ts index 26a740432..86291a85b 100644 --- a/src/service/app/statisticsChart.ts +++ b/src/service/app/statisticsChart.ts @@ -229,8 +229,8 @@ export const getStatisticCellCount = (dispatch: AppDispatch) => { const { data } = response const cellCounts = data.map(wrapper => { return { - liveCellCount: wrapper.attributes.liveCellCount, - deadCellCount: wrapper.attributes.deadCellCount, + liveCellsCount: wrapper.attributes.liveCellsCount, + deadCellsCount: wrapper.attributes.deadCellsCount, blockNumber: wrapper.attributes.blockNumber, } }) diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 585de40af..5e10b1733 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -181,7 +181,7 @@ export const fetchStatisticDifficultyHashRate = () => { } export const fetchStatisticCellCount = () => { - return axiosIns(`/block_statistics/live_cell_count-dead_cell_count`).then((res: AxiosResponse) => + return axiosIns(`/block_statistics/live_cells_count-dead_cells_count`).then((res: AxiosResponse) => toCamelcase[]>>(res.data), ) } diff --git a/src/types/App/index.d.ts b/src/types/App/index.d.ts index a0502395e..1c9b66dc4 100644 --- a/src/types/App/index.d.ts +++ b/src/types/App/index.d.ts @@ -217,8 +217,8 @@ declare namespace State { } export interface StatisticCellCount { - liveCellCount: string - deadCellCount: string + liveCellsCount: string + deadCellsCount: string blockNumber: string } From 7d29159d97901706cc3bafceb9c9f9933e7a4dae Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 14:03:14 +0800 Subject: [PATCH 20/22] chore: update charts and dao deposit chart css --- src/pages/StatisticsChart/TotalDaoDeposit.tsx | 2 +- src/pages/StatisticsChart/styled.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/StatisticsChart/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/TotalDaoDeposit.tsx index 3780127cb..2b13e69a2 100644 --- a/src/pages/StatisticsChart/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/TotalDaoDeposit.tsx @@ -27,7 +27,7 @@ const gridThumbnail = { containLabel: true, } const grid = { - left: '3%', + left: '6%', right: '4%', bottom: '3%', containLabel: true, diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index fb694a656..3deccecb4 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -44,7 +44,7 @@ export const LoadingPanel = styled.div` } ` export const ChartsPanel = styled.div` - margin: 40px 10%; + margin: 40px 6%; padding: 0 0 20px 0; background: white; display: flex; From b073bd6a89abeaf2b3ad9e32c05386eb3f89ef4f Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 14:19:43 +0800 Subject: [PATCH 21/22] chore: update chart cards flex and margin --- src/pages/StatisticsChart/styled.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index 3deccecb4..5bc237db5 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -45,11 +45,11 @@ export const LoadingPanel = styled.div` ` export const ChartsPanel = styled.div` margin: 40px 6%; - padding: 0 0 20px 0; + padding: 0 20px 20px 20px; background: white; display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: space-between; @media (max-width: 700px) { margin: 20px 4%; From 431ac30a06fca19a401637de5ccf4fc35ce6f420 Mon Sep 17 00:00:00 2001 From: duanyytop Date: Mon, 9 Dec 2019 17:25:11 +0800 Subject: [PATCH 22/22] chore: update charts card cursor and charts key --- src/index.css | 3 --- src/pages/StatisticsChart/index.tsx | 2 +- src/pages/StatisticsChart/styled.tsx | 6 ++++++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/index.css b/src/index.css index 144ebfc4f..5b1e76425 100644 --- a/src/index.css +++ b/src/index.css @@ -42,9 +42,6 @@ a { color: inherit; } -.echarts-for-react canvas { - cursor: pointer; -} @media (max-width: 700px) { .rc-pagination-options-quick-jumper { diff --git a/src/pages/StatisticsChart/index.tsx b/src/pages/StatisticsChart/index.tsx index 92e08ff08..4d4ecc29c 100644 --- a/src/pages/StatisticsChart/index.tsx +++ b/src/pages/StatisticsChart/index.tsx @@ -93,7 +93,7 @@ export default ({ dispatch }: React.PropsWithoutRef) => { {charts.map(chart => ( - + ))} diff --git a/src/pages/StatisticsChart/styled.tsx b/src/pages/StatisticsChart/styled.tsx index 5bc237db5..509214414 100644 --- a/src/pages/StatisticsChart/styled.tsx +++ b/src/pages/StatisticsChart/styled.tsx @@ -64,6 +64,12 @@ export const ChartCardPanel = styled.div` margin: 25px 10px; cursor: pointer; + .echarts-for-react { + canvas { + cursor: pointer; + } + } + .chart__card_title { height: 40px; line-height: 40px;