Skip to content

Commit 28c19bd

Browse files
Keith-CYKeith-CY
authored
Merge pull request #1820 from nervosnetwork/testnet
2 parents c0b0f6b + 4cb969c commit 28c19bd

File tree

8 files changed

+148
-9
lines changed

8 files changed

+148
-9
lines changed

‎src/locales/en.json

+2
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@
225225
"rgbpp_transaction_list": "RGB++ Transaction List",
226226
"transaction_count": "Transaction Count",
227227
"address_count": "Unique Addresses Used",
228+
"knowledge_size": "Knowledge Size",
228229
"total_dao_deposit_depositor": "Total Nervos DAO Deposit & Accrued Total Depositors",
229230
"total_dao_deposit_title": "Total Deposit",
230231
"total_dao_deposit": "Total Deposit",
@@ -300,6 +301,7 @@
300301
"percent": "Percentage",
301302
"others": "Others",
302303
"address_count_description": "The total number of unique addresses used on the blockchain.",
304+
"knowledge_size_description": "Bytes occupied by on-chain knowledge",
303305
"block_time_distribution_description": "The x axis is block intervals in seconds, and the y axis is the frequency of occurrence in the latest 50,000 blocks.",
304306
"epoch_time_distribution_description": "The x axis is epoch intervals in hours, and the y axis is the frequency of occurrence in the latest 500 epochs.",
305307
"average_block_time_description": "Average block intervals with daily & weekly smooth window",

‎src/locales/zh.json

+2
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@
240240
"rgbpp_transaction_list": "RGB++ 交易列表",
241241
"transaction_count": "交易数量",
242242
"address_count": "已使用的地址数",
243+
"knowledge_size": "知识总量",
243244
"total_dao_deposit_depositor": "Nervos DAO 锁定总额 & 累计锁定地址数",
244245
"total_dao_deposit_title": "Nervos DAO 锁定总额",
245246
"total_dao_deposit": "锁定总额",
@@ -314,6 +315,7 @@
314315
"percent": "百分比",
315316
"others": "其他",
316317
"address_count_description": "链上已使用的地址总数",
318+
"knowledge_size_description": "链上知识占用的空间",
317319
"block_time_distribution_description": "横轴表示区块间隔，纵轴表示对应区块间隔在过去 50,000 个区块中出现的比率。",
318320
"epoch_time_distribution_description": "横轴表示 epoch 时长，纵轴表示该时长的 epoch 在过去 500 个 epoch 中过去出现的次数。",
319321
"average_block_time_description": "按日和周进行滑动窗口平均统计的平均区块间隔",

