From 973d24a615acdf67e5500e06b1157a1063fcdb35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:03:49 -0500 Subject: [PATCH] feat: start of charts --- .../src/components/Performance/Charts.tsx | 3 ++ .../src/components/Performance/Controls.tsx | 11 ------- .../components/Performance/ModeSwitcher.tsx | 31 +++++++++++++++++++ .../Performance/PlayerCountControl.tsx | 10 +++--- .../src/components/Performance/TankRow.tsx | 4 +-- .../src/components/Performance/Tanks.tsx | 4 +-- .../src/components/Performance/Total.tsx | 4 +-- .../src/pages/tools/performance/_index.tsx | 30 ++++++++++++++---- .../src/stores/tankPerformanceEphemeral.ts | 28 +++++++++++++++++ .../tankPerformancePersistent/constants.ts | 8 ----- .../stores/tankPerformancePersistent/index.ts | 20 ------------ 11 files changed, 98 insertions(+), 55 deletions(-) create mode 100644 packages/website/src/components/Performance/Charts.tsx delete mode 100644 packages/website/src/components/Performance/Controls.tsx create mode 100644 packages/website/src/components/Performance/ModeSwitcher.tsx create mode 100644 packages/website/src/stores/tankPerformanceEphemeral.ts delete mode 100644 packages/website/src/stores/tankPerformancePersistent/constants.ts delete mode 100644 packages/website/src/stores/tankPerformancePersistent/index.ts diff --git a/packages/website/src/components/Performance/Charts.tsx b/packages/website/src/components/Performance/Charts.tsx new file mode 100644 index 000000000..9d2091681 --- /dev/null +++ b/packages/website/src/components/Performance/Charts.tsx @@ -0,0 +1,3 @@ +export function Charts() { + return 'amogos'; +} diff --git a/packages/website/src/components/Performance/Controls.tsx b/packages/website/src/components/Performance/Controls.tsx deleted file mode 100644 index 5408229d2..000000000 --- a/packages/website/src/components/Performance/Controls.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FilterControl } from '../TankSearch/components/FilterControl'; -import { PlayerCountControl } from './PlayerCountControl'; - -export function Controls() { - return ( - <> - - - - ); -} diff --git a/packages/website/src/components/Performance/ModeSwitcher.tsx b/packages/website/src/components/Performance/ModeSwitcher.tsx new file mode 100644 index 000000000..ede901745 --- /dev/null +++ b/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 ( + { + mutateTankPerformanceMode((draft) => { + draft.mode = Number(value) as TankPerformanceMode; + }); + }} + mb="5" + > + + + Table + + + Charts + + + + ); +} diff --git a/packages/website/src/components/Performance/PlayerCountControl.tsx b/packages/website/src/components/Performance/PlayerCountControl.tsx index 6a3d1e810..b0d9928cb 100644 --- a/packages/website/src/components/Performance/PlayerCountControl.tsx +++ b/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 ( diff --git a/packages/website/src/components/Performance/TankRow.tsx b/packages/website/src/components/Performance/TankRow.tsx index 278bbcdfa..634bfd6b9 100644 --- a/packages/website/src/components/Performance/TankRow.tsx +++ b/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( ({ tank }) => { const averages = averageDefinitions.averages[tank.id]; const ratio = useAveragesExclusionRatio(); - const playerCountPeriod = TankPerformancePersistent.use( + const playerCountPeriod = TankPerformanceEphemeral.use( (state) => state.playerCountPeriod, ); diff --git a/packages/website/src/components/Performance/Tanks.tsx b/packages/website/src/components/Performance/Tanks.tsx index 40b14b133..ced47009d 100644 --- a/packages/website/src/components/Performance/Tanks.tsx +++ b/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(); diff --git a/packages/website/src/components/Performance/Total.tsx b/packages/website/src/components/Performance/Total.tsx index 1919ba64a..cad080ea8 100644 --- a/packages/website/src/components/Performance/Total.tsx +++ b/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( ({ tanks }) => { - const playerCountPeriod = TankPerformancePersistent.use( + const playerCountPeriod = TankPerformanceEphemeral.use( (state) => state.playerCountPeriod, ); const ratio = useAveragesExclusionRatio(); diff --git a/packages/website/src/pages/tools/performance/_index.tsx b/packages/website/src/pages/tools/performance/_index.tsx index 958147bd3..a8555f2c8 100644 --- a/packages/website/src/pages/tools/performance/_index.tsx +++ b/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 ( - + - + ); } function Content({ skeleton }: MaybeSkeletonComponentProps) { + const mode = TankPerformanceEphemeral.use((state) => state.mode); + return ( + + - - + + + {mode === TankPerformanceMode.Table && ( + <> + + + + )} + + {mode === TankPerformanceMode.Charts && } ); } diff --git a/packages/website/src/stores/tankPerformanceEphemeral.ts b/packages/website/src/stores/tankPerformanceEphemeral.ts new file mode 100644 index 000000000..5b54031d6 --- /dev/null +++ b/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()(() => ({ + playerCountPeriod: PlayerCountPeriod.ThisMonth, + mode: TankPerformanceMode.Table, + })), +); diff --git a/packages/website/src/stores/tankPerformancePersistent/constants.ts b/packages/website/src/stores/tankPerformancePersistent/constants.ts deleted file mode 100644 index 34d2c4e07..000000000 --- a/packages/website/src/stores/tankPerformancePersistent/constants.ts +++ /dev/null @@ -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', -} diff --git a/packages/website/src/stores/tankPerformancePersistent/index.ts b/packages/website/src/stores/tankPerformancePersistent/index.ts deleted file mode 100644 index e1b845c88..000000000 --- a/packages/website/src/stores/tankPerformancePersistent/index.ts +++ /dev/null @@ -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()( - persist( - subscribeWithSelector(() => ({ - playerCountPeriod: PlayerCountPeriod.ThisMonth, - })), - { name: 'tank-performance', merge: (a, b) => lodash.merge(b, a) }, - ), - ), -);