feat: start of charts

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

@@ -0,0 +1,3 @@
+export function Charts() {
+  return 'amogos';
+}

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

@@ -1,11 +0,0 @@
-import { FilterControl } from '../TankSearch/components/FilterControl';
-import { PlayerCountControl } from './PlayerCountControl';
-
-export function Controls() {
-  return (
-    <>
-      <FilterControl />
-      <PlayerCountControl />
-    </>
-  );
-}

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

@@ -0,0 +1,31 @@
+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>
+  );
+}

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

@@ -1,12 +1,14 @@
 import { Flex, Select, Text } from '@radix-ui/themes';
-import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
-import { PlayerCountPeriod } from '../../stores/tankPerformancePersistent/constants';
+import {
+  PlayerCountPeriod,
+  TankPerformanceEphemeral,
+} from '../../stores/tankPerformanceEphemeral';
 
 export function PlayerCountControl() {
-  const playerCountPeriod = TankPerformancePersistent.use(
+  const playerCountPeriod = TankPerformanceEphemeral.use(
     (state) => state.playerCountPeriod,
   );
-  const mutateTankPerformanceSort = TankPerformancePersistent.useMutation();
+  const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
 
   return (
     <Flex justify="center" align="center" gap="2">

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

@@ -6,7 +6,7 @@ import {
 import { Table } from '@radix-ui/themes';
 import { memo } from 'react';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
-import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
+import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { TankRowHeaderCell } from '../TankRowHeaderCell';
 
 interface TankRowProps {
@@ -19,7 +19,7 @@ export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const averages = averageDefinitions.averages[tank.id];
     const ratio = useAveragesExclusionRatio();
-    const playerCountPeriod = TankPerformancePersistent.use(
+    const playerCountPeriod = TankPerformanceEphemeral.use(
       (state) => state.playerCountPeriod,
     );
 

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

@@ -5,7 +5,7 @@ import { times } from 'lodash-es';
 import { Fragment, Suspense, useEffect, useMemo, useState } from 'react';
 import { filterTank } from '../../core/blitzkit/filterTank';
 import { $tankFilters } from '../../stores/tankFilters';
-import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
+import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { RowLoader } from './RowLoader';
@@ -36,7 +36,7 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
   }
 
   const sort = TankPerformanceSort.use();
-  const tankPerformancePersistentStore = TankPerformancePersistent.useStore();
+  const tankPerformancePersistentStore = TankPerformanceEphemeral.useStore();
   const filters = useStore($tankFilters);
   const tanksSorted = useMemo(() => {
     const { playerCountPeriod } = tankPerformancePersistentStore.getState();

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

@@ -7,7 +7,7 @@ import {
 import { Table } from '@radix-ui/themes';
 import { memo, useCallback } from 'react';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
-import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
+import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
 import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 
 interface AverageDefinitionsEntryWithId extends AverageDefinitionsEntry {
@@ -22,7 +22,7 @@ const averageDefinitions = await fetchAverageDefinitions();
 
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
-    const playerCountPeriod = TankPerformancePersistent.use(
+    const playerCountPeriod = TankPerformanceEphemeral.use(
       (state) => state.playerCountPeriod,
     );
     const ratio = useAveragesExclusionRatio();