From 7412ce906559677a89a2382808b3527eb9792269 Mon Sep 17 00:00:00 2001 From: Miles Zhang Date: Fri, 21 Jun 2024 16:37:20 +0800 Subject: [PATCH] feat: show visualmap of contract's h24 tx count (#297) --- src/locales/en.json | 3 +- src/locales/zh.json | 3 +- .../ContractResourceDistributed.tsx | 56 ++++++++++++++----- src/pages/StatisticsChart/common/index.tsx | 1 + src/services/ExplorerService/types.ts | 1 + 5 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 197b676d7..bc74c495b 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -321,7 +321,8 @@ "six_months_to_one_year": "6m-1y", "one_year_to_three_years": "1y-3y", "over_three_years": "> 3y", - "ckb_hodl_wave": "CKB HODL Wave" + "ckb_hodl_wave": "CKB HODL Wave", + "h24_transaction_count": "24hr Transaction Count" }, "home": { "height": "Height", diff --git a/src/locales/zh.json b/src/locales/zh.json index 2be30bb20..1ea1187eb 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -320,7 +320,8 @@ "six_months_to_one_year": "6月-1年", "one_year_to_three_years": "1年-3年", "over_three_years": "> 3年", - "ckb_hodl_wave": "CKB持有波动图" + "ckb_hodl_wave": "CKB持有波动图", + "h24_transaction_count": "交易数量（最近24小时）" }, "home": { "height": "高度", diff --git a/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx b/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx index d1dc9744c..457f823a6 100644 --- a/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx +++ b/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx @@ -27,28 +27,31 @@ const useOption = ( bottom: '5%', containLabel: true, } + const h24TxCountSortedList: number[] = statisticContractResourceDistributed + .map(data => Number(data.h24TxCount)) + .sort((a, b) => b - a) + return { color: chartColor.colors, grid: isThumbnail ? gridThumbnail : grid, dataZoom: isThumbnail ? [] : DATA_ZOOM_CONFIG, - tooltip: !isThumbnail ? { - trigger: 'axis', - formatter: dataList => { - if (!Array.isArray(dataList)) return '' - const params = dataList[0] - if (!params) return '' - if (!Array.isArray(params.value)) return '' - const [addrCount, ckbAmount, txCount, codeHash, tag, hashType] = params.value - const script = tag || `
Code Hash: ${codeHash}\nHash Type: ${hashType}
` - return ` + trigger: 'item', + axisPointer: { + type: 'cross', + }, + formatter: params => { + if (params && 'data' in params) { + const [addrCount, ckbAmount, txCount, codeHash, tag, hashType, h24TxCount] = params.data + const script = tag || `
Code Hash: ${codeHash}\nHash Type: ${hashType}
` + return `
- + - + @@ -56,10 +59,16 @@ const useOption = ( - + + + + +
Script: Script: ${script}
Addresses: ${t('statistic.address')}: ${Number(addrCount).toLocaleString('en')}
${Number(ckbAmount).toLocaleString('en')}
Transactions: ${t('statistic.transaction_num')}: ${Number(txCount).toLocaleString('en')}
${t('statistic.h24_transaction_count')}: ${Number(h24TxCount).toLocaleString('en')}
` + } + return '' }, } : undefined, @@ -82,7 +91,24 @@ const useOption = ( }, }, ], - // TODO: add visual map when txs/24h is ready + visualMap: [ + { + min: + h24TxCountSortedList[h24TxCountSortedList.length - 1] === undefined + ? 0 + : h24TxCountSortedList[h24TxCountSortedList.length - 1], + max: h24TxCountSortedList[0] === undefined ? 200 : h24TxCountSortedList[0], + dimension: 6, + orient: 'vertical', + right: 10, + top: 'center', + text: ['HIGH', 'LOW'], + calculable: true, + inRange: { + color: ['#FFB21E', '#FA504F'], + }, + }, + ], series: [ { type: 'scatter', @@ -103,6 +129,7 @@ const useOption = ( data.codeHash, data.name, data.hashType, + data.h24TxCount, ]), }, } @@ -117,6 +144,7 @@ const toCSV = (statisticContractResourceDistributed: ChartItem.ContractResourceD data.txCount, data.ckbAmount, data.addressCount, + data.h24TxCount, ]) : [] diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx index 85cdc5271..5653ab919 100644 --- a/src/pages/StatisticsChart/common/index.tsx +++ b/src/pages/StatisticsChart/common/index.tsx @@ -10,6 +10,7 @@ import 'echarts/lib/component/legend' import 'echarts/lib/component/markLine' import 'echarts/lib/component/dataZoom' import 'echarts/lib/component/brush' +import 'echarts/lib/component/visualMap' import echarts from 'echarts/lib/echarts' import { EChartOption, ECharts } from 'echarts' import { useTranslation } from 'react-i18next' diff --git a/src/services/ExplorerService/types.ts b/src/services/ExplorerService/types.ts index 86890c6b7..9638f0e12 100644 --- a/src/services/ExplorerService/types.ts +++ b/src/services/ExplorerService/types.ts @@ -99,6 +99,7 @@ export namespace ChartItem { addressCount: string ckbAmount: string txCount: string + h24TxCount: string } export interface DifficultyUncleRateEpoch {