begin charting fixes

frontend2/src/App.tsx

@@ -178,6 +178,7 @@ const router = createBrowserRouter([
           {
             path: "my_team",
             element: <MyTeam />,
+            errorElement: <ErrorBoundary />,
             loader: myTeamLoader(queryClient),
           },
           {

frontend2/src/components/compete/chart/EpisodeChart.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo, useState } from "react";
+import { useEpisodeList, useTournamentList } from "api/episode/useEpisode";
+import SelectMenu from "../../elements/SelectMenu";
+import TeamChart, { type ChartData } from "./TeamChart";
+import { useUserRatingHistoryList } from "api/compete/useCompete";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEpisodeId } from "contexts/EpisodeContext";
+
+const EpisodeChart: React.FC = () => {
+  const { episodeId } = useEpisodeId();
+  const queryClient = useQueryClient();
+
+  const [selectedEpisode, setSelectedEpisode] = useState(episodeId);
+
+  const episodeList = useEpisodeList({}, queryClient);
+  const tournamentList = useTournamentList(
+    { episodeId: selectedEpisode },
+    queryClient,
+  );
+  const ratingHistory = useUserRatingHistoryList({
+    episodeId: selectedEpisode,
+  });
+
+  const ratingData: Record<string, ChartData[]> | undefined = useMemo(() => {
+    if (!ratingHistory.isSuccess) return undefined;
+    const ratingRecord: Record<string, ChartData[]> = {};
+    return ratingHistory.data.reduce((record, teamData) => {
+      if (teamData.team_rating !== undefined) {
+        record[teamData.team_rating.team.name] =
+          teamData.team_rating.rating_history.map((match) => [
+            match.timestamp.getTime(),
+            match.rating,
+          ]);
+      }
+      return record;
+    }, ratingRecord);
+  }, [ratingHistory]);
+
+  return (
+    <div className="flex flex-1 flex-col gap-8">
+      <SelectMenu
+        options={
+          episodeList.data?.results?.map((ep) => ({
+            value: ep.name_short,
+            label: ep.name_long,
+          })) ?? []
+        }
+        label={"Select Episode"}
+        value={selectedEpisode}
+        onChange={setSelectedEpisode}
+        loading={tournamentList.isLoading}
+      />
+
+      <TeamChart
+        yAxisLabel="Rating"
+        values={ratingData}
+        loading={ratingHistory.isLoading}
+        loadingMessage="Loading rankings data..."
+      />
+    </div>
+  );
+};
+
+export default EpisodeChart;

frontend2/src/components/tables/chart/TeamChart.tsx → frontend2/src/components/compete/chart/TeamChart.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import NoDataToDisplay from "highcharts/modules/no-data-to-display";
-import * as chart from "./chartUtil";
+import * as chart from "./chartUtils";
 
 NoDataToDisplay(Highcharts);
 
@@ -133,15 +133,16 @@ const TeamChart: React.FC<TeamChartProps> = ({
     series: seriesData ?? [],
 
     legend: {
-      layout: "vertical",
-      align: "right",
-      verticalAlign: "top",
-      width: 250,
+      layout: "horizontal",
+      align: "center",
+      verticalAlign: "bottom",
+      // width: 100,
       maxHeight: 1e6,
       alignColumns: false,
     },
 
     xAxis: {
+      ...chart.highchartsOptionsBase.xAxis,
       type: "datetime",
       title: {
         text: "Local Date & Time",
@@ -181,6 +182,7 @@ const TeamChart: React.FC<TeamChartProps> = ({
   return (
     <div>
       <HighchartsReact
+        classname="w-full"
         highcharts={Highcharts}
         options={options}
         callback={(chart: Highcharts.Chart) => {

frontend2/src/components/compete/chart/chartUtils.ts

@@ -0,0 +1,55 @@
+import type Highcharts from "highcharts";
+
+export const formatNumber = (value: number, decimals = 0): string => {
+  return Number(value).toLocaleString(undefined, {
+    minimumFractionDigits: decimals > 0 ? decimals : 0,
+    maximumFractionDigits: decimals > 0 ? decimals : 0,
+  });
+};
+
+export const highchartsOptionsBase: Highcharts.Options = {
+  chart: {
+    zooming: {
+      type: "x",
+    },
+    panning: {
+      enabled: true,
+      type: "x",
+    },
+    panKey: "shift",
+    numberFormatter: formatNumber,
+  },
+  time: {
+    useUTC: true,
+  },
+  credits: {
+    href: 'javascript:window.open("https://www.highcharts.com/?credits", "_blank")',
+  },
+  exporting: {
+    sourceWidth: 1600,
+    sourceHeight: 800,
+    allowHTML: true,
+  },
+  xAxis: {
+    type: "datetime",
+    title: {
+      text: "Local Date & Time",
+    },
+    tickPixelInterval: 200,
+    crosshair: {
+      width: 1,
+    },
+    dateTimeLabelFormats: {
+      day: "%e %b",
+      hour: "%I:%M %P",
+      minute: "%I:%M:%S %P",
+    },
+  },
+  yAxis: {
+    allowDecimals: false,
+  },
+  tooltip: {
+    split: true,
+    valueDecimals: 0,
+  },
+};

frontend2/src/components/elements/SelectMenu.tsx

@@ -3,9 +3,11 @@ import { Listbox, Transition } from "@headlessui/react";
 import Icon from "./Icon";
 import FormError from "./FormError";
 import FormLabel from "./FormLabel";
+import Spinner from "components/Spinner";
 
 interface SelectMenuProps<T extends React.Key | null | undefined> {
   options: Array<{ value: T; label: string }>;
+  loading?: boolean;
   disabled?: boolean;
   label?: string;
   required?: boolean;
@@ -26,6 +28,7 @@ function SelectMenu<T extends React.Key | null | undefined>({
   required = false,
   options,
   value,
+  loading = false,
   disabled = false,
   placeholder,
   className = "",
@@ -59,7 +62,12 @@ function SelectMenu<T extends React.Key | null | undefined>({
           >
             <span>
               {value === undefined ? placeholder : valueToLabel.get(value)}
-            </span>
+            </span>{" "}
+            {loading && (
+              <div className="my-1 flex w-full justify-center">
+                <Spinner size="xs" />
+              </div>
+            )}
             <div
               className="absolute inset-y-0 right-0 mr-2 flex transform items-center
               transition duration-300 ui-open:rotate-180 ui-not-open:rotate-0"