chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 1

Sort point progression legend by ranking and add team links to standings rows

Browse source
This commit is contained in:
Chris Parsons 2026-04-16 11:54:48 -07:00
parent 6fb59633d5
commit c3472f591e
3 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/standings/PointProgressionChart.stories.tsx
View file

@ -9,7 +9,7 @@ const meta: Meta<typeof PointProgressionChart> = {
layout: "padded",
docs: {
description: {
component: "Multi-line chart showing team point progression over time. Features monotone curve rendering and interactive legend hover highlighting to isolate individual team lines.",
component: "Multi-line chart showing team point progression over time. Features monotone curve rendering, interactive legend hover highlighting to isolate individual team lines, and legend sorted by current ranking.",
},
},
},
@ -90,7 +90,7 @@ export const OverlappingPoints: Story = {
parameters: {
docs: {
description: {
story: "Demonstrates interactive highlighting via the legend. Hover over a team name in the legend to isolate that team's line and dim the others.",
story: "Demonstrates interactive highlighting via the legend and legend sorted by current ranking. Hover over a team name in the legend to isolate that team's line and dim the others.",
},
},
},

9
app/components/standings/PointProgressionChart.tsx
View file

@ -105,6 +105,13 @@ export function PointProgressionChart({ chartData, teams }: PointProgressionChar
);
}
const latestData = chartData[chartData.length - 1];
const teamsByRank = [...teams].toSorted((a, b) => {
const aPoints = (typeof latestData[a.name] === 'number' ? latestData[a.name] : 0) as number;
const bPoints = (typeof latestData[b.name] === 'number' ? latestData[b.name] : 0) as number;
return bPoints - aPoints;
});
return (
<Card>
<CardHeader>
@ -148,7 +155,7 @@ export function PointProgressionChart({ chartData, teams }: PointProgressionChar
</ResponsiveContainer>
</div>
<CustomLegend
payload={teams.map((team, index) => ({ value: team.name, color: COLORS[index % COLORS.length] }))}
payload={teamsByRank.map((team) => ({ value: team.name, color: COLORS[teams.findIndex(t => t.id === team.id) % COLORS.length] }))}
onHover={setHoveredLine}
onLeave={() => setHoveredLine(null)}
/>

1
app/routes/leagues/$leagueId.standings.$seasonId.tsx
View file

@ -146,6 +146,7 @@ export default function LeagueStandings() {
points: s.totalPoints,
rankChange: s.rankChange,
pointChange: s.sevenDayPointChange,
href: `/leagues/${league.id}/standings/${season.id}/teams/${s.teamId}`,
}));
return (