refa composition table stuff

app/(stats)/compositions/[[...range]]/page.tsx

@@ -10,10 +10,6 @@ import { fromDateRange } from '@/lib/utils/url.utils';
 import { Caption, Inline, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
 
-import {
-  CompositionFilter,
-  CompositionFilterProvider,
-} from '@/ui/stats/composition-stats';
 import { StatsFilter } from '@/ui/stats/stats-filter';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
@@ -115,19 +111,14 @@ const CompositionsPage = async ({ params }: PageProps) => {
         />
         <FactionFilter />
       </Inline>
-      <CompositionFilterProvider>
-        <StatsFilter smallSamples={false} dateRange={toDate(from, to)}>
-          <CompositionFilter />
-        </StatsFilter>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-          <div className="col-span-full">
-            <Compositions data={stats.composition} />
-          </div>
-          <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
-            <StatsHint />
-          </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
+        <div className="col-span-full">
+          <Compositions data={stats.composition} />
         </div>
-      </CompositionFilterProvider>
+        <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
+          <StatsHint />
+        </div>
+      </div>
     </>
   );
 };

ui/stats/composition-stats/composition-stats.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { Card } from '@/ui';
+import { useState } from 'react';
+import { Card, FactionSelection, Select } from '@/ui';
 
 import { CompositionTable } from './composition-table';
-import { CompositionFilterProvider, useCompositionFilter } from './context';
+import type { SortOptions } from './composition-table';
 import type { CompositionStatsType } from './types';
-import { CompositionFilter } from './composition-filter';
+import { XWSFaction } from '@/lib/types';
 
 // Props
 // ---------------
@@ -15,18 +16,41 @@ export interface CompositionStatsProps {
 
 // Component
 // ---------------
-export const CompositionStats = ({ value }: CompositionStatsProps) => (
-  <CompositionFilterProvider>
+export const CompositionStats = ({ value }: CompositionStatsProps) => {
+  const [faction, setFaction] = useState<XWSFaction | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortOptions>('percentile');
+
+  return (
     <Card>
       <Card.Header>
         <Card.Title>Compositions</Card.Title>
         <Card.Actions>
-          <CompositionFilter />
+          <FactionSelection value={faction} onChange={setFaction} allowAll />
+          <Select
+            size="small"
+            value={sortBy}
+            onChange={e => setSortBy(e.target.value as any)}
+          >
+            <Select.Option value="percentile">By Percentile</Select.Option>
+            <Select.Option value="deviation">By Std. Deviation</Select.Option>
+            <Select.Option value="winrate">By Winrate</Select.Option>
+            <Select.Option value="frequency">By Frequency</Select.Option>
+            <Select.Option value="count">By Count</Select.Option>
+            <Select.Option value="score">By Score</Select.Option>
+          </Select>
         </Card.Actions>
       </Card.Header>
       <Card.Body>
-        <CompositionTable value={value} />
+        <CompositionTable
+          value={value}
+          filter={
+            faction !== 'all'
+              ? ([, stat]) => stat.faction === faction
+              : undefined
+          }
+          sortBy={sortBy}
+        />
       </Card.Body>
     </Card>
-  </CompositionFilterProvider>
-);
+  );
+};

ui/stats/composition-stats/composition-table.tsx

@@ -6,15 +6,25 @@ import { toPercentage } from '@/lib/utils';
 import { Collapsible, FactionIcon, Link, ShipIcon, Table } from '@/ui';
 import { Folder } from '@/ui/icons';
 
-import { useCompositionFilter } from './context';
 import type { CompositionStatsType } from './types';
 
+// Types
+// ---------------
+export type SortOptions =
+  | 'percentile'
+  | 'deviation'
+  | 'winrate'
+  | 'frequency'
+  | 'count'
+  | 'score';
+
 // Props
 // ---------------
 export interface CompositionTableProps {
   value: { [id: string]: CompositionStatsType };
   collapsible?: boolean;
   filter?: (entry: [string, CompositionStatsType]) => boolean;
+  sortBy?: SortOptions;
 }
 
 // Components
@@ -23,25 +33,21 @@ export const CompositionTable = ({
   value,
   collapsible = true,
   filter,
+  sortBy = 'percentile',
 }: CompositionTableProps) => {
-  // TODO: move these out of the table, just a "filter" and "sort" function?
-  const { faction = 'all', sort = 'percentile' } = useCompositionFilter();
   let data = Object.entries(value);
 
-  if (faction !== 'all' || filter) {
-    data = data.filter(entry => {
-      let result = faction === 'all' || entry[1].faction === faction;
-      return result && filter ? filter(entry) : result;
-    });
+  if (filter) {
+    data = data.filter(filter);
   }
 
   data.sort(([, a], [, b]) => {
-    const result = (b[sort] || 0) - (a[sort] || 0);
+    const result = (b[sortBy] || 0) - (a[sortBy] || 0);
 
     // Secondary sort by percentile (or deviation if sorted by percentile already)
     return result !== 0
       ? result
-      : sort === 'percentile'
+      : sortBy === 'percentile'
       ? b.deviation - a.deviation
       : b.percentile - a.percentile;
   });

ui/stats/composition-stats/index.ts

@@ -1,5 +1,3 @@
-export * from './composition-filter';
 export * from './composition-stats';
 export * from './composition-table';
-export * from './context';
 export * from './types';