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 {
-import { PlayerCountPeriod } from '../../stores/tankPerformancePersistent/constants';
+  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();

packages/website/src/pages/tools/performance/_index.tsx

@@ -1,27 +1,45 @@
 import { PageWrapper } from '../../../components/PageWrapper';
-import { Controls } from '../../../components/Performance/Controls';
+import { Charts } from '../../../components/Performance/Charts';
+import { ModeSwitcher } from '../../../components/Performance/ModeSwitcher';
 import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo';
+import { PlayerCountControl } from '../../../components/Performance/PlayerCountControl';
 import { TankTable } from '../../../components/Performance/Table';
-import { TankPerformancePersistent } from '../../../stores/tankPerformancePersistent';
+import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
+import {
+  TankPerformanceEphemeral,
+  TankPerformanceMode,
+} from '../../../stores/tankPerformanceEphemeral';
 import { TankPerformanceSort } from '../../../stores/tankPerformanceSort';
 import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 
 export function Page({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <TankPerformanceSort.Provider>
-      <TankPerformancePersistent.Provider>
+      <TankPerformanceEphemeral.Provider>
         <Content skeleton={skeleton} />
-      </TankPerformancePersistent.Provider>
+      </TankPerformanceEphemeral.Provider>
     </TankPerformanceSort.Provider>
   );
 }
 
 function Content({ skeleton }: MaybeSkeletonComponentProps) {
+  const mode = TankPerformanceEphemeral.use((state) => state.mode);
+
   return (
     <PageWrapper color="jade" noMaxWidth>
+      <ModeSwitcher />
+
       <PerformanceInfo skeleton={skeleton} />
-      <Controls />
+      <FilterControl />
-      <TankTable skeleton={skeleton} />
+
+      {mode === TankPerformanceMode.Table && (
+        <>
+          <PlayerCountControl />
+          <TankTable skeleton={skeleton} />
+        </>
+      )}
+
+      {mode === TankPerformanceMode.Charts && <Charts />}
     </PageWrapper>
   );
 }

packages/website/src/stores/tankPerformanceEphemeral.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+import { createContextualStore } from '../core/zustand/createContextualStore';
+
+export interface TankPerformanceEphemeral {
+  playerCountPeriod: PlayerCountPeriod;
+  mode: TankPerformanceMode;
+}
+
+export enum TankPerformanceMode {
+  Table,
+  Charts,
+}
+
+export enum PlayerCountPeriod {
+  Past120Days = 'd_120',
+  Past90Days = 'd_90',
+  Past60Days = 'd_60',
+  ThisMonth = 'd_30',
+  ThisWeek = 'd_7',
+  Yesterday = 'd_1',
+}
+
+export const TankPerformanceEphemeral = createContextualStore(() =>
+  create<TankPerformanceEphemeral>()(() => ({
+    playerCountPeriod: PlayerCountPeriod.ThisMonth,
+    mode: TankPerformanceMode.Table,
+  })),
+);

packages/website/src/stores/tankPerformancePersistent/constants.ts

@@ -1,8 +0,0 @@
-export enum PlayerCountPeriod {
-  Past120Days = 'd_120',
-  Past90Days = 'd_90',
-  Past60Days = 'd_60',
-  ThisMonth = 'd_30',
-  ThisWeek = 'd_7',
-  Yesterday = 'd_1',
-}

packages/website/src/stores/tankPerformancePersistent/index.ts

@@ -1,20 +0,0 @@
-import * as lodash from 'lodash-es';
-import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { createContextualStore } from '../../core/zustand/createContextualStore';
-import { PlayerCountPeriod } from './constants';
-
-export interface TankPerformancePersistent {
-  playerCountPeriod: PlayerCountPeriod;
-}
-
-export const TankPerformancePersistent = createContextualStore(() =>
-  create<TankPerformancePersistent>()(
-    persist(
-      subscribeWithSelector<TankPerformancePersistent>(() => ({
-        playerCountPeriod: PlayerCountPeriod.ThisMonth,
-      })),
-      { name: 'tank-performance', merge: (a, b) => lodash.merge(b, a) },
-    ),
-  ),
-);