Implement EpisodeChart.tsx #807
Conversation
Desperationis
requested review from
lowtorola and
acrantel
and removed request for
lowtorola
|
@Desperationis see how the charts don't fill the section card? Is this how they look on your end? 
|
| ["Tournament 1", 1673156004189], | ||
| ["Tournament 2", 1673164004189], |
There was a problem hiding this comment.
We can query the tournaments from the api (would recommend) and just use the display_date field 😎
| export interface TeamChartProps { | ||
| yAxisLabel: string; | ||
| values?: Record<string, ChartData[]>; | ||
| loading?: boolean; | ||
| loadingMessage?: string; | ||
| plotLines?: Array<[string, UTCMilliTimestamp]>; |
There was a problem hiding this comment.
nit: would a name like verticalLabels or similar be more descriptive of what these actually look like/are?
|
|
||
| const EpisodeChart = (): JSX.Element => { | ||
| const queryClient = useQueryClient(); | ||
| const [episode, setEpisode] = useState("bc23"); |
There was a problem hiding this comment.
we have an importable helper constant called DEFAULT_EPISODE that could be used for a default, or (I'd prefer) could simply query the name_short of the currently navigated-to episode id using useEpisodeId
There was a problem hiding this comment.
Also nit: this is an episodeId not an episode (super minor)
| let options = [{ value: "", label: "" }]; | ||
|
|
||
| if (episodeList?.results !== undefined) { | ||
| options = episodeList.results.map((e) => { | ||
| return { value: e.name_short, label: e.name_long }; | ||
| }); | ||
| } |
There was a problem hiding this comment.
I think a useMemo might save some performance here, as well as make this more interpretable
|
|
||
| return ( | ||
| <div> | ||
| <SelectMenu |
There was a problem hiding this comment.
I added a loading prop to the SelectMenu, so you could populate it here with episodeList.isLoading (although it should be always pre-loaded with stale data since it is one of the first queries we call on app launch)
|
Hi Lowell, thanks for the feedback. I'm a little hosed studying for finals right now but once that is settled I'll do the tweaks |
EpisodeChartis a component that usesTeamChartto display the top 10 teams in any given year. I also added one more prop toTeamChartto take in tournament dates. I'll implementEpisodeChartautomatically listing tournament dates later, for now there is only placeholder code that shows up inbc22.Closes #783 🚀