From abc441fa2f41f11b217a56f7f96f779718e3e2c7 Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Mon, 30 Oct 2023 22:33:55 +0100
Subject: [PATCH] remove old composition page

---
 .../[id]/_component/pilot-details.tsx         | 121 -------------
 .../[id]/_component/squad-groups.tsx          |  76 --------
 .../[id]/_component/trend-curve.tsx           |  74 --------
 app/analyze/composition/[id]/layout.tsx       |  13 --
 app/analyze/composition/[id]/page.tsx         | 145 ----------------
 app/analyze/composition/page.tsx              | 162 ------------------
 6 files changed, 591 deletions(-)
 delete mode 100644 app/analyze/composition/[id]/_component/pilot-details.tsx
 delete mode 100644 app/analyze/composition/[id]/_component/squad-groups.tsx
 delete mode 100644 app/analyze/composition/[id]/_component/trend-curve.tsx
 delete mode 100644 app/analyze/composition/[id]/layout.tsx
 delete mode 100644 app/analyze/composition/[id]/page.tsx
 delete mode 100644 app/analyze/composition/page.tsx

diff --git a/app/analyze/composition/[id]/_component/pilot-details.tsx b/app/analyze/composition/[id]/_component/pilot-details.tsx
deleted file mode 100644
index c0b4c441..00000000
--- a/app/analyze/composition/[id]/_component/pilot-details.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client';
-
-import { Fragment, useState } from 'react';
-
-import { type Ships, getPilotName } from '@/lib/get-value';
-import type { SquadCompositionStats } from '@/lib/stats/details/composition';
-import { toPercentage } from '@/lib/utils';
-import { isStandardized, upgradesToList } from '@/lib/xws';
-
-import { PilotImage, Detail, Card, Switch } from '@/ui';
-import { Info } from '@/ui/icons';
-
-// Props
-// ---------------
-export interface PilotDetailProps {
-  className?: string;
-  ships: Ships[];
-  value: SquadCompositionStats['pilot'];
-}
-
-// Components
-// ---------------
-export const PilotDetails = ({ className, ships, value }: PilotDetailProps) => {
-  const [grouped, setGrouped] = useState<boolean>(true);
-
-  const data = Object.entries(value);
-
-  if (grouped) {
-    data.sort(([, a], [, b]) => {
-      const result = ships.indexOf(a.ship) - ships.indexOf(b.ship);
-      return result !== 0 ? result : b.percentile - a.percentile;
-    });
-  }
-
-  return (
-    <Card className={className} inset="list">
-      <Card.Header>
-        <Card.Title>Pilots</Card.Title>
-        <Card.Actions className="px-4">
-          <Switch
-            size="small"
-            label="Group by Chassis"
-            checked={grouped}
-            onCheckedChange={setGrouped}
-          />
-        </Card.Actions>
-        <Card.Body variant="enumeration">
-          {data.map(([pid, current]) => (
-            <div
-              key={pid}
-              className="grid gap-x-4 gap-y-6 px-4 py-5 md:grid-cols-[150px,auto] md:grid-rows-[auto,auto,auto] lg:grid-cols-[200px,auto]"
-            >
-              <PilotImage
-                className="row-span-full hidden rounded-md md:block"
-                pilot={pid}
-                type="art"
-                width={250}
-                height={250}
-              />
-              <div className="text-2xl font-bold leading-none">
-                {getPilotName(pid)}
-              </div>
-              <div className="flex flex-wrap gap-x-8 gap-y-4">
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Percentile"
-                  value={toPercentage(current.percentile)}
-                />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Deviation"
-                  value={
-                    current.deviation ? toPercentage(current.deviation) : '-'
-                  }
-                />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Winrate"
-                  value={current.winrate ? toPercentage(current.winrate) : '-'}
-                />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Frequency"
-                  value={toPercentage(current.frequency)}
-                />
-              </div>
-              <div>
-                <div className="text-sm font-medium text-secondary-400">
-                  Loadout Performance
-                </div>
-                {isStandardized(pid) ? (
-                  <div className="text-secondary-950 flex items-center gap-1 pt-2 text-sm italic">
-                    <Info className="h-4 w-4" /> Standarized Pilot. No
-                    variations.
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-[max-content,auto] gap-x-6 gap-y-3 pt-2">
-                    {current.upgrades.map(({ id, list, count, percentile }) => (
-                      <Fragment key={id}>
-                        <div className="text-right text-sm leading-6 text-secondary-600">
-                          {toPercentage(percentile)} ({count})
-                        </div>
-                        <div className="font-medium">
-                          {upgradesToList(list)}
-                        </div>
-                      </Fragment>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-        </Card.Body>
-      </Card.Header>
-    </Card>
-  );
-};
diff --git a/app/analyze/composition/[id]/_component/squad-groups.tsx b/app/analyze/composition/[id]/_component/squad-groups.tsx
deleted file mode 100644
index d8bb64a3..00000000
--- a/app/analyze/composition/[id]/_component/squad-groups.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-
-import { Accordion, Badge, CopyButton, Detail, Squad, Timeline } from '@/ui';
-
-import { getPilotName } from '@/lib/get-value';
-import { type SquadCompositionStats } from '@/lib/stats/details/composition';
-import { formatDate } from '@/lib/utils/date.utils';
-import { toPercentage } from '@/lib/utils/math.utils';
-import { Copy } from '@/ui/icons';
-
-// Props
-// ---------------
-export interface SquadGroupsProps {
-  value: SquadCompositionStats['squads'];
-}
-
-// Component
-// ---------------
-export const SquadGroups = ({ value }: SquadGroupsProps) => {
-  const data = Object.entries(value);
-  data.sort(([, a], [, b]) => b.percentile - a.percentile);
-
-  return (
-    <Accordion type="multiple">
-      {data.map(([id, current]) => (
-        <Accordion.Item value={id} key={id}>
-          <Accordion.Trigger className="flex gap-4 text-lg">
-            <div className="w-14">
-              <Badge variant="light">{current.items.length}</Badge>
-            </div>
-            {id.split('.').map(getPilotName).join(', ')}
-          </Accordion.Trigger>
-          <Accordion.Content>
-            <div className="flex flex-col gap-8 pt-6">
-              <div className="flex flex-wrap gap-8 px-2">
-                <Detail
-                  variant="secondary"
-                  label="Percentile"
-                  value={toPercentage(current.percentile)}
-                />
-                <Detail
-                  variant="secondary"
-                  label="Deviation"
-                  value={
-                    current.deviation ? toPercentage(current.deviation) : '-'
-                  }
-                />
-                <Detail
-                  variant="secondary"
-                  label="Winrate"
-                  value={current.winrate ? toPercentage(current.winrate) : '-'}
-                />
-              </div>
-              <Timeline>
-                {current.items.map(({ date, player, xws }) => (
-                  <Timeline.Item key={date + player}>
-                    <Timeline.Header>
-                      {formatDate(new Date(date))}
-                      <Timeline.Caption>by {player}</Timeline.Caption>
-                    </Timeline.Header>
-                    <Timeline.Body className="flex flex-1 flex-col items-start justify-between gap-4 md:mt-[3px] md:gap-6 lg:flex-row">
-                      <Squad variant="narrow" xws={xws} />
-                      <CopyButton size="small" content={JSON.stringify(xws)}>
-                        <Copy className="inline-block h-4 w-4" /> Copy XWS
-                      </CopyButton>
-                    </Timeline.Body>
-                  </Timeline.Item>
-                ))}
-              </Timeline>
-            </div>
-          </Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  );
-};
diff --git a/app/analyze/composition/[id]/_component/trend-curve.tsx b/app/analyze/composition/[id]/_component/trend-curve.tsx
deleted file mode 100644
index 867a8f51..00000000
--- a/app/analyze/composition/[id]/_component/trend-curve.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-'use client';
-
-import { toPercentage } from '@/lib/utils';
-import { formatMonth } from '@/lib/utils/date.utils';
-import { linearGradientDef } from '@nivo/core';
-import { ResponsiveLine } from '@nivo/line';
-
-// Props
-// ---------------
-export interface TrendCurveProps {
-  value: {
-    /**
-     * Date format YYYY-MM
-     */
-    date: string;
-    count: number;
-    percentile: number;
-  }[];
-}
-
-// Components
-// ---------------
-export const TrendCurve = ({ value }: TrendCurveProps) => {
-  const data = value.map(({ date, percentile, count }) => ({
-    x: date,
-    y: percentile,
-    count,
-  }));
-
-  return (
-    <div className="grid h-64 auto-cols-fr">
-      <ResponsiveLine
-        data={[
-          {
-            id: 'squad trend',
-            data,
-          },
-        ]}
-        curve="monotoneX"
-        axisBottom={{
-          format: formatMonth,
-        }}
-        yScale={{
-          type: 'linear',
-          min: 0,
-          max: 1,
-        }}
-        axisLeft={{
-          tickValues: 3,
-          format: toPercentage,
-          legend: <tspan style={{ fontWeight: 700 }}>Percentile</tspan>,
-          legendPosition: 'middle',
-          legendOffset: -45,
-        }}
-        pointLabel={({ y }) => toPercentage(y as number)}
-        enablePointLabel
-        enableArea
-        enableGridX={false}
-        pointSize={8}
-        defs={[
-          linearGradientDef('gradient', [
-            { offset: 0, color: '#5155b1' },
-            { offset: 100, color: '#96a6e3' },
-          ]),
-        ]}
-        colors="#5155b1"
-        fill={[{ match: '*', id: 'gradient' }]}
-        margin={{ top: 20, right: 30, bottom: 30, left: 60 }}
-        isInteractive={false}
-        animate={false}
-      />
-    </div>
-  );
-};
diff --git a/app/analyze/composition/[id]/layout.tsx b/app/analyze/composition/[id]/layout.tsx
deleted file mode 100644
index d539c0e8..00000000
--- a/app/analyze/composition/[id]/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-import { Title } from '@/ui';
-
-const Layout = ({ children }: { children: ReactNode }) => (
-  <>
-    <div className="pb-6">
-      <Title>Composition Details</Title>
-    </div>
-    <div>{children}</div>
-  </>
-);
-
-export default Layout;
diff --git a/app/analyze/composition/[id]/page.tsx b/app/analyze/composition/[id]/page.tsx
deleted file mode 100644
index 84de22d4..00000000
--- a/app/analyze/composition/[id]/page.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { compositionDetails } from '@/lib/stats/details/composition';
-import { createMetadata } from '@/lib/metadata';
-import { fromDate } from '@/lib/utils/date.utils';
-import { getFactionCount, getSquads } from '@/lib/db/squads';
-import { getShipName } from '@/lib/get-value';
-import { pointsUpdateDate } from '@/lib/config';
-import { toPercentage } from '@/lib/utils';
-
-import { Card, Detail, ShipIcon } from '@/ui';
-
-import { PilotDetails } from './_component/pilot-details';
-import { SquadGroups } from './_component/squad-groups';
-import { TrendCurve } from './_component/trend-curve';
-
-// Config
-// ---------------
-export const revalidate = 21600; // 6 hours
-
-/**
- * Opt into background revalidation. (see: https://github.com/vercel/next.js/discussions/43085)
- */
-export const generateStaticParams = async () => {
-  const squads = await getSquads({ from: fromDate(pointsUpdateDate) });
-  const compositions = new Set<string>();
-
-  squads.forEach(({ composition }) => {
-    if (composition) {
-      compositions.add(composition);
-    }
-  });
-
-  return [...compositions].map(id => ({
-    id,
-  }));
-};
-
-// Props
-// ---------------
-interface PageParams {
-  params: {
-    id: string;
-  };
-}
-
-// Metadata
-// ---------------
-export const generateMetadata = ({ params }: PageParams) => {
-  const ships = params.id.split('.').map(ship => getShipName(ship));
-  return createMetadata({
-    title: `Squad Composition: ${ships.join(', ')}`,
-    description: 'Take a look at what is currently flown in X-Wing!',
-    ogShips: params.id,
-  });
-};
-
-// Data
-// ---------------
-const getCompositionStats = async (composition: string, from: Date) => {
-  const squads = await getSquads({ from, composition });
-  const count = await getFactionCount({ from });
-  return compositionDetails({ composition, squads, count });
-};
-
-// Page
-// ---------------
-const Page = async ({ params }: PageParams) => {
-  const stats = await getCompositionStats(
-    params.id,
-    fromDate(pointsUpdateDate)
-  );
-
-  return (
-    <div className="grid gap-4 pt-3 md:grid-cols-12">
-      <Card className="col-span-full md:col-span-6">
-        <Card.Header>
-          <Card.Title>Overview</Card.Title>
-        </Card.Header>
-        <Card.Body className="flex flex-col gap-8 px-2 lg:px-4">
-          <Detail
-            label="Chassis"
-            size="large"
-            value={
-              <div className="flex flex-wrap gap-x-4 gap-y-1 pt-0.5">
-                {stats.ships.map((ship, idx) => (
-                  <div key={idx} className="flex items-center gap-1">
-                    <ShipIcon key={idx} ship={ship} className="text-3xl" />
-                    <span className="whitespace-nowrap text-lg">
-                      {getShipName(ship)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            }
-          />
-          <div className="grid grid-cols-[repeat(auto-fit,_minmax(min(155px,100%),1fr))] gap-2 pb-2">
-            <Detail
-              label="Percentile"
-              size="large"
-              value={toPercentage(stats.percentile)}
-            />
-            <Detail
-              label="Deviation"
-              size="large"
-              value={toPercentage(stats.deviation)}
-            />
-            <Detail
-              label="Winrate"
-              size="large"
-              value={stats.winrate !== null ? toPercentage(stats.winrate) : '-'}
-            />
-            <Detail
-              label="Frequency (in Faction)"
-              size="large"
-              value={toPercentage(stats.frequency)}
-            />
-            <Detail label="Count" size="large" value={stats.count} />
-          </div>
-        </Card.Body>
-      </Card>
-      <Card className="col-span-full md:col-span-6">
-        <Card.Header>
-          <Card.Title>Trend</Card.Title>
-          <Card.Body>
-            <TrendCurve value={stats.trend} />
-          </Card.Body>
-        </Card.Header>
-      </Card>
-      <PilotDetails
-        className="col-span-full"
-        ships={stats.ships}
-        value={stats.pilot}
-      />
-      <Card size="fit" inset="list" className="col-span-full">
-        <Card.Header>
-          <Card.Title>Squads</Card.Title>
-          <Card.Body>
-            <SquadGroups value={stats.squads} />
-          </Card.Body>
-        </Card.Header>
-      </Card>
-    </div>
-  );
-};
-
-export default Page;
diff --git a/app/analyze/composition/page.tsx b/app/analyze/composition/page.tsx
deleted file mode 100644
index b26ffa8d..00000000
--- a/app/analyze/composition/page.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { cache } from 'react';
-import { z } from 'zod';
-
-import { pointsUpdateDate } from '@/lib/config';
-import { getFactionCount, getSquads } from '@/lib/db/squads';
-import { getTournamentsCount } from '@/lib/db/tournaments';
-import { formatDate, fromDate, toDate, today } from '@/lib/utils/date.utils';
-
-import { Caption, Card, Inline, Message, Title } from '@/ui';
-import { Calendar, Rocket, Trophy } from '@/ui/icons';
-
-import {
-  CompositionFilter,
-  CompositionFilterProvider,
-  CompositionTable,
-} from '@/ui/stats/composition-stats';
-import { StatsFilter } from '@/ui/stats/stats-filter';
-import { createMetadata } from '@/lib/metadata';
-import { StatsHint } from '@/ui/stats/stats-hint';
-import { setup } from '@/lib/stats';
-import { CompositionData, composition } from '@/lib/stats/module';
-
-// Config
-// ---------------
-/**
- * Segment Config (see: https://beta.nextjs.org/docs/api-reference/segment-config)
- */
-export const revalidate = 21600; // 6 hours
-
-// Metadata
-// ---------------
-export const metadata = createMetadata({
-  title: 'Compositions',
-  description: 'Take a look at what is currently flown in X-Wing!',
-  ogTitle: 'Squad Compositions',
-  ogWidth: 65,
-});
-
-// Helpers
-// ---------------
-// Note: only checks the format, can still produce invalid dates (like 2022-02-31)
-const DATE_REGEX = /(\d{4})-(\d{2})-(\d{2})/;
-
-const schema = z
-  .object({
-    from: z.string().regex(DATE_REGEX).optional(),
-    to: z.string().regex(DATE_REGEX).optional(),
-    'small-samples': z.union([z.literal('show'), z.literal('hide')]).optional(),
-  })
-  .transform(({ 'small-samples': smallSamples, ...props }) => ({
-    ...props,
-    smallSamples: smallSamples === 'show',
-  }));
-
-const create = setup<CompositionData>([composition]);
-
-// Data
-// ---------------
-const getStats = cache(
-  async (from: Date, to: Date | undefined, smallSamples: boolean) => {
-    const [squads, tournaments, count] = await Promise.all([
-      getSquads({ from, to }),
-      getTournamentsCount({ from, to }),
-      getFactionCount({ from, to }),
-    ]);
-
-    return {
-      stats: create(squads, {
-        smallSamples,
-        count,
-        tournaments,
-      }),
-      meta: {
-        tournaments,
-        count,
-      },
-    };
-  }
-);
-
-// Props
-// ---------------
-interface AnalyzePageProps {
-  searchParams: {
-    from: string;
-    to: string;
-    'small-samples': 'show' | 'hide';
-  };
-}
-
-// Page
-// ---------------
-const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
-  const params = schema.safeParse(searchParams);
-
-  if (!params.success) {
-    return (
-      <div className="grid flex-1 place-items-center">
-        <Message variant="error">
-          <Message.Title>Whoopsie, something went wrong!</Message.Title>
-          Looks like there is an error in the given query parameters.
-        </Message>
-      </div>
-    );
-  }
-
-  const from =
-    params.data && params.data.from
-      ? fromDate(params.data.from)
-      : fromDate(pointsUpdateDate);
-  const to =
-    params.data && params.data.to ? fromDate(params.data.to) : undefined;
-
-  const { stats, meta } = await getStats(from, to, params.data.smallSamples);
-
-  return (
-    <>
-      <div className="pb-6">
-        <Title>Compositions</Title>
-        <Caption>
-          <Inline className="gap-4">
-            <Inline className="whitespace-nowrap">
-              <Calendar className="h-3 w-3" /> {formatDate(from)} -{' '}
-              {formatDate(to || today())}
-            </Inline>
-            <Inline className="whitespace-nowrap">
-              <Trophy className="h-3 w-3" /> {meta.tournaments} Tournaments
-            </Inline>
-            <Inline className="whitespace-nowrap">
-              <Rocket className="h-3 w-3" /> {meta.count.all} Squads
-            </Inline>
-          </Inline>
-        </Caption>
-      </div>
-      <CompositionFilterProvider>
-        <StatsFilter
-          smallSamples={!params.data.smallSamples}
-          dateRange={toDate(from, to)}
-        >
-          <CompositionFilter />
-        </StatsFilter>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-          <div className="col-span-full">
-            <Card inset="headless">
-              <Card.Body>
-                <CompositionTable
-                  value={stats.composition}
-                  collapsible={false}
-                />
-              </Card.Body>
-            </Card>
-          </div>
-          <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
-            <StatsHint />
-          </div>
-        </div>
-      </CompositionFilterProvider>
-    </>
-  );
-};
-
-export default AnalyzeCompositionPage;