Skip to content

Commit

Permalink
begin charting fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
lowtorola committed Oct 12, 2024
1 parent 389f142 commit 11bb609
Show file tree
Hide file tree
Showing 10 changed files with 225 additions and 272 deletions.
1 change: 1 addition & 0 deletions frontend2/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ const router = createBrowserRouter([
{
path: "my_team",
element: <MyTeam />,
errorElement: <ErrorBoundary />,
loader: myTeamLoader(queryClient),
},
{
Expand Down
64 changes: 64 additions & 0 deletions frontend2/src/components/compete/chart/EpisodeChart.tsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -181,6 +182,7 @@ const TeamChart: React.FC<TeamChartProps> = ({
return (
<div>
<HighchartsReact
classname="w-full"
highcharts={Highcharts}
options={options}
callback={(chart: Highcharts.Chart) => {
Expand Down
55 changes: 55 additions & 0 deletions frontend2/src/components/compete/chart/chartUtils.ts
Original file line number Diff line number Diff line change
@@ -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,
},
};
10 changes: 9 additions & 1 deletion frontend2/src/components/elements/SelectMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,6 +28,7 @@ function SelectMenu<T extends React.Key | null | undefined>({
required = false,
options,
value,
loading = false,
disabled = false,
placeholder,
className = "",
Expand Down Expand Up @@ -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"
Expand Down
79 changes: 0 additions & 79 deletions frontend2/src/components/tables/chart/EpisodeChart.tsx

This file was deleted.

112 changes: 0 additions & 112 deletions frontend2/src/components/tables/chart/chartUtil.ts

This file was deleted.

Loading

0 comments on commit 11bb609

Please sign in to comment.