‎src/pages/Home/Banner/index.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useQuery } from '@tanstack/react-query'
2-
import { InfoCircledIcon } from '@radix-ui/react-icons'
2+
import { BarChartIcon } from '@radix-ui/react-icons'
3+
import { Link } from '../../../components/Link'
34
import config from '../../../config'
45
import styles from './index.module.scss'
56
import { getKnowledgeSize } from './utils'
@@ -31,13 +32,9 @@ export default () => {
3132
<div className={styles.ticker}>
3233
<NumberTicker value={size ? +size : null} />
3334
<span>CKBytes</span>
34-
<a
35-
target="_blank"
36-
rel="noopener noreferrer"
37-
href="https://talk.nervos.org/t/how-to-get-the-average-occupied-bytes-per-live-cell-in-ckb/7138/2?u=keith"
38-
>
39-
<InfoCircledIcon color="white" />
40-
</a>
35+
<Link to="/charts/knowledge-size">
36+
<BarChartIcon color="white" />
37+
</Link>
4138
</div>
4239
</div>
4340
</div>

‎src/pages/StatisticsChart/activities/KnowledgeSize.tsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import BigNumber from 'bignumber.js'
2+
import { useTranslation } from 'react-i18next'
3+
import dayjs from 'dayjs'
4+
import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/chart'
5+
import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
6+
import { ChartItem, explorerService } from '../../../services/ExplorerService'
7+
import { useCurrentLanguage } from '../../../utils/i18n'
8+
import { ChartColorConfig } from '../../../constants/common'
9+
10+
const useOption = (
11+
statisticKnowledgeSize: ChartItem.KnowledgeSize[],
12+
chartColor: ChartColorConfig,
13+
isMobile: boolean,
14+
isThumbnail = false,
15+
): echarts.EChartOption => {
16+
const { t } = useTranslation()
17+
const currentLanguage = useCurrentLanguage()
18+
const gridThumbnail = {
19+
left: '4%',
20+
right: '10%',
21+
top: '8%',
22+
bottom: '6%',
23+
containLabel: true,
24+
}
25+
const grid = {
26+
left: '3%',
27+
right: '3%',
28+
top: isMobile ? '3%' : '8%',
29+
bottom: '5%',
30+
containLabel: true,
31+
}
32+
return {
33+
color: chartColor.colors,
34+
tooltip: !isThumbnail
35+
? {
36+
trigger: 'axis',
37+
formatter: dataList => {
38+
assertIsArray(dataList)
39+
const widthSpan = (value: string) => tooltipWidth(value, currentLanguage === 'en' ? 155 : 110)
40+
let result = `<div>${tooltipColor('#333333')}${widthSpan(t('statistic.date'))} ${dataList[0].data[0]}</div>`
41+
result += `<div>${tooltipColor(chartColor.colors[0])}\
42+
${widthSpan(t('statistic.knowledge_size'))} ${handleAxis(dataList[0].data[1], 2)}</div>`
43+
return result
44+
},
45+
}
46+
: undefined,
47+
grid: isThumbnail ? gridThumbnail : grid,
48+
dataZoom: isThumbnail ? [] : DATA_ZOOM_CONFIG,
49+
xAxis: [
50+
{
51+
name: isMobile || isThumbnail ? '' : t('statistic.date'),
52+
nameLocation: 'middle',
53+
nameGap: 30,
54+
type: 'category',
55+
boundaryGap: false,
56+
splitLine: {
57+
show: false,
58+
},
59+
},
60+
],
61+
yAxis: [
62+
{
63+
position: 'left',
64+
name: isMobile || isThumbnail ? '' : t('statistic.knowledge_size'),
65+
type: 'value',
66+
scale: true,
67+
nameTextStyle: {
68+
align: 'left',
69+
},
70+
axisLine: {
71+
lineStyle: {
72+
color: chartColor.colors[0],
73+
},
74+
},
75+
axisLabel: {
76+
formatter: (value: string) => handleAxis(new BigNumber(value)),
77+
},
78+
},
79+
],
80+
series: [
81+
{
82+
name: t('statistic.knowledge_size'),
83+
type: 'line',
84+
yAxisIndex: 0,
85+
symbol: isThumbnail ? 'none' : 'circle',
86+
symbolSize: 3,
87+
},
88+
],
89+
dataset: {
90+
source: statisticKnowledgeSize.map(data => [
91+
dayjs(+data.createdAtUnixtimestamp * 1000).format('YYYY/MM/DD'),
92+
new BigNumber(data.knowledgeSize).toNumber(),
93+
]),
94+
},
95+
}
96+
}
97+
98+
const toCSV = (statisticKnowledge?: ChartItem.KnowledgeSize[]) =>
99+
statisticKnowledge ? statisticKnowledge.map(data => [data.createdAtUnixtimestamp, data.knowledgeSize]) : []
100+
101+
export const KnowledgeSizeChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
102+
const [t] = useTranslation()
103+
return (
104+
<SmartChartPage
105+
title={t('statistic.knowledge_size')}
106+
description={t('statistic.knowledge_size_description')}
107+
isThumbnail={isThumbnail}
108+
fetchData={explorerService.api.fetchStatisticKnowledgeSize}
109+
getEChartOption={useOption}
110+
toCSV={toCSV}
111+
queryKey="fetchStatisticKnowledgeSize"
112+
/>
113+
)
114+
}
115+
116+
export default KnowledgeSizeChart

