Add mobile ticks

package.json

@@ -51,6 +51,7 @@
     "@ethereumjs/util": "8.0.5",
     "@fontsource-variable/figtree": "^5.0.4",
     "@fontsource-variable/roboto-mono": "^5.0.4",
+    "@formatjs/intl-numberformat": "^8.7.0",
     "@metamask/jazzicon": "2.0.0",
     "@mui/base": "5.0.0-alpha.119",
     "@mui/icons-material": "5.11.11",

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 { intlNumberFormat } from '../../utils/numberFormatter'
+import { Margin } from 'recharts/types/util/types'
 
 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,9 +35,11 @@ const BarChartCmp = <T extends object>({
   rounded,
   withLabels,
   withBarBackground,
+  tickMark,
+  margin,
 }: BarChartProps<T>) => (
   <ResponsiveContainer width="100%">
-    <RechartsBarChart data={data} margin={{ right: 8, bottom: 0, left: 8 }}>
+    <RechartsBarChart data={data} margin={margin ?? { right: 8, bottom: 0, left: 8 }}>
       {cartesianGrid && <CartesianGrid vertical={false} stroke={COLORS.antiFlashWhite3} />}
       {withLabels && (
         <YAxis
@@ -43,6 +49,9 @@ const BarChartCmp = <T extends object>({
           type="number"
           padding={{ bottom: 20 }}
           tickMargin={0}
+          tickFormatter={tick => {
+            return tickMark ? intlNumberFormat(tick) : tick
+          }}
         />
       )}
       <Tooltip

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 { intlNumberFormat } from '../../utils/numberFormatter'
 
 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,6 +34,7 @@ const LineChartCmp = <T extends object>({
   tickMargin = 0,
   tooltipActiveDotRadius = 5,
   withLabels,
+  tickMark,
 }: LineChartProps<T>): ReactElement => (
   <ResponsiveContainer width="100%">
     <RechartsLineChart data={data} margin={margin}>
@@ -57,6 +60,9 @@ const LineChartCmp = <T extends object>({
         tick={withLabels ? { fill: COLORS.brandDark, strokeWidth: 0 } : false}
         type="number"
         tickMargin={tickMargin}
+        tickFormatter={tick => {
+          return tickMark ? intlNumberFormat(tick) : tick
+        }}
       />
       <Tooltip
         cursor={false}

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>

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>

src/app/utils/numberFormatter.ts

@@ -0,0 +1,6 @@
+const numberFormat = new Intl.NumberFormat('en-US', {
+  // Polyfilled with @formatjs/intl-numberformat
+  notation: 'compact',
+})
+
+export const intlNumberFormat = (number: number) => numberFormat.format(number)

src/index.tsx

@@ -10,6 +10,9 @@ import './styles/index.css'
 import './locales/i18n'
 import Axios from 'axios'
 
+// ES2020 Intl.NumberFormatOptions Polyfill
+import '@formatjs/intl-numberformat/polyfill'
+
 Axios.defaults.baseURL = process.env.REACT_APP_API
 
 const queryClient = new QueryClient({

yarn.lock

@@ -1661,6 +1661,30 @@
   resolved "https://registry.yarnpkg.com/@fontsource-variable/roboto-mono/-/roboto-mono-5.0.4.tgz#d570b415d1a3fbbafabe5d457ffb2f558955c1c9"
   integrity sha512-v62JBsvC79OMG4/V4dEbluLJ6Bi6dmsmq/qfGBa7hNTIBS6wrKqZUaP5QJhYHwgTSYtauBGMAjUY1R37GR+NNQ==
 
+"@formatjs/[email protected]":
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz#2ce191a3bde4c65c6684e03fa247062a4a294b9e"
+  integrity sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.4.0"
+    tslib "^2.4.0"
+
+"@formatjs/[email protected]":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz#63bbc37a7c3545a1bf1686072e51d9a3aed98d6b"
+  integrity sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/intl-numberformat@^8.7.0":
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-8.7.0.tgz#981bf87c13a08fcf72616f024805c6ecf6f54fd2"
+  integrity sha512-LuJXld4hjVKXUAGjtqz0t4DhZJDI0fkIAUHKrhIyb0qomudd/G0v9GzCnOLt6pQ93OBFTHmqzp1qN5n1tJJ4sg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.17.0"
+    "@formatjs/intl-localematcher" "0.4.0"
+    tslib "^2.4.0"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"