Merge pull request #1297 from nervosnetwork/master

nervosnetwork · Aug 9, 2023 · 0d074ef · 0d074ef
2 parents 8647633 + 7b400fe
commit 0d074ef
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 23 deletions.
diff --git a/src/__tests__/utils/chart.test.ts b/src/__tests__/utils/chart.test.ts
@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js'
-import { handleAxis, parseInterval, handleLogGroupAxis, handleStepGroupAxis } from '../../utils/chart'
+import { handleAxis, parseInterval, handleLogGroupAxis, handleStepGroupAxis, parseNumericAbbr } from '../../utils/chart'
 
 describe('Chart tests', () => {
   it('handleAxis', async () => {
@@ -32,4 +32,16 @@ describe('Chart tests', () => {
     expect(parseInterval(239, 1)).toBe(13)
     expect(parseInterval(23289, 0)).toBe(1300)
   })
+
+  it('parseNumericAbbr', async () => {
+    expect(parseNumericAbbr(new BigNumber(102300))).toBe('102.3K')
+    expect(parseNumericAbbr(new BigNumber(12233435))).toBe('12.233435M')
+    expect(parseNumericAbbr(new BigNumber(102300), 2)).toBe('102.30K')
+    expect(parseNumericAbbr(new BigNumber(12233435), 3)).toBe('12.233M')
+    expect(parseNumericAbbr(new BigNumber(122), 2)).toBe('122.00')
+    expect(parseNumericAbbr(new BigNumber(122), 2, true)).toBe('122')
+    expect(parseNumericAbbr(new BigNumber(12233435), 0)).toBe('12M')
+    expect(parseNumericAbbr(new BigNumber(1223343500), 0)).toBe('1B')
+    expect(parseNumericAbbr(new BigNumber(1223343500), 2)).toBe('1.22B')
+  })
 })
diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
-import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
+import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
@@ -80,7 +80,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => `${handleAxis(value)}B`,
+          formatter: (value: string) => `${parseNumericAbbr(value)}`,
         },
       },
     ],

diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
-import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
+import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { fetchStatisticLiquidity } from '../../../service/http/fetcher'
@@ -36,16 +36,22 @@ const getOption = (
     color,
   }: SeriesItem & { data: [string, string, string, string] }): string => {
     if (seriesName === i18n.t('statistic.circulating_supply')) {
-      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.circulating_supply'))} ${handleAxis(
+      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.circulating_supply'))} ${parseNumericAbbr(
         data[3],
         2,
       )}</div>`
     }
     if (seriesName === i18n.t('statistic.dao_deposit')) {
-      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.dao_deposit'))} ${handleAxis(data[2], 2)}</div>`
+      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.dao_deposit'))} ${parseNumericAbbr(
+        data[2],
+        2,
+      )}</div>`
     }
     if (seriesName === i18n.t('statistic.tradable')) {
-      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.tradable'))} ${handleAxis(data[1], 2)}</div>`
+      return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.tradable'))} ${parseNumericAbbr(
+        data[1],
+        2,
+      )}</div>`
     }
     return ''
   }
@@ -102,7 +108,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => handleAxis(value),
+          formatter: (value: string) => parseNumericAbbr(value),
         },
       },
     ],

diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
-import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
+import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
@@ -12,13 +12,13 @@ const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === '
 
 const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string, string, string, string] }): string => {
   if (seriesName === i18n.t('statistic.burnt')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.burnt'))} ${handleAxis(data[3], 2)}</div>`
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.burnt'))} ${parseNumericAbbr(data[3], 2)}</div>`
   }
   if (seriesName === i18n.t('statistic.locked')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.locked'))} ${handleAxis(data[2], 2)}</div>`
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.locked'))} ${parseNumericAbbr(data[2], 2)}</div>`
   }
   if (seriesName === i18n.t('statistic.circulating_supply')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.circulating_supply'))} ${handleAxis(
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.circulating_supply'))} ${parseNumericAbbr(
       data[1],
       2,
     )}</div>`
@@ -99,7 +99,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => handleAxis(new BigNumber(value)),
+          formatter: (value: string) => parseNumericAbbr(new BigNumber(value)),
         },
       },
     ],

diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
-import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
+import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
@@ -13,13 +13,13 @@ const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === '
 
 const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string, string, string] }): string => {
   if (seriesName === i18n.t('statistic.new_dao_deposit')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.new_dao_deposit'))} ${handleAxis(
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.new_dao_deposit'))} ${parseNumericAbbr(
       data[1],
       2,
     )}</div>`
   }
   if (seriesName === i18n.t('statistic.new_dao_depositor')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.new_dao_depositor'))} ${handleAxis(
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.new_dao_depositor'))} ${parseNumericAbbr(
       data[2],
       2,
       true,
@@ -103,7 +103,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => `${handleAxis(value)}B`,
+          formatter: (value: string) => `${parseNumericAbbr(value)}`,
         },
       },
       {
@@ -120,7 +120,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => `${handleAxis(new BigNumber(value))}`,
+          formatter: (value: string) => `${parseNumericAbbr(new BigNumber(value))}`,
         },
       },
     ],

diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
-import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
+import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
@@ -13,13 +13,13 @@ const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === '
 
 const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string, string, string] }): string => {
   if (seriesName === i18n.t('statistic.total_dao_deposit')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.total_dao_deposit'))} ${handleAxis(
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.total_dao_deposit'))} ${parseNumericAbbr(
       data[1],
       2,
     )}</div>`
   }
   if (seriesName === i18n.t('statistic.total_dao_depositor')) {
-    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.total_dao_depositor'))} ${handleAxis(
+    return `<div>${tooltipColor(color)}${widthSpan(i18n.t('statistic.total_dao_depositor'))} ${parseNumericAbbr(
       data[2],
       2,
       true,
@@ -103,7 +103,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => `${handleAxis(value)}B`,
+          formatter: (value: string) => `${parseNumericAbbr(value)}`,
         },
       },
       {
@@ -120,7 +120,7 @@ const getOption = (
           },
         },
         axisLabel: {
-          formatter: (value: string) => `${handleAxis(new BigNumber(value))}`,
+          formatter: (value: string) => `${parseNumericAbbr(new BigNumber(value))}`,
         },
       },
     ],

diff --git a/src/utils/chart.ts b/src/utils/chart.ts
@@ -17,6 +17,29 @@ export const DATA_ZOOM_CONFIG = [
   },
 ]
 
+export const parseNumericAbbr = (value: BigNumber | string | number, decimal?: number, hideZero?: boolean) => {
+  const bigValue = typeof value === 'string' || typeof value === 'number' ? new BigNumber(value) : value
+  if (bigValue.isNaN() || bigValue.isZero()) return '0'
+  const kv = bigValue.dividedBy(1000)
+  const mv = kv.dividedBy(1000)
+  const bv = mv.dividedBy(1000)
+  const tv = bv.dividedBy(1000)
+
+  if (tv.isGreaterThanOrEqualTo(1)) {
+    return `${decimal !== undefined ? tv.toFixed(decimal) : tv.toFixed()}T`
+  }
+  if (bv.isGreaterThanOrEqualTo(1)) {
+    return `${decimal !== undefined ? bv.toFixed(decimal) : bv.toFixed()}B`
+  }
+  if (mv.isGreaterThanOrEqualTo(1)) {
+    return `${decimal !== undefined ? mv.toFixed(decimal) : mv.toFixed()}M`
+  }
+  if (kv.isGreaterThanOrEqualTo(1)) {
+    return `${decimal !== undefined ? kv.toFixed(decimal) : kv.toFixed()}K`
+  }
+  return `${decimal && !hideZero ? bigValue.toFixed(decimal) : bigValue.toFixed()}`
+}
+
 export const handleAxis = (value: BigNumber | string | number, decimal?: number, hideZero?: boolean) => {
   const bigValue = typeof value === 'string' || typeof value === 'number' ? new BigNumber(value) : value
   if (bigValue.isNaN() || bigValue.isZero()) return '0'