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

app/components/standings/PointProgressionChart.stories.tsx

@@ -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.",
       },
     },
   },

app/components/standings/PointProgressionChart.tsx

@@ -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)}
           />

app/routes/leagues/$leagueId.standings.$seasonId.tsx

@@ -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 (