feat: composite stats

src/app/tools/embed/configurations/breakdown.tsx

@@ -5,10 +5,20 @@ import {
   BreakdownEmbedWrapper,
 } from '../../../../components/TanksEmbed';
 import { tankDefinitionsArray } from '../../../../core/blitzkit/tankDefinitions';
+import {
+  CompositeStatsKey,
+  compositeStatsKeys,
+} from '../../../../core/statistics/compositeStats/constants';
+import strings from '../../../../lang/en-US.json';
 import { EmbedConfig } from '../../../../stores/embedState';
 import { EmbedItemType } from '../../../../stores/embedState/constants';
 import { useEmbedStateCurry } from '../../../../stores/embedState/utilities';
 
+const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
+  label: strings.common.composite_stats[value],
+  value,
+}));
+
 export const breakdownConfig = {
   showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
 
@@ -60,14 +70,30 @@ export const breakdownConfig = {
     pad: true,
   },
 
-  column1Unit: { type: EmbedItemType.String, default: '' },
-  column2Unit: { type: EmbedItemType.String, default: '%' },
-  column3Unit: { type: EmbedItemType.String, default: '' },
-  column4Unit: { type: EmbedItemType.String, default: '' },
-  column1Label: { type: EmbedItemType.String, default: 'Battles' },
-  column2Label: { type: EmbedItemType.String, default: 'Winrate' },
-  column3Label: { type: EmbedItemType.String, default: 'WN8' },
-  column4Label: { type: EmbedItemType.String, default: 'Damage' },
+  column1: {
+    type: EmbedItemType.Enum,
+    default: 'cumulative_battles' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column2: {
+    type: EmbedItemType.Enum,
+    default: 'normalized_wins' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column3: {
+    type: EmbedItemType.Enum,
+    default: 'cumulative_wn8' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column4: {
+    type: EmbedItemType.Enum,
+    default: 'normalized_damage_dealt' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column1CustomLabel: { type: EmbedItemType.String, default: '' },
+  column2CustomLabel: { type: EmbedItemType.String, default: '' },
+  column3CustomLabel: { type: EmbedItemType.String, default: '' },
+  column4CustomLabel: { type: EmbedItemType.String, default: '' },
 } satisfies EmbedConfig;
 
 export function BreakdownPreview() {

src/app/tools/embed/customize/[embed]/components/Enum.tsx

@@ -0,0 +1,36 @@
+import { Select } from '@radix-ui/themes';
+import * as EmbedState from '../../../../../../stores/embedState';
+import {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../../../../../stores/embedState/constants';
+import { EmbedPreviewControllerProps } from '../page';
+
+export function Enum({
+  configKey,
+  config,
+}: EmbedPreviewControllerProps & {
+  config: EmbedConfigItemType<EmbedItemType.Enum>;
+}) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Select.Root
+      value={EmbedState.use((state) => state[configKey] as string)}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value;
+        });
+      }}
+    >
+      <Select.Trigger />
+      <Select.Content>
+        {config.options.map((option) => (
+          <Select.Item key={option.value} value={option.value}>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

src/app/tools/embed/customize/[embed]/components/RichText.tsx

@@ -15,8 +15,6 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
       ] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
   );
 
-  console.log(state);
-
   return (
     <ColorControllerRaw
       value={state.color}

src/app/tools/embed/customize/[embed]/page.tsx

@@ -12,6 +12,7 @@ import { EmbedItemType } from '../../../../../stores/embedState/constants';
 import { configurations, previews } from '../../configurations';
 import { Boolean } from './components/Boolean';
 import { Color } from './components/Color';
+import { Enum } from './components/Enum';
 import { Radius } from './components/Radius';
 import { RichText } from './components/RichText';
 import { Size } from './components/Size';
@@ -99,6 +100,12 @@ export default function Page({
 
                 case EmbedItemType.RichText: {
                   control = <RichText configKey={configKey} />;
+                  break;
+                }
+
+                case EmbedItemType.Enum: {
+                  control = <Enum configKey={configKey} config={item} />;
+                  break;
                 }
               }
 

src/app/tools/performance/components/Total.tsx

@@ -3,10 +3,10 @@ import { memo, use, useCallback } from 'react';
 import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell';
 import {
   averageDefinitions,
-  AverageDefinitionsAllStats,
   AverageDefinitionsEntryWithId,
 } from '../../../../core/blitzkit/averageDefinitions';
 import { formatCompact } from '../../../../core/math/formatCompact';
+import { BlitzkitStats } from '../../../../core/statistics/compositeStats/constants';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 import * as TankPerformancePersistent from '../../../../stores/tankPerformancePersistent';
 
@@ -22,7 +22,7 @@ export const Total = memo<TotalProps>(
     );
     const ratio = useAveragesExclusionRatio();
     const sum = useCallback(
-      (slice: (tank: AverageDefinitionsAllStats) => number) => {
+      (slice: (tank: BlitzkitStats) => number) => {
         return tanks.reduce(
           (acc, tank) => acc + tank.samples.total * slice(tank.mu),
           0,