‎src/pages/StatisticsChart/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DifficultyHashRateChart } from './mining/DifficultyHashRate'
66
import { DifficultyUncleRateEpochChart } from './mining/DifficultyUncleRateEpoch'
77
import { TransactionCountChart } from './activities/TransactionCount'
88
import { AddressCountChart } from './activities/AddressCount'
9+
import { KnowledgeSizeChart } from './activities/KnowledgeSize'
910
import { CellCountChart } from './activities/CellCount'
1011
import { CkbHodlWaveChart } from './activities/CkbHodlWave'
1112
import { TotalDaoDepositChart } from './nervosDao/TotalDaoDeposit'
@@ -120,6 +121,12 @@ const useChartsData = () => {
120121
path: '/charts/contract-resource-distributed',
121122
description: t('statistic.contract_resource_distributed_description'),
122123
},
124+
{
125+
title: `${t('statistic.knowledge_size')}`,
126+
chart: <KnowledgeSizeChart isThumbnail />,
127+
path: '/charts/knowledge-size',
128+
description: t('statistic.knowledge_size'),
129+
},
123130
],
124131
},
125132
{

‎src/routes/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const CellCountChart = lazy(() => import('../pages/StatisticsChart/activities/Ce
5555
const ContractResourceDistributedChart = lazy(
5656
() => import('../pages/StatisticsChart/activities/ContractResourceDistributed'),
5757
)
58+
const KnowledgeSizeChart = lazy(() => import('../pages/StatisticsChart/activities/KnowledgeSize'))
5859
const CkbHodlWaveChart = lazy(() => import('../pages/StatisticsChart/activities/CkbHodlWave'))
5960
const AddressBalanceRankChart = lazy(() => import('../pages/StatisticsChart/activities/AddressBalanceRank'))
6061
const BalanceDistributionChart = lazy(() => import('../pages/StatisticsChart/activities/BalanceDistribution'))
@@ -256,6 +257,10 @@ const routes: RouteProps[] = [
256257
path: '/charts/contract-resource-distributed',
257258
component: ContractResourceDistributedChart,
258259
},
260+
{
261+
path: '/charts/knowledge-size',
262+
component: KnowledgeSizeChart,
263+
},
259264

260265
{
261266
path: '/charts/block-time-distribution',

‎src/services/ExplorerService/fetcher.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
33
import { Dayjs } from 'dayjs'
44
import { ReactNode } from 'react'
55
import { pick } from '../../utils/object'
6-
import { toCamelcase } from '../../utils/util'
6+
import { shannonToCkb, toCamelcase } from '../../utils/util'
77
import { requesterV1, requesterV2 } from './requester'
88
import {
99
ChartItem,
@@ -243,6 +243,11 @@ export const apiFetcher = {
243243
.get(`statistics/contract_resource_distributed`)
244244
.then(res => toCamelcase<ChartItem.ContractResourceDistributed[]>(res.data)),
245245

246+
fetchStatisticKnowledgeSize: () =>
247+
v1GetUnwrappedList<ChartItem.KnowledgeSize>(`/daily_statistics/knowledge_size`).then(res =>
248+
res.map(i => ({ ...i, knowledgeSize: +shannonToCkb(i.knowledgeSize) })),
249+
),
250+
246251
fetchTransactionByHash: (hash: string, displayCells: boolean = false) =>
247252
v1GetUnwrapped<Transaction>(`transactions/${hash}?display_cells=${displayCells}`),
248253

‎src/services/ExplorerService/types.ts

+5
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,11 @@ export namespace ChartItem {
196196
address: string
197197
radio: string
198198
}
199+
200+
export interface KnowledgeSize {
201+
createdAtUnixtimestamp: string
202+
knowledgeSize: number
203+
}
199204
}
200205

201206
export interface NervosDaoDepositor {

0 commit comments

Comments
 (0)