feat: start of charts

packages/website/src/components/Charts/ChartsControl.tsx

@@ -0,0 +1,32 @@
+import { Flex, Select, Text } from '@radix-ui/themes';
+import { Charts, type ChartsPeriod } from '../../stores/charts';
+
+export function ChartsControl() {
+  const period = Charts.use((state) => state.period);
+  const mutateCharts = Charts.useMutation();
+
+  return (
+    <Flex justify="center" align="center" gap="2">
+      <Text>Player count</Text>
+      <Select.Root
+        value={period}
+        onValueChange={(period) => {
+          mutateCharts((draft) => {
+            draft.period = period as ChartsPeriod;
+          });
+        }}
+      >
+        <Select.Trigger />
+        <Select.Content>
+          <Select.Item value="total">Total</Select.Item>
+          <Select.Item value="d_120">Past 120 days</Select.Item>
+          <Select.Item value="d_90">Past 90 days</Select.Item>
+          <Select.Item value="d_60">Past 60 days</Select.Item>
+          <Select.Item value="d_30">This month</Select.Item>
+          <Select.Item value="d_7">This week</Select.Item>
+          <Select.Item value="d_1">Yesterday</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </Flex>
+  );
+}

packages/website/src/components/Charts/PlayersInPeriod.tsx

@@ -0,0 +1,99 @@
+import {
+  TANK_CLASSES,
+  TIERS,
+  TIER_ROMAN_NUMERALS,
+  TankClass,
+  formatCompact,
+} from '@blitzkit/core';
+import strings from '@blitzkit/core/lang/en-US.json';
+import { useStore } from '@nanostores/react';
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
+import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
+import { filterTank } from '../../core/blitzkit/filterTank';
+import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
+import { Charts } from '../../stores/charts';
+import { $tankFilters } from '../../stores/tankFilters';
+import { ThemedBar } from '../Nivo/ThemedBar';
+
+const [tankDefinitions, averageDefinitions] = await Promise.all([
+  awaitableTankDefinitions,
+  awaitableAverageDefinitions,
+]);
+
+const averageDefinitionsArray = Object.entries(averageDefinitions.averages);
+
+export function PlayersInPeriod() {
+  const period = Charts.use((state) => state.period);
+  const ratio = useAveragesExclusionRatio();
+  const filters = useStore($tankFilters);
+  const data = TIERS.map((tier) => {
+    const players: Record<TankClass, number> = {
+      0: 0,
+      1: 0,
+      2: 0,
+      3: 0,
+    };
+
+    averageDefinitionsArray.forEach(([idString, entry]) => {
+      const id = Number(idString);
+      const tank = tankDefinitions.tanks[id];
+
+      if (
+        tank === undefined ||
+        tank.tier !== tier ||
+        !filterTank(filters, tank)
+      ) {
+        return;
+      }
+
+      players[tank.class] += entry.samples[period] * ratio;
+    });
+
+    const bar: Record<string, number | string> = {
+      tier: TIER_ROMAN_NUMERALS[tier],
+    };
+
+    TANK_CLASSES.forEach((c) => {
+      bar[strings.common.tank_class_short[c]] = players[c];
+    });
+
+    return bar;
+  });
+
+  return (
+    <Flex direction="column" gap="4">
+      <Heading align="center">Players by tier & class</Heading>
+      <Box height="25rem">
+        <ThemedBar
+          data={data}
+          keys={TANK_CLASSES.map((c) => strings.common.tank_class_short[c])}
+          indexBy="tier"
+          margin={{ right: 90, bottom: 50, left: 90 }}
+          axisBottom={{
+            legend: 'Tier',
+            legendPosition: 'middle',
+            legendOffset: 32,
+          }}
+          axisLeft={{
+            legend: 'Players',
+            legendPosition: 'middle',
+            legendOffset: -60,
+            format: formatCompact,
+          }}
+          legends={[
+            {
+              dataFrom: 'keys',
+              anchor: 'bottom-right',
+              direction: 'column',
+              translateX: 120,
+              itemWidth: 100,
+              itemHeight: 20,
+            },
+          ]}
+          valueFormat={formatCompact}
+        />
+      </Box>
+    </Flex>
+  );
+}

packages/website/src/components/Performance/Charts/components/PlayersByTierAndClass.tsx

@@ -1,100 +0,0 @@
-import {
-  formatCompact,
-  TANK_CLASSES,
-  TankClass,
-  TIER_ROMAN_NUMERALS,
-  TIERS,
-} from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
-import { useStore } from '@nanostores/react';
-import { Box, Flex, Heading } from '@radix-ui/themes';
-import { awaitableAverageDefinitions } from '../../../../core/awaitables/averageDefinitions';
-import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
-import { filterTank } from '../../../../core/blitzkit/filterTank';
-import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
-import { $tankFilters } from '../../../../stores/tankFilters';
-import { TankPerformanceEphemeral } from '../../../../stores/tankPerformanceEphemeral';
-import { ThemedBar } from '../../../Nivo/ThemedBar';
-
-const [tankDefinitions, averageDefinitions] = await Promise.all([
-  awaitableTankDefinitions,
-  awaitableAverageDefinitions,
-]);
-
-const averageDefinitionsArray = Object.entries(averageDefinitions.averages);
-
-export function PlayersByTierAndClass() {
-  const playerCountPeriod = TankPerformanceEphemeral.use(
-    (state) => state.playerCountPeriod,
-  );
-  const ratio = useAveragesExclusionRatio();
-  const filters = useStore($tankFilters);
-
-  return (
-    <Flex direction="column" gap="4">
-      <Heading align="center">Players by tier & class</Heading>
-      <Box height="25rem">
-        <ThemedBar
-          data={TIERS.map((tier) => {
-            const players: Record<TankClass, number> = {
-              0: 0,
-              1: 0,
-              2: 0,
-              3: 0,
-            };
-
-            averageDefinitionsArray.forEach(([idString, entry]) => {
-              const id = Number(idString);
-              const tank = tankDefinitions.tanks[id];
-
-              if (
-                tank === undefined ||
-                tank.tier !== tier ||
-                !filterTank(filters, tank)
-              ) {
-                return;
-              }
-
-              players[tank.class] += entry.samples[playerCountPeriod] * ratio;
-            });
-
-            const bar: Record<string, number | string> = {
-              tier: TIER_ROMAN_NUMERALS[tier],
-            };
-
-            TANK_CLASSES.forEach((c) => {
-              bar[strings.common.tank_class_short[c]] = players[c];
-            });
-
-            return bar;
-          })}
-          keys={TANK_CLASSES.map((c) => strings.common.tank_class_short[c])}
-          indexBy="tier"
-          margin={{ right: 90, bottom: 50, left: 90 }}
-          axisBottom={{
-            legend: 'Tier',
-            legendPosition: 'middle',
-            legendOffset: 32,
-          }}
-          axisLeft={{
-            legend: 'Players',
-            legendPosition: 'middle',
-            legendOffset: -60,
-            format: formatCompact,
-          }}
-          legends={[
-            {
-              dataFrom: 'keys',
-              anchor: 'bottom-right',
-              direction: 'column',
-              translateX: 120,
-              itemWidth: 100,
-              itemHeight: 20,
-            },
-          ]}
-          valueFormat={formatCompact}
-        />
-      </Box>
-    </Flex>
-  );
-}

packages/website/src/components/Performance/Charts/index.tsx

@@ -1,12 +0,0 @@
-import { Flex } from '@radix-ui/themes';
-import { PlayersByTierAndClass } from './components/PlayersByTierAndClass';
-
-export function Charts() {
-  return (
-    <Flex justify="center">
-      <Flex direction="column" maxWidth="45rem" flexGrow="1" py="6" gap="9">
-        <PlayersByTierAndClass />
-      </Flex>
-    </Flex>
-  );
-}

packages/website/src/components/Performance/ModeSwitcher.tsx

@@ -1,31 +0,0 @@
-import { Tabs } from '@radix-ui/themes';
-import {
-  TankPerformanceEphemeral,
-  TankPerformanceMode,
-} from '../../stores/tankPerformanceEphemeral';
-
-export function ModeSwitcher() {
-  const mode = TankPerformanceEphemeral.use((state) => state.mode);
-  const mutateTankPerformanceMode = TankPerformanceEphemeral.useMutation();
-
-  return (
-    <Tabs.Root
-      value={`${mode}`}
-      onValueChange={(value) => {
-        mutateTankPerformanceMode((draft) => {
-          draft.mode = Number(value) as TankPerformanceMode;
-        });
-      }}
-      mb="5"
-    >
-      <Tabs.List justify="center">
-        <Tabs.Trigger value={`${TankPerformanceMode.Table}`}>
-          Table
-        </Tabs.Trigger>
-        <Tabs.Trigger value={`${TankPerformanceMode.Charts}`}>
-          Charts
-        </Tabs.Trigger>
-      </Tabs.List>
-    </Tabs.Root>
-  );
-}