0b74a6a2d2
- Move point progression chart below the standings table - Replace separate Points/Projected/Placement columns with: - Single stacked "actual / projected" Points column (shared PointsDisplay component) - "7-Day Change" column showing points gained + rank change over past 7 days - Remove Placement breakdown column - Sort ties alphabetically by team name (rank sort only) - All columns are sortable via new reusable useSortableData hook - Add sevenDayPointChange to TeamStandingWithChange type and model https://claude.ai/code/session_01CuCKFVYbpsKSQoFDcTYfY7
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
/**
|
|
* Reusable component for displaying actual / projected points in a stacked format.
|
|
* Used in standings tables and anywhere else points need to be shown with projections.
|
|
*/
|
|
interface PointsDisplayProps {
|
|
actualPoints: number | null | undefined;
|
|
projectedPoints: number | null | undefined;
|
|
totalPoints: number;
|
|
participantsRemaining?: number;
|
|
}
|
|
|
|
export function PointsDisplay({
|
|
actualPoints,
|
|
projectedPoints,
|
|
totalPoints,
|
|
participantsRemaining,
|
|
}: PointsDisplayProps) {
|
|
const displayed = actualPoints !== null && actualPoints !== undefined ? actualPoints : totalPoints;
|
|
const hasProjection =
|
|
projectedPoints !== null &&
|
|
projectedPoints !== undefined &&
|
|
participantsRemaining !== undefined &&
|
|
participantsRemaining > 0;
|
|
|
|
if (!hasProjection) {
|
|
return <span className="font-semibold">{displayed.toFixed(2)}</span>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-end">
|
|
<span className="font-semibold">{displayed.toFixed(2)}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{projectedPoints!.toFixed(2)} proj
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|