feat: compact format tech tree

src/app/tools/tank-performance/components/Info.tsx

@@ -4,11 +4,11 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
 import { use } from 'react';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 export function Info() {
   const awaitedAverageDefinitions = use(averageDefinitions);
-  const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
   const ratio = useAveragesExclusionRatio();
   const samples = ratio * awaitedAverageDefinitions.samples.d_120;
 
@@ -19,9 +19,9 @@ export function Info() {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Career stats based on {numberFormat.format(Math.round(samples))}{' '}
-          players with at least 5K career battles and 1 battle in the past 120
-          days; updated daily.
+          Career stats based on {formatCompact(Math.round(samples))} players
+          with at least 5K career battles and 1 battle in the past 120 days;
+          updated daily.
         </Callout.Text>
       </Callout.Root>
     </Flex>

src/app/tools/tank-performance/components/TankRow.tsx

@@ -3,6 +3,7 @@ import { memo, use } from 'react';
 import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 interface TankRowProps {
@@ -13,7 +14,6 @@ export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const awaitedAverageDefinitions = use(averageDefinitions);
     const averages = awaitedAverageDefinitions.averages[tank.id];
-    const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
     const ratio = useAveragesExclusionRatio();
 
     return (
@@ -24,10 +24,10 @@ export const TankRow = memo<TankRowProps>(
           {((averages.mu.wins / averages.mu.battles) * 100).toFixed(1)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(Math.round(ratio * averages.samples.d_30))}
+          {formatCompact(Math.round(ratio * averages.samples.d_30))}
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(
+          {formatCompact(
             Math.round(ratio * averages.mu.battles * averages.samples.total),
           )}
         </Table.Cell>

src/app/tools/tank-performance/components/TierBreakdown.tsx

@@ -12,13 +12,13 @@ import {
   Tier,
 } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { nivoTheme } from '../../../../core/nivo/theme';
 import strings from '../../../../lang/en-US.json';
 
 export function TierBreakdown() {
   const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
   const awaitedTankDefinitions = use(tankDefinitions);
-  const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
 
   return (
     <Flex justify="center" py="6">
@@ -57,14 +57,14 @@ export function TierBreakdown() {
             keys={[...TANK_CLASSES].reverse()}
             indexBy="tier"
             colors={{ scheme: 'dark2' }}
-            label={(d) => numberFormat.format(d.value as number)}
+            label={(d) => formatCompact(d.value as number)}
             margin={{ right: 96, bottom: 20, left: 40 }}
             legendLabel={(d) =>
               strings.common.tank_class_short[d.id as TankClass]
             }
             axisLeft={{
               tickSize: 0,
-              format: (value) => numberFormat.format(value as number),
+              format: (value) => formatCompact(value as number),
             }}
             axisBottom={{ tickSize: 0 }}
             legends={[

src/app/tools/tank-performance/components/Total.tsx

@@ -5,6 +5,7 @@ import {
   AverageDefinitionsAllStats,
   AverageDefinitionsEntryWithId,
 } from '../../../../core/blitzkit/averageDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 interface TotalProps {
@@ -14,7 +15,6 @@ interface TotalProps {
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
     const ratio = useAveragesExclusionRatio();
-    const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
     const sum = useCallback(
       (slice: (tank: AverageDefinitionsAllStats) => number) => {
         return tanks.reduce(
@@ -45,12 +45,8 @@ export const Total = memo<TotalProps>(
       <Table.Row>
         <StickyRowHeaderCell>Total</StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
-        <Table.Cell align="center">
-          {numberFormat.format(ratio * players)}
-        </Table.Cell>
-        <Table.Cell align="center">
-          {numberFormat.format(ratio * battles)}
-        </Table.Cell>
+        <Table.Cell align="center">{formatCompact(ratio * players)}</Table.Cell>
+        <Table.Cell align="center">{formatCompact(ratio * battles)}</Table.Cell>
         <Table.Cell align="center">
           {Math.round(damage).toLocaleString()}
         </Table.Cell>