Merge pull request #511 from oasisprotocol/ml/chart-abbreviate-numbers

Add mobile ticks
oasisprotocol · Jun 14, 2023 · c41f5b7 · c41f5b7
2 parents af8ee88 + fc0e418
commit c41f5b7
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 73 deletions.
diff --git a/.changelog/511.feature.md b/.changelog/511.feature.md
@@ -0,0 +1 @@
+Abbreviate numbers in transaction charts
diff --git a/.changelog/528.bugfix.md → .changelog/529.bugfix.md b/.changelog/528.bugfix.md → .changelog/529.bugfix.md
diff --git a/src/app/components/charts/BarChart.tsx b/src/app/components/charts/BarChart.tsx
@@ -9,6 +9,8 @@ import {
 } from 'recharts'
 import { TooltipContent, type Formatters } from './Tooltip'
 import { COLORS } from '../../../styles/theme/colors'
+import { Margin } from 'recharts/types/util/types'
+import { useTranslation } from 'react-i18next'
 
 interface BarChartProps<T extends object> extends Formatters {
   barSize?: number
@@ -19,6 +21,8 @@ interface BarChartProps<T extends object> extends Formatters {
   rounded?: boolean
   withBarBackground?: boolean
   withLabels?: boolean
+  tickMark?: boolean
+  margin?: Margin
 }
 
 const BarChartCmp = <T extends object>({
@@ -31,42 +35,60 @@ const BarChartCmp = <T extends object>({
   rounded,
   withLabels,
   withBarBackground,
-}: BarChartProps<T>) => (
-  <ResponsiveContainer width="100%">
-    <RechartsBarChart data={data} margin={{ right: 8, bottom: 0, left: 8 }}>
-      {cartesianGrid && <CartesianGrid vertical={false} stroke={COLORS.antiFlashWhite3} />}
-      {withLabels && (
-        <YAxis
-          tick={{ fill: COLORS.brandDark, strokeWidth: 0 }}
-          axisLine={false}
-          tickLine={false}
-          type="number"
-          padding={{ bottom: 20 }}
-          tickMargin={0}
+  tickMark,
+  margin,
+}: BarChartProps<T>) => {
+  const { t } = useTranslation()
+
+  return (
+    <ResponsiveContainer width="100%">
+      <RechartsBarChart data={data} margin={margin ?? { right: 8, bottom: 0, left: 8 }}>
+        {cartesianGrid && <CartesianGrid vertical={false} stroke={COLORS.antiFlashWhite3} />}
+        {withLabels && (
+          <YAxis
+            tick={{ fill: COLORS.brandDark, strokeWidth: 0 }}
+            axisLine={false}
+            tickLine={false}
+            type="number"
+            padding={{ bottom: 20 }}
+            tickMargin={0}
+            tickFormatter={tick => {
+              return tickMark
+                ? t('common.valuePair', {
+                    value: tick,
+                    formatParams: {
+                      value: {
+                        notation: 'compact',
+                      } satisfies Intl.NumberFormatOptions,
+                    },
+                  })
+                : tick
+            }}
+          />
+        )}
+        <Tooltip
+          cursor={false}
+          wrapperStyle={{ outline: 'none' }}
+          content={<TooltipContent formatters={formatters} />}
+          offset={15}
+        />
+        <Bar
+          background={
+            withBarBackground
+              ? {
+                  fill: COLORS.grayLight,
+                  radius: 20,
+                }
+              : undefined
+          }
+          dataKey={dataKey}
+          barSize={barSize}
+          fill={COLORS.denimBlue}
+          radius={rounded ? barRadius : [barRadius, barRadius, 0, 0]}
         />
-      )}
-      <Tooltip
-        cursor={false}
-        wrapperStyle={{ outline: 'none' }}
-        content={<TooltipContent formatters={formatters} />}
-        offset={15}
-      />
-      <Bar
-        background={
-          withBarBackground
-            ? {
-                fill: COLORS.grayLight,
-                radius: 20,
-              }
-            : undefined
-        }
-        dataKey={dataKey}
-        barSize={barSize}
-        fill={COLORS.denimBlue}
-        radius={rounded ? barRadius : [barRadius, barRadius, 0, 0]}
-      />
-    </RechartsBarChart>
-  </ResponsiveContainer>
-)
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}
 
 export const BarChart = memo(BarChartCmp) as typeof BarChartCmp
diff --git a/src/app/components/charts/LineChart.tsx b/src/app/components/charts/LineChart.tsx
@@ -10,6 +10,7 @@ import { Margin } from 'recharts/types/util/types'
 import { COLORS } from '../../../styles/theme/colors'
 import { memo, ReactElement } from 'react'
 import { Formatters, TooltipContent } from './Tooltip'
+import { useTranslation } from 'react-i18next'
 
 interface LineChartProps<T extends object> extends Formatters {
   cartesianGrid?: boolean
@@ -20,6 +21,7 @@ interface LineChartProps<T extends object> extends Formatters {
   tickMargin?: number
   tooltipActiveDotRadius?: number
   withLabels?: boolean
+  tickMark?: boolean
 }
 
 const LineChartCmp = <T extends object>({
@@ -32,40 +34,57 @@ const LineChartCmp = <T extends object>({
   tickMargin = 0,
   tooltipActiveDotRadius = 5,
   withLabels,
-}: LineChartProps<T>): ReactElement => (
-  <ResponsiveContainer width="100%">
-    <RechartsLineChart data={data} margin={margin}>
-      {cartesianGrid && <CartesianGrid vertical={false} stroke={COLORS.antiFlashWhite3} />}
-      <Line
-        type="monotone"
-        dataKey={dataKey}
-        stroke={COLORS.brandDark}
-        strokeWidth={strokeWidth}
-        dot={false}
-        activeDot={{
-          r: tooltipActiveDotRadius,
-          fill: COLORS.brandDark,
-          strokeWidth: tooltipActiveDotRadius * 4,
-          stroke: '#0000621A',
-        }}
-      />
-      <YAxis
-        domain={withLabels ? [0, 'auto'] : ['dataMin', 'dataMax']}
-        axisLine={false}
-        tickLine={false}
-        mirror={!withLabels}
-        tick={withLabels ? { fill: COLORS.brandDark, strokeWidth: 0 } : false}
-        type="number"
-        tickMargin={tickMargin}
-      />
-      <Tooltip
-        cursor={false}
-        wrapperStyle={{ outline: 'none' }}
-        content={<TooltipContent formatters={formatters} />}
-        offset={15}
-      />
-    </RechartsLineChart>
-  </ResponsiveContainer>
-)
+  tickMark,
+}: LineChartProps<T>): ReactElement => {
+  const { t } = useTranslation()
+
+  return (
+    <ResponsiveContainer width="100%">
+      <RechartsLineChart data={data} margin={margin}>
+        {cartesianGrid && <CartesianGrid vertical={false} stroke={COLORS.antiFlashWhite3} />}
+        <Line
+          type="monotone"
+          dataKey={dataKey}
+          stroke={COLORS.brandDark}
+          strokeWidth={strokeWidth}
+          dot={false}
+          activeDot={{
+            r: tooltipActiveDotRadius,
+            fill: COLORS.brandDark,
+            strokeWidth: tooltipActiveDotRadius * 4,
+            stroke: '#0000621A',
+          }}
+        />
+        <YAxis
+          domain={withLabels ? [0, 'auto'] : ['dataMin', 'dataMax']}
+          axisLine={false}
+          tickLine={false}
+          mirror={!withLabels}
+          tick={withLabels ? { fill: COLORS.brandDark, strokeWidth: 0 } : false}
+          type="number"
+          tickMargin={tickMargin}
+          tickFormatter={tick => {
+            return tickMark
+              ? t('common.valuePair', {
+                  value: tick,
+                  formatParams: {
+                    value: {
+                      notation: 'compact',
+                    } satisfies Intl.NumberFormatOptions,
+                  },
+                })
+              : tick
+          }}
+        />
+        <Tooltip
+          cursor={false}
+          wrapperStyle={{ outline: 'none' }}
+          content={<TooltipContent formatters={formatters} />}
+          offset={15}
+        />
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
 
 export const LineChart = memo(LineChartCmp) as typeof LineChartCmp
diff --git a/src/app/pages/DashboardPage/TotalTransactions.tsx b/src/app/pages/DashboardPage/TotalTransactions.tsx
@@ -9,8 +9,10 @@ import { DurationPills } from './DurationPills'
 import { CardHeaderWithResponsiveActions } from './CardHeaderWithResponsiveActions'
 import { ChartDuration, cumulativeSum } from '../../utils/chart-utils'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 export const TotalTransactions: FC = () => {
+  const { isMobile } = useScreenSize()
   const { t } = useTranslation()
   const [chartDuration, setChartDuration] = useState<ChartDuration>(ChartDuration.MONTH)
   const statsParams = durationToQueryParams[chartDuration]
@@ -42,7 +44,7 @@ export const TotalTransactions: FC = () => {
             strokeWidth={3}
             dataKey="tx_volume"
             data={buckets}
-            margin={{ left: 16, right: 0 }}
+            margin={{ left: isMobile ? 0 : 16, right: 0 }}
             tickMargin={16}
             withLabels
             formatters={{
@@ -60,6 +62,7 @@ export const TotalTransactions: FC = () => {
                   timestamp: new Date(value),
                 }),
             }}
+            tickMark={isMobile}
           />
         )}
       </CardContent>

diff --git a/src/app/pages/DashboardPage/TransactionsStats.tsx b/src/app/pages/DashboardPage/TransactionsStats.tsx
@@ -13,8 +13,10 @@ import { DurationPills } from './DurationPills'
 import { CardHeaderWithResponsiveActions } from './CardHeaderWithResponsiveActions'
 import { ChartDuration } from '../../utils/chart-utils'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 export const TransactionsStats: FC = () => {
+  const { isMobile } = useScreenSize()
   const { t } = useTranslation()
   const [chartDuration, setChartDuration] = useState<ChartDuration>(ChartDuration.MONTH)
   const statsParams = durationToQueryParams[chartDuration]
@@ -65,6 +67,8 @@ export const TransactionsStats: FC = () => {
                 }),
             }}
             withLabels
+            tickMark={isMobile}
+            margin={{ left: isMobile ? -16 : 8, right: 8 }}
           />
         )}
       </CardContent>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -84,7 +84,8 @@
     "paraTimeOnline": "ParaTime Online",
     "paraTimeOutOfDate": "ParaTime Out of date",
     "mainnet": "Mainnet",
-    "testnet": "Testnet"
+    "testnet": "Testnet",
+    "valuePair": "{{value, number}}"
   },
   "nodes": {
     "title": "Active nodes",