8c5389909d
* Redesign standings page with sortable table, 7-day change, and chart repositioned - 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 * Code review fixes: module-level comparators, correct type on SortableHead, handle negative point change, remove redundant spread - Move comparators object to module level (closes over nothing, no useMemo needed) - Use SortConfig<StandingRow> on SortableHead instead of inline duplicate type - SevenDayChange: handle negative pointChange with correct sign and color - Remove redundant sevenDayPointChange explicit assignment (already in ...standing spread) https://claude.ai/code/session_01CuCKFVYbpsKSQoFDcTYfY7 * Update StandingsTable tests to match redesigned component - Remove showPlacementBreakdown prop (no longer exists on component) - Replace Placement Breakdown test suite with 7-Day Change column tests - Update header assertion: "Placements" → "7-Day Change" - Add tests for positive/negative point change display and rank change indicators - Remove accessibility test for placement title attributes https://claude.ai/code/session_01CuCKFVYbpsKSQoFDcTYfY7 * Fix movement indicator arrow count assertion to exclude sort header arrows queryAllByText(/↑|↓/) was matching the active sort column's ↑ indicator. Narrow to /[↑↓]\d/ so only movement indicators (↑1, ↓1) are counted. https://claude.ai/code/session_01CuCKFVYbpsKSQoFDcTYfY7 --------- Co-authored-by: Claude <noreply@anthropic.com>
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>
|
|
);
|
|
}
|