feat: show ckb hodl wave chart

src/constants/common.ts

@@ -127,8 +127,19 @@ export enum ListPageParams {
 
 export const ChartColor = {
   areaColor: '#31EEB3',
-  colors: ['#5824FB', '#31EEB3', '#484E4E'],
-  moreColors: ['#5824FB', '#66CC99', '#FBB04C', '#525860'],
+  colors: ['#553AF3', '#333333', '#00CC9B'],
+  moreColors: [
+    '#553AF3',
+    '#333333',
+    '#00CC9B',
+    '#FF5656',
+    '#24C0F0',
+    '#BCCC00',
+    '#4661A6',
+    '#EDAF36',
+    '#E63ECB',
+    '#69E63E',
+  ],
   totalSupplyColors: ['#5824FB', '#31EEB3', '#484E4E'],
   daoColors: ['#5824FB', '#31EEB3', '#484E4E'],
   secondaryIssuanceColors: ['#484E4E', '#5824FB', '#31EEB3'],

src/locales/en.json

@@ -312,7 +312,16 @@
       "country": "Country/Region",
       "node_country_distribution": "Nodes distribution by Country/Region",
       "top_50_holders": "Top 50 Holders",
-      "rounded": "Rounded"
+      "rounded": "Rounded",
+      "24h": "24h",
+      "day_to_one_week": "1d-1w",
+      "one_week_to_one_month": "1w-1m",
+      "one_month_to_three_months": "1m-3m",
+      "three_months_to_six_months": "3m-6m",
+      "six_months_to_one_year": "6m-1y",
+      "one_year_to_three_years": "1y-3y",
+      "over_three_years": "> 3y",
+      "ckb_hodl_wave": "CKB HODL Wave"
     },
     "home": {
       "height": "Height",

src/locales/zh.json

@@ -311,7 +311,16 @@
       "country": "国家（地区）",
       "node_country_distribution": "节点国家(地区)分布图",
       "top_50_holders": "前 50 持有地址",
-      "rounded": "约等于"
+      "rounded": "约等于",
+      "24h": "24小时",
+      "day_to_one_week": "1天-1周",
+      "one_week_to_one_month": "1周-1月",
+      "one_month_to_three_months": "1月-3月",
+      "three_months_to_six_months": "3月-6月",
+      "six_months_to_one_year": "6月-1年",
+      "one_year_to_three_years": "1年-3年",
+      "over_three_years": "> 3年",
+      "ckb_hodl_wave": "CKB持有波动图"
     },
     "home": {
       "height": "高度",

src/pages/StatisticsChart/activities/CkbHodlWave.tsx

@@ -0,0 +1,326 @@
+import { useTranslation } from 'react-i18next'
+import dayjs from 'dayjs'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
+import {
+  DATA_ZOOM_CONFIG,
+  assertIsArray,
+  assertSerialsItem,
+  assertSerialsDataIsStringArrayOf9,
+  handleAxis,
+} from '../../../utils/chart'
+import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
+
+const widthSpan = (value: string, currentLanguage: SupportedLng) =>
+  tooltipWidth(value, currentLanguage === 'en' ? 125 : 80)
+
+const useTooltip = () => {
+  const { t } = useTranslation()
+  const currentLanguage = useCurrentLanguage()
+  return ({
+    seriesName,
+    data,
+    color,
+  }: SeriesItem & {
+    data: [string, string, string, string, string, string, string, string, string]
+  }): string => {
+    if (seriesName === t('statistic.24h')) {
+      return `<div>${tooltipColor(color)}${widthSpan(t('statistic.24h'), currentLanguage)} ${handleAxis(
+        data[1],
+        2,
+      )}% </div>`
+    }
+    if (seriesName === t('statistic.day_to_one_week')) {
+      return `<div>${tooltipColor(color)}${widthSpan(t('statistic.day_to_one_week'), currentLanguage)} ${handleAxis(
+        data[2],
+        2,
+      )}%</div>`
+    }
+    if (seriesName === t('statistic.one_week_to_one_month')) {
+      return `<div>${tooltipColor(color)}${widthSpan(
+        t('statistic.one_week_to_one_month'),
+        currentLanguage,
+      )} ${handleAxis(data[3], 2)}%</div>`
+    }
+    if (seriesName === t('statistic.one_month_to_three_months')) {
+      return `<div>${tooltipColor(color)}${widthSpan(
+        t('statistic.one_month_to_three_months'),
+        currentLanguage,
+      )} ${handleAxis(data[4], 2)}%</div>`
+    }
+    if (seriesName === t('statistic.three_months_to_six_months')) {
+      return `<div>${tooltipColor(color)}${widthSpan(
+        t('statistic.three_months_to_six_months'),
+        currentLanguage,
+      )} ${handleAxis(data[5], 2)}%</div>`
+    }
+    if (seriesName === t('statistic.six_months_to_one_year')) {
+      return `<div>${tooltipColor(color)}${widthSpan(
+        t('statistic.six_months_to_one_year'),
+        currentLanguage,
+      )} ${handleAxis(data[6], 2)}%</div>`
+    }
+    if (seriesName === t('statistic.one_year_to_three_years')) {
+      return `<div>${tooltipColor(color)}${widthSpan(
+        t('statistic.one_year_to_three_years'),
+        currentLanguage,
+      )} ${handleAxis(data[7], 2)}%</div>`
+    }
+    if (seriesName === t('statistic.over_three_years')) {
+      return `<div>${tooltipColor(color)}${widthSpan(t('statistic.over_three_years'), currentLanguage)} ${handleAxis(
+        data[8],
+        2,
+      )}%</div>`
+    }
+
+    return ''
+  }
+}
+
+const useOption = (
+  statisticCkbHodlWaves: ChartItem.CkbHodlWave[],
+  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: '8%',
+    bottom: '5%',
+    containLabel: true,
+  }
+  const parseTooltip = useTooltip()
+  return {
+    color: chartColor.moreColors,
+    tooltip: !isThumbnail
+      ? {
+          trigger: 'axis',
+          formatter: dataList => {
+            assertIsArray(dataList)
+            let result = `<div>${tooltipColor('#333333')}${widthSpan(t('statistic.date'), currentLanguage)}
+          ${dataList[0].data[0]}</div>`
+            dataList.forEach(data => {
+              assertSerialsItem(data)
+              assertSerialsDataIsStringArrayOf9(data)
+              result += parseTooltip(data)
+            })
+            return result
+          },
+        }
+      : undefined,
+    legend: {
+      data: isThumbnail
+        ? []
+        : [
+            {
+              name: t('statistic.24h'),
+            },
+            {
+              name: t('statistic.day_to_one_week'),
+            },
+            {
+              name: t('statistic.one_week_to_one_month'),
+            },
+            {
+              name: t('statistic.one_month_to_three_months'),
+            },
+            {
+              name: t('statistic.three_months_to_six_months'),
+            },
+            {
+              name: t('statistic.six_months_to_one_year'),
+            },
+            {
+              name: t('statistic.one_year_to_three_years'),
+            },
+            {
+              name: t('statistic.over_three_years'),
+            },
+          ],
+      selected: {
+        [t('statistic.24h')]: true,
+        [t('statistic.day_to_one_week')]: true,
+        [t('statistic.one_week_to_one_month')]: true,
+        [t('statistic.one_month_to_three_months')]: true,
+        [t('statistic.three_months_to_six_months')]: true,
+        [t('statistic.six_months_to_one_year')]: true,
+        [t('statistic.one_year_to_three_years')]: true,
+        [t('statistic.over_three_years')]: true,
+      },
+    },
+    grid: isThumbnail ? gridThumbnail : grid,
+    dataZoom: isThumbnail ? [] : DATA_ZOOM_CONFIG,
+    xAxis: [
+      {
+        name: isMobile || isThumbnail ? '' : t('statistic.date'),
+        nameLocation: 'middle',
+        nameGap: 30,
+        type: 'category',
+        boundaryGap: false,
+      },
+    ],
+    yAxis: [
+      {
+        position: 'left',
+        type: 'value',
+        max: 100,
+        axisLine: {
+          lineStyle: {
+            color: chartColor.colors[0],
+          },
+        },
+        axisLabel: {
+          formatter: (value: string) => `${value}%`,
+        },
+      },
+    ],
+    series: [
+      {
+        name: t('statistic.24h'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        symbolSize: 3,
+        stack: 'sum',
+        areaStyle: {
+          color: chartColor.colors[0],
+        },
+        lineStyle: {
+          width: 4,
+        },
+      },
+      {
+        name: t('statistic.day_to_one_week'),
+        type: 'line',
+        stack: 'sum',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[1],
+        },
+      },
+      {
+        name: t('statistic.one_week_to_one_month'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[2],
+        },
+      },
+      {
+        name: t('statistic.one_month_to_three_months'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[3],
+        },
+      },
+      {
+        name: t('statistic.three_months_to_six_months'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[4],
+        },
+      },
+      {
+        name: t('statistic.six_months_to_one_year'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[5],
+        },
+      },
+      {
+        name: t('statistic.one_year_to_three_years'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[6],
+        },
+      },
+      {
+        name: t('statistic.over_three_years'),
+        type: 'line',
+        yAxisIndex: 0,
+        symbol: isThumbnail ? 'none' : 'circle',
+        stack: 'sum',
+        symbolSize: 3,
+        areaStyle: {
+          color: chartColor.colors[7],
+        },
+      },
+    ],
+    dataset: {
+      source: statisticCkbHodlWaves.map(data => [
+        dayjs(Number(data.createdAtUnixtimestamp) * 1000).format('MM/DD/YYYY'),
+        ((data.ckbHodlWave.latestDay / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.dayToOneWeek / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.oneWeekToOneMonth / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.oneMonthToThreeMonths / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.threeMonthsToSixMonths / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.sixMonthsToOneYear / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.oneYearToThreeYears / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+        ((data.ckbHodlWave.overThreeYears / data.ckbHodlWave.totalSupply) * 100).toFixed(2),
+      ]),
+      dimensions: ['timestamp', '24h', '1d-1w', '1w-3m', '1m-3m', '3m-6m', '6m-1y', '1y-3y', '> 3y'],
+    },
+  }
+}
+
+const toCSV = (statisticCkbHodlWaves: ChartItem.CkbHodlWave[]) =>
+  statisticCkbHodlWaves
+    ? statisticCkbHodlWaves.map(data => [
+        data.createdAtUnixtimestamp,
+        data.ckbHodlWave.latestDay,
+        data.ckbHodlWave.dayToOneWeek,
+        data.ckbHodlWave.oneWeekToOneMonth,
+        data.ckbHodlWave.threeMonthsToSixMonths,
+        data.ckbHodlWave.sixMonthsToOneYear,
+        data.ckbHodlWave.oneYearToThreeYears,
+        data.ckbHodlWave.overThreeYears,
+      ])
+    : []
+
+export const CkbHodlWaveChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
+  const [t] = useTranslation()
+  return (
+    <SmartChartPage
+      title={t('statistic.ckb_hodl_wave')}
+      isThumbnail={isThumbnail}
+      fetchData={explorerService.api.fetchStatisticCkbHodlWave}
+      getEChartOption={useOption}
+      toCSV={toCSV}
+      queryKey="fetchStatisticCkbHodlWave"
+    />
+  )
+}
+
+export default CkbHodlWaveChart