feat: show contract_resource_distributed chart

Signed-off-by: Miles Zhang <[email protected]>

src/config.ts

@@ -1,6 +1,6 @@
 export default {
   API_URL: process.env.REACT_APP_API_URL || 'http://localhost:3000',
   CHAIN_TYPE: process.env.REACT_APP_CHAIN_TYPE || 'mainnet',
-  BASE_URL: process.env.REACT_BASE_URL || 'explorer.nervos.org/',
+  BASE_URL: process.env.REACT_APP_BASE_URL || 'explorer.nervos.org/',
   BACKUP_NODES: process.env.REACT_APP_BACKUP_NODES?.split(',') || [],
 }

src/locales/en.json

@@ -297,7 +297,10 @@
       "nominal_rpc_description": "The nominal compensation rate provided by DAO when there is no burnt portion in the secondary issuance. The real compensation rate is always higher than the nominal compensation rate.",
       "secondary_issuance_description": "The secondary issuance is automatically divided into three parts, the compensation, the mining reward and the treasury (burnt by now). They are proportional to the DAO deposit, the storage occupation, and the rest of CKBytes.",
       "inflation_rate_description": "Nominal inflation rate: the inflation introduced by the the primary issuance and the secondary issuance. \nNominal APC: the anti-dilution compensation rate of Nervos DAO.\nReal inflation rate: the compound inflation rate that nominal inflation rate minus the nominal APC, which is gradually to zero.",
-      "node_count_in_total": "in total"
+      "node_count_in_total": "in total",
+      "ckb_amount": "CKB Amount",
+      "contract_resource_distributed": "Contract Resource Distributed",
+      "contract_resource_distributed_description": "The x axis is contract's unique address count, the y axis is the contract's ckb amount, the symbol size is the contract's transaction count."
     },
     "home": {
       "height": "Height",

src/locales/zh.json

@@ -296,7 +296,10 @@
       "nominal_rpc_description": "二级发行全部释放到市场上时的 DAO 名义补偿率，该数值会比实际补偿率偏低。",
       "secondary_issuance_description": "二级发行会被自动分成三部分，包括补偿、矿工奖励和财政部（目前为销毁）。他们分别与 DAO 存款量、存储占用量和其余部分的 CKB 成正比。",
       "inflation_rate_description": "名义通胀率：由一二级增发直接造成的增发比例\n名义补偿率：Nervos DAO 提供的反稀释补偿率\n实际通胀率：考虑补偿率下的实际通胀率，逐渐趋向于0",
-      "node_count_in_total": "总共"
+      "node_count_in_total": "总共",
+      "ckb_amount": "CKB 数量",
+      "contract_resource_distributed": "合约资源分布图",
+      "contract_resource_distributed_description": "横轴表示合约的唯一地址数量, 纵轴是合约的 CKB 数量, 图标大小代表合约的交易数量"
     },
     "home": {
       "height": "高度",

src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx

@@ -0,0 +1,104 @@
+import { useTranslation } from 'react-i18next'
+import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
+import { SmartChartPage } from '../common'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
+import config from '../../../config'
+
+const useOption = (
+  statisticContractResourceDistributed: ChartItem.ContractResourceDistributed[],
+  chartColor: ChartColorConfig,
+  isMobile: boolean,
+  isThumbnail = false,
+): echarts.EChartOption => {
+  const { t } = useTranslation()
+  const gridThumbnail = {
+    left: '4%',
+    right: '10%',
+    top: '8%',
+    bottom: '6%',
+    containLabel: true,
+  }
+  const grid = {
+    left: '3%',
+    right: '3%',
+    top: '8%',
+    bottom: '5%',
+    containLabel: true,
+  }
+  return {
+    color: chartColor.colors,
+    grid: isThumbnail ? gridThumbnail : grid,
+    dataZoom: isThumbnail ? [] : DATA_ZOOM_CONFIG,
+    xAxis: [
+      {
+        name: isMobile || isThumbnail ? '' : t('statistic.address_count'),
+        nameLocation: 'middle',
+        nameGap: 30,
+        type: 'log',
+        splitLine: { show: false },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'log',
+        splitLine: { show: false },
+        name: isMobile || isThumbnail ? '' : t('statistic.ckb_amount'),
+      },
+    ],
+    tooltip: {
+      position: 'top',
+      enterable: true,
+      formatter: (params: any) => {
+        return `<a href=https://${config.BASE_URL}script/${params.value[3]}/${params.value[5]} target=_blank>${
+          params.value[4] || params.value[3]
+        }</a>`
+      },
+    },
+    series: [
+      {
+        type: 'scatter',
+        symbol: 'circle',
+        symbolSize: (data: number[]) => {
+          const ratio = isThumbnail ? 500 : 50
+          const min = isThumbnail ? 1 : 10
+          const size = Math.sqrt(data[2]) / ratio
+          return size < min ? min : size
+        },
+      },
+    ],
+    dataset: {
+      source: statisticContractResourceDistributed
+        .filter(item => item.addressCount !== '0' || item.ckbAmount !== '0')
+        .map(data => [data.addressCount, data.ckbAmount, data.txCount, data.codeHash, data.name, data.hashType]),
+    },
+  }
+}
+
+const toCSV = (statisticContractResourceDistributed: ChartItem.ContractResourceDistributed[]) =>
+  statisticContractResourceDistributed
+    ? statisticContractResourceDistributed.map(data => [
+        data.name,
+        data.codeHash,
+        data.hashType,
+        data.txCount,
+        data.ckbAmount,
+        data.addressCount,
+      ])
+    : []
+
+export const ContractResourceDistributedChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
+  const [t] = useTranslation()
+  return (
+    <SmartChartPage
+      title={t('statistic.contract_resource_distributed')}
+      isThumbnail={isThumbnail}
+      fetchData={explorerService.api.fetchContractResourceDistributed}
+      getEChartOption={useOption}
+      toCSV={toCSV}
+      queryKey="fetchContractResourceDistributed"
+    />
+  )
+}
+
+export default ContractResourceDistributedChart

src/pages/StatisticsChart/index.tsx

@@ -14,6 +14,7 @@ import { DifficultyChart } from './mining/Difficulty'
 import { HashRateChart } from './mining/HashRate'
 import { UncleRateChart } from './mining/UncleRate'
 import { BalanceDistributionChart } from './activities/BalanceDistribution'
+import { ContractResourceDistributedChart } from './activities/ContractResourceDistributed'
 import { TxFeeHistoryChart } from './activities/TxFeeHistory'
 import { BlockTimeDistributionChart } from './block/BlockTimeDistribution'
 import { EpochTimeDistributionChart } from './block/EpochTimeDistribution'
@@ -145,7 +146,7 @@ const useChartsData = () => {
           title: `${t('statistic.address_count')}`,
           chart: <AddressCountChart isThumbnail />,
           path: '/charts/address-count',
-          description: t('statistic.address_count_description'),
+          description: t('statistic.address_count_description_description'),
         },
         {
           title: t('statistic.cell_count'),
@@ -170,6 +171,12 @@ const useChartsData = () => {
           path: '/charts/tx-fee-history',
           description: t('statistic.tx_fee_description'),
         },
+        {
+          title: `${t('statistic.contract_resource_distributed')}`,
+          chart: <ContractResourceDistributedChart isThumbnail />,
+          path: '/charts/contract-resource-distributed',
+          description: t('statistic.contract_resource_distributed_description'),
+        },
       ],
     },
     {

src/routes/index.tsx

@@ -44,6 +44,9 @@ const MinerVersionDistributionChart = lazy(() => import('../pages/StatisticsChar
 const TransactionCountChart = lazy(() => import('../pages/StatisticsChart/activities/TransactionCount'))
 const AddressCountChart = lazy(() => import('../pages/StatisticsChart/activities/AddressCount'))
 const CellCountChart = lazy(() => import('../pages/StatisticsChart/activities/CellCount'))
+const ContractResourceDistributedChart = lazy(
+  () => import('../pages/StatisticsChart/activities/ContractResourceDistributed'),
+)
 const AddressBalanceRankChart = lazy(() => import('../pages/StatisticsChart/activities/AddressBalanceRank'))
 const BalanceDistributionChart = lazy(() => import('../pages/StatisticsChart/activities/BalanceDistribution'))
 const TxFeeHistoryChart = lazy(() => import('../pages/StatisticsChart/activities/TxFeeHistory'))
@@ -207,6 +210,11 @@ const routes: RouteProps[] = [
     path: '/charts/tx-fee-history',
     component: TxFeeHistoryChart,
   },
+  {
+    path: '/charts/contract-resource-distributed',
+    component: ContractResourceDistributedChart,
+  },
+
   {
     path: '/charts/block-time-distribution',
     component: BlockTimeDistributionChart,

src/services/ExplorerService/fetcher.ts

@@ -134,6 +134,10 @@ export const apiFetcher = {
     }),
 
   fetchTransactionRaw: (hash: string) => requesterV2.get<unknown>(`transactions/${hash}/raw`).then(res => res.data),
+  fetchContractResourceDistributed: () =>
+    requesterV2
+      .get(`statistics/contract_resource_distributed`)
+      .then(res => toCamelcase<ChartItem.ContractResourceDistributed[]>(res.data)),
 
   fetchTransactionByHash: (hash: string, displayCells: boolean = false) =>
     v1GetUnwrapped<Transaction>(`transactions/${hash}?display_cells=${displayCells}`),

src/services/ExplorerService/types.ts

@@ -86,6 +86,15 @@ export namespace ChartItem {
     createdAtUnixtimestamp: string
   }
 
+  export interface ContractResourceDistributed {
+    name: string
+    codeHash: string
+    hashType: string
+    addressCount: string
+    ckbAmount: string
+    txCount: string
+  }
+
   export interface DifficultyUncleRateEpoch {
     epochNumber: string
     epochTime: string