feat: scaling

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

@@ -2,47 +2,47 @@ import { Table } from '@radix-ui/themes';
 
 export function Header() {
   return (
-    <Table.Header>
+    <Table.Header style={{ whiteSpace: 'nowrap' }}>
       <Table.Row align="end">
         <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Winrate
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
-          Players
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
+          Players (30d)
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Damage
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Survival
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           XP
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Kills
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Spots
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Accuracy
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Shots
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
           Hits
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
-          Damage ratio
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
+          Dmg. ratio
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
-          Damage received
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
+          Dmg. taken
         </Table.ColumnHeaderCell>
-        <Table.ColumnHeaderCell width="0" justify="center">
-          Capture points
+        <Table.ColumnHeaderCell width="0" justify="center" minWidth="0px">
+          Cap points
         </Table.ColumnHeaderCell>
       </Table.Row>
     </Table.Header>

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

@@ -9,6 +9,7 @@ import { discoveredIdsDefinitions } from '../../../../core/blitzkit/discoveredId
 export function Info() {
   const awaitedAverageDefinitions = use(averageDefinitions);
   const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
+  const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
   const ratio =
     awaitedDiscoveredIdsDefinitions.count /
     awaitedAverageDefinitions.scanned_players;
@@ -20,13 +21,12 @@ export function Info() {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Based on{' '}
-          {Math.round(
-            ratio * awaitedAverageDefinitions.sampled_players,
-          ).toLocaleString()}{' '}
-          players with at least 5,000 career battles and 1 battle in the past
-          120 days. {awaitedDiscoveredIdsDefinitions.count.toLocaleString()}{' '}
-          scanned in total. Updated daily.
+          Career stats based on{' '}
+          {numberFormat.format(
+            Math.round(ratio * awaitedAverageDefinitions.sampled_players),
+          )}{' '}
+          players with at least 5K career battles and 1 battle in the past 30
+          days. Updated daily.
         </Callout.Text>
       </Callout.Root>
     </Flex>

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

@@ -1,7 +1,8 @@
 import { Table } from '@radix-ui/themes';
-import { memo, use, useMemo } from 'react';
+import { memo, use } from 'react';
 import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { discoveredIdsDefinitions } from '../../../../core/blitzkit/discoveredIdDefinitions';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
 
 interface TankRowProps {
@@ -10,46 +11,72 @@ interface TankRowProps {
 
 export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
+    const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
     const awaitedAverageDefinitions = use(averageDefinitions);
     const averages = awaitedAverageDefinitions.averages[tank.id];
-    const numberFormat = useMemo(
-      () => Intl.NumberFormat(undefined, { notation: 'compact' }),
-      [],
-    );
+    const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
+    const ratio =
+      awaitedDiscoveredIdsDefinitions.count /
+      awaitedAverageDefinitions.scanned_players;
 
     return (
       <Table.Row>
         <TankRowHeaderCell tank={tank} />
         <Table.Cell align="center">
-          {Math.round(averages.mu.wins * 100)}%
+          {Math.round((averages.mu.wins / averages.mu.battles) * 100)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(Math.round(averages.samples))}
+          {numberFormat.format(Math.round(ratio * averages.samples))}
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(averages.mu.damage_dealt).toLocaleString()}
+          {Math.round(
+            averages.mu.damage_dealt / averages.mu.battles,
+          ).toLocaleString()}
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(averages.mu.survived_battles * 100)}%
+          {Math.round(
+            (averages.mu.survived_battles / averages.mu.battles) * 100,
+          )}
+          %
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(averages.mu.xp).toLocaleString()}
-        </Table.Cell>
-        <Table.Cell align="center">{averages.mu.frags.toFixed(2)}</Table.Cell>
-        <Table.Cell align="center">{averages.mu.spotted.toFixed(2)}</Table.Cell>
-        <Table.Cell align="center">
-          {Math.round((averages.mu.hits / averages.mu.shots) * 100)}%
-        </Table.Cell>
-        <Table.Cell align="center">{averages.mu.shots.toFixed(1)}</Table.Cell>
-        <Table.Cell align="center">{averages.mu.hits.toFixed(1)}</Table.Cell>
-        <Table.Cell align="center">
-          {(averages.mu.damage_dealt / averages.mu.damage_received).toFixed(2)}
+          {Math.round(averages.mu.xp / averages.mu.battles).toLocaleString()}
         </Table.Cell>
         <Table.Cell align="center">
-          {Math.round(averages.mu.damage_received).toLocaleString()}
+          {(averages.mu.frags / averages.mu.battles).toFixed(2)}
         </Table.Cell>
         <Table.Cell align="center">
-          {averages.mu.capture_points.toFixed(2)}
+          {(averages.mu.spotted / averages.mu.battles).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(
+            (averages.mu.hits /
+              averages.mu.battles /
+              (averages.mu.shots / averages.mu.battles)) *
+              100,
+          )}
+          %
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.shots / averages.mu.battles).toFixed(1)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.hits / averages.mu.battles).toFixed(1)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(
+            averages.mu.damage_dealt /
+            averages.mu.battles /
+            (averages.mu.damage_received / averages.mu.battles)
+          ).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(
+            averages.mu.damage_received / averages.mu.battles,
+          ).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.capture_points / averages.mu.battles).toFixed(2)}
         </Table.Cell>
       </Table.Row>
     );

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

@@ -11,7 +11,10 @@ export function Tanks() {
   const awaitedTankDefinitions = use(tankDefinitions);
   const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
   const tankAverages = useMemo(
-    () => awaitedAverageDefinitionsArray.sort((a, b) => b.mu.wins - a.mu.wins),
+    () =>
+      awaitedAverageDefinitionsArray.sort(
+        (a, b) => b.mu.wins / b.mu.battles - a.mu.wins / a.mu.battles,
+      ),
     [],
   );