fix(consumption): display correct year labels for annual curve #50
Conversation
The annual curve chart was showing incorrect year labels when periods spanned multiple calendar years. Now uses "YYYY-YYYY" format when a 365-day period crosses year boundaries, e.g. "2024-2025" instead of just "2025". 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
m4dm4rtig4n
force-pushed
the
fix-annual-chart-years
branch
from
7f8d2a8 to
78686b3
Compare
There was a problem hiding this comment.
Pull request overview
This PR fixes the annual curve chart year labels to properly display date ranges when 365-day rolling periods span multiple calendar years. The implementation adds a formatPeriodLabel function that displays "YYYY-YYYY" format (e.g., "2024-2025") when a period crosses year boundaries, and "YYYY" format when the period stays within a single year. This enhancement improves clarity for users viewing rolling-window consumption and power data comparisons.
Key Changes:
- Added
formatPeriodLabelhelper function to format period labels based on year span - Updated consumption data period labels to use the new formatting
- Updated power data period labels to use the new formatting
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/web/src/pages/Consumption/hooks/useConsumptionCalcs.ts | Added formatPeriodLabel function (duplicated in two locations) to properly format year labels for 365-day rolling periods in both consumption and power data calculations |
| apps/web/package-lock.json | Auto-generated dependency tree updates (unrelated to the PR's functionality) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const formatPeriodLabel = (startDate: Date, endDate: Date): string => { | ||
| const startYear = startDate.getFullYear() | ||
| const endYear = endDate.getFullYear() | ||
| if (startYear === endYear) { | ||
| return String(endYear) | ||
| } | ||
| return `${startYear}-${endYear}` | ||
| } |
There was a problem hiding this comment.
The formatPeriodLabel function is duplicated in two places in this file (lines 90-97 and 276-283). Consider extracting this function to a higher scope or to a utility file to follow the DRY (Don't Repeat Yourself) principle and make it easier to maintain.
Fix the annual curve chart year labels to properly show date ranges when periods span multiple calendar years.
The chart now displays "YYYY-YYYY" format (e.g., "2024-2025") for 365-day periods that cross year boundaries, and "YYYY" for periods within the same year. This provides clearer understanding of which years are being compared on the rolling-window consumption chart.
Updates both consumption and power data period labels for consistency.