feat: start of charts

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

@@ -0,0 +1,29 @@
+import { Flex } from '@radix-ui/themes';
+import { ChartsControl } from '../../../components/Charts/ChartsControl';
+import { PlayersInPeriod } from '../../../components/Charts/PlayersInPeriod';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
+import { Charts } from '../../../stores/charts';
+
+export function Page() {
+  return (
+    <Charts.Provider>
+      <Content />
+    </Charts.Provider>
+  );
+}
+
+function Content() {
+  return (
+    <PageWrapper maxWidth="unset">
+      <FilterControl />
+      <ChartsControl />
+
+      <Flex justify="center">
+        <Flex direction="column" maxWidth="45rem" flexGrow="1" py="6" gap="9">
+          <PlayersInPeriod />
+        </Flex>
+      </Flex>
+    </PageWrapper>
+  );
+}

packages/website/src/pages/tools/charts/index.astro

@@ -0,0 +1,9 @@
+---
+import { chartsTool } from '../../../constants/tools';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
+---
+
+<ToolLayout tool={chartsTool}>
+  <Page client:load />
+</ToolLayout>

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

@@ -1,12 +1,9 @@
 import { PageWrapper } from '../../../components/PageWrapper';
-import { Charts } from '../../../components/Performance/Charts';
+import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo';
 import { PlayerCountControl } from '../../../components/Performance/PlayerCountControl';
 import { TankTable } from '../../../components/Performance/Table';
 import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
-import {
-  TankPerformanceEphemeral,
-  TankPerformanceMode,
-} from '../../../stores/tankPerformanceEphemeral';
+import { TankPerformanceEphemeral } from '../../../stores/tankPerformanceEphemeral';
 import { TankPerformanceSort } from '../../../stores/tankPerformanceSort';
 import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 
@@ -21,18 +18,13 @@ export function Page({ skeleton }: MaybeSkeletonComponentProps) {
 }
 
 function Content({ skeleton }: MaybeSkeletonComponentProps) {
-  const mode = TankPerformanceEphemeral.use((state) => state.mode);
-
   return (
     <PageWrapper color="jade" maxWidth="100%">
-      {/* <ModeSwitcher /> */}
-
-      {/* <PerformanceInfo skeleton={skeleton} /> */}
+      <PerformanceInfo skeleton={skeleton} />
       <FilterControl />
       <PlayerCountControl />
 
-      {mode === TankPerformanceMode.Table && <TankTable skeleton={skeleton} />}
-      {mode === TankPerformanceMode.Charts && <Charts />}
+      <TankTable skeleton={skeleton} />
     </PageWrapper>
   );
 }