feat: add chart of knowledge size

src/locales/en.json

@@ -225,6 +225,7 @@
       "rgbpp_transaction_list": "RGB++ Transaction List",
       "transaction_count": "Transaction Count",
       "address_count": "Unique Addresses Used",
+      "knowledge_size": "Knowledge Size",
       "total_dao_deposit_depositor": "Total Nervos DAO Deposit & Accrued Total Depositors",
       "total_dao_deposit_title": "Total Deposit",
       "total_dao_deposit": "Total Deposit",
@@ -300,6 +301,7 @@
       "percent": "Percentage",
       "others": "Others",
       "address_count_description": "The total number of unique addresses used on the blockchain.",
+      "knowledge_size_description": "Bytes occupied by on-chain knowledge",
       "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.",
       "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.",
       "average_block_time_description": "Average block intervals with daily & weekly smooth window",

src/locales/zh.json

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

src/pages/Home/Banner/index.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { InfoCircledIcon } from '@radix-ui/react-icons'
+import { BarChartIcon } from '@radix-ui/react-icons'
+import { Link } from '../../../components/Link'
 import config from '../../../config'
 import styles from './index.module.scss'
 import { getKnowledgeSize } from './utils'
@@ -31,13 +32,9 @@ export default () => {
         <div className={styles.ticker}>
           <NumberTicker value={size ? +size : null} />
           <span>CKBytes</span>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://talk.nervos.org/t/how-to-get-the-average-occupied-bytes-per-live-cell-in-ckb/7138/2?u=keith"
-          >
-            <InfoCircledIcon color="white" />
-          </a>
+          <Link to="/charts/knowledge-size">
+            <BarChartIcon color="white" />
+          </Link>
         </div>
       </div>
     </div>

src/pages/StatisticsChart/activities/KnowledgeSize.tsx

@@ -0,0 +1,116 @@
+import BigNumber from 'bignumber.js'
+import { useTranslation } from 'react-i18next'
+import dayjs from 'dayjs'
+import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/chart'
+import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
+
+const useOption = (
+  statisticKnowledgeSize: ChartItem.KnowledgeSize[],
+  chartColor: ChartColorConfig,
+  isMobile: boolean,
+  isThumbnail = false,
+): echarts.EChartOption => {
+  const { t } = useTranslation()
+  const currentLanguage = useCurrentLanguage()
+  const gridThumbnail = {
+    left: '4%',
+    right: '10%',
+    top: '8%',
+    bottom: '6%',
+    containLabel: true,
+  }
+  const grid = {
+    left: '3%',
+    right: '3%',
+    top: isMobile ? '3%' : '8%',
+    bottom: '5%',
+    containLabel: true,
+  }
+  return {
+    color: chartColor.colors,
+    tooltip: !isThumbnail
+      ? {
+          trigger: 'axis',
+          formatter: dataList => {
+            assertIsArray(dataList)
+            const widthSpan = (value: string) => tooltipWidth(value, currentLanguage === 'en' ? 155 : 110)
+            let result = `<div>${tooltipColor('#333333')}${widthSpan(t('statistic.date'))} ${dataList[0].data[0]}</div>`
+            result += `<div>${tooltipColor(chartColor.colors[0])}\
+          ${widthSpan(t('statistic.knowledge_size'))} ${handleAxis(dataList[0].data[1], 2)}</div>`
+            return result
+          },
+        }
+      : undefined,
+    grid: isThumbnail ? gridThumbnail : grid,
+    dataZoom: isThumbnail ? [] : DATA_ZOOM_CONFIG,
+    xAxis: [
+      {
+        name: isMobile || isThumbnail ? '' : t('statistic.date'),
+        nameLocation: 'middle',
+        nameGap: 30,
+        type: 'category',
+        boundaryGap: false,
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        position: 'left',
+        name: isMobile || isThumbnail ? '' : t('statistic.knowledge_size'),
+        type: 'value',
+        scale: true,
+        nameTextStyle: {
+          align: 'left',
+        },
+        axisLine: {
+          lineStyle: {
+            color: chartColor.colors[0],
+          },
+        },
+        axisLabel: {
+          formatter: (value: string) => handleAxis(new BigNumber(value)),
+        },
+      },
+    ],
+    series: [
+      {
+        name: t('statistic.knowledge_size'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        symbolSize: 3,
+      },
+    ],
+    dataset: {
+      source: statisticKnowledgeSize.map(data => [
+        dayjs(+data.createdAtUnixtimestamp * 1000).format('YYYY/MM/DD'),
+        new BigNumber(data.knowledgeSize).toNumber(),
+      ]),
+    },
+  }
+}
+
+const toCSV = (statisticKnowledge?: ChartItem.KnowledgeSize[]) =>
+  statisticKnowledge ? statisticKnowledge.map(data => [data.createdAtUnixtimestamp, data.knowledgeSize]) : []
+
+export const KnowledgeSizeChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
+  const [t] = useTranslation()
+  return (
+    <SmartChartPage
+      title={t('statistic.knowledge_size')}
+      description={t('statistic.knowledge_size_description')}
+      isThumbnail={isThumbnail}
+      fetchData={explorerService.api.fetchStatisticKnowledgeSize}
+      getEChartOption={useOption}
+      toCSV={toCSV}
+      queryKey="fetchStatisticKnowledgeSize"
+    />
+  )
+}
+
+export default KnowledgeSizeChart

src/pages/StatisticsChart/index.tsx

@@ -6,6 +6,7 @@ import { DifficultyHashRateChart } from './mining/DifficultyHashRate'
 import { DifficultyUncleRateEpochChart } from './mining/DifficultyUncleRateEpoch'
 import { TransactionCountChart } from './activities/TransactionCount'
 import { AddressCountChart } from './activities/AddressCount'
+import { KnowledgeSizeChart } from './activities/KnowledgeSize'
 import { CellCountChart } from './activities/CellCount'
 import { CkbHodlWaveChart } from './activities/CkbHodlWave'
 import { TotalDaoDepositChart } from './nervosDao/TotalDaoDeposit'
@@ -120,6 +121,12 @@ const useChartsData = () => {
           path: '/charts/contract-resource-distributed',
           description: t('statistic.contract_resource_distributed_description'),
         },
+        {
+          title: `${t('statistic.knowledge_size')}`,
+          chart: <KnowledgeSizeChart isThumbnail />,
+          path: '/charts/knowledge-size',
+          description: t('statistic.knowledge_size'),
+        },
       ],
     },
     {

src/routes/index.tsx

@@ -55,6 +55,7 @@ const CellCountChart = lazy(() => import('../pages/StatisticsChart/activities/Ce
 const ContractResourceDistributedChart = lazy(
   () => import('../pages/StatisticsChart/activities/ContractResourceDistributed'),
 )
+const KnowledgeSizeChart = lazy(() => import('../pages/StatisticsChart/activities/KnowledgeSize'))
 const CkbHodlWaveChart = lazy(() => import('../pages/StatisticsChart/activities/CkbHodlWave'))
 const AddressBalanceRankChart = lazy(() => import('../pages/StatisticsChart/activities/AddressBalanceRank'))
 const BalanceDistributionChart = lazy(() => import('../pages/StatisticsChart/activities/BalanceDistribution'))
@@ -256,6 +257,10 @@ const routes: RouteProps[] = [
     path: '/charts/contract-resource-distributed',
     component: ContractResourceDistributedChart,
   },
+  {
+    path: '/charts/knowledge-size',
+    component: KnowledgeSizeChart,
+  },
 
   {
     path: '/charts/block-time-distribution',

src/services/ExplorerService/fetcher.ts

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
 import { Dayjs } from 'dayjs'
 import { ReactNode } from 'react'
 import { pick } from '../../utils/object'
-import { toCamelcase } from '../../utils/util'
+import { shannonToCkb, toCamelcase } from '../../utils/util'
 import { requesterV1, requesterV2 } from './requester'
 import {
   ChartItem,
@@ -243,6 +243,11 @@ export const apiFetcher = {
       .get(`statistics/contract_resource_distributed`)
       .then(res => toCamelcase<ChartItem.ContractResourceDistributed[]>(res.data)),
 
+  fetchStatisticKnowledgeSize: () =>
+    v1GetUnwrappedList<ChartItem.KnowledgeSize>(`/daily_statistics/knowledge_size`).then(res =>
+      res.map(i => ({ ...i, knowledgeSize: +shannonToCkb(i.knowledgeSize) })),
+    ),
+
   fetchTransactionByHash: (hash: string, displayCells: boolean = false) =>
     v1GetUnwrapped<Transaction>(`transactions/${hash}?display_cells=${displayCells}`),
 

src/services/ExplorerService/types.ts

@@ -196,6 +196,11 @@ export namespace ChartItem {
     address: string
     radio: string
   }
+
+  export interface KnowledgeSize {
+    createdAtUnixtimestamp: string
+    knowledgeSize: number
+  }
 }
 
 export interface NervosDaoDepositor {