feat: Add historical tracking with pagination and trend visualization #62
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Reorganize components into tab-template/ with current/ and history/ subdirectories - Extract CurrentReportView and HistoryView into separate components - Create reusable components: StatCard, ResourceGroupCard, TrendChart, HistoricalReportCard - Move all types and commands to tab-template/types.ts (YAGNI - will extract when dashboard needs them) - Create shared utils.ts for rating colors, resource icons, and hosting status helpers - Improve file organization with consistent naming: tab-template/, dashboard-template/ - Update CLAUDE.md with new architecture and component documentation This refactor improves maintainability by: - Grouping view-specific components together - Separating concerns (current report vs historical reports) - Co-locating types with their usage - Following YAGNI principle for shared code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
## Issues Fixed 1. JSON parameter binding - TypeScript was sending PascalCase but ASP.NET Core expects camelCase, causing offset/pageIndex to always be 0 2. Pagination logic - Changed from offset-based to clean page-based pagination using .Page(pageIndex, limit) 3. Current report duplication - Used .WhereNotEquals() to exclude current report at query level instead of client-side filtering 4. Missing report IDs - Added SustainabilityPageDataID to SustainabilityResponse and captured it after database save 5. Inaccurate "Load More" button - Backend now returns hasMore flag based on COUNT query instead of client guessing ## Technical Changes - **Backend**: Added COUNT query to accurately calculate hasMore flag, returns tuple (reports, hasMore) - **Frontend**: Receives hasMoreHistory from backend, eliminating client-side guesswork - **Service**: Modified GetReportHistory to exclude current report by ID using WhereNotEquals - **Models**: Added SustainabilityPageDataID property to SustainabilityResponse (JsonIgnore) ## Result - No duplicate items in history - "Load More" button only appears when there's actually more data - Works correctly for all scenarios (1 item, 10 items, 11 items, etc.) - Clean page-based pagination without offset math issues 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Update CLAUDE.md to comprehensively document the historical reports view functionality and pagination implementation added in this branch. Key documentation additions: 1. Service Layer (GetReportHistory): - Updated method signature to reflect tuple return pattern - Documented excludeReportId parameter for filtering current report - Explained COUNT-based hasMore detection pattern - Clarified page index vs offset-based pagination 2. UI Layer (SustainabilityTab PageCommands): - Documented RunReport return structure with hasMoreHistory flag - Explained report ID capture pattern for proper exclusion - Updated LoadMoreHistory parameter (pageIndex, not offset) - Documented tuple return pattern for pagination metadata 3. Frontend (History View): - Comprehensive pagination pattern documentation - Explained COUNT-based button visibility (not client-side guessing) - Documented state management (nextPageIndex, hasMoreHistory) - Added JSON parameter binding section (camelCase TypeScript → PascalCase C#) 4. Data Flow: - Added complete "Loading Historical Reports (Pagination)" section - Documented initial load, load more, and post-new-report flows - Explained .WhereNotEquals() pattern for current report exclusion - Clarified .Page(pageIndex, limit) semantics 5. Data Models: - Added SustainabilityResponse.cs documentation - Explained SustainabilityPageDataID role in exclusion logic - Documented all properties and their purposes 6. Debugging Tips: - Added pagination-specific troubleshooting guidance - Covered JSON casing issues, hasMore flag problems, ID capture issues This documentation provides developers with a complete understanding of how the historical reports pagination system works, common pitfalls to avoid (offset vs pageIndex, camelCase JSON binding), and debugging strategies. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Split dual-axis trend chart into two separate side-by-side charts - CO₂ emissions chart (red) and page weight chart (blue) now independent - Each chart has its own Y-axis scale for clearer interpretation - Added rotated Y-axis labels showing units - Increased chart size (550x200px) for better visibility - Charts now spread across container with space-between layout - Add explanatory text above charts - Shows number of reports being displayed (up to 10 loaded) - Clarifies chronological order (oldest to newest) - Restructure historical report card layout - Left: Date and resource count - Right: Carbon rating badge, metrics, and chevron grouped together - Metrics use center alignment with consistent spacing - Chevron icon now neutral gray (#6b7280) instead of default color - Fix loading state management - Removed unused setIsLoadingMore prop from HistoryView - Parent component now manages loading state via onLoadMore callback - Cleaner separation of concerns between components These changes make the trend analysis much clearer and the report cards more visually balanced.
Add custom agent profile for Kentico XbyK development assistance: - Helps with admin UI customization, UIPages, and React components - References official Kentico documentation via MCP tools - Provides guidance specific to this sustainability project's patterns - Includes expertise in PageCommands, module installation, and InfoProvider patterns
Add 5 new agent profiles tailored to this project's needs: - nuget-package-maintainer: Version management, SemVer decisions, package configuration - playwright-integration-specialist: Browser automation, performance measurement, resource tracking - react-admin-ui-developer: XbyK admin UI patterns, PageCommands, component architecture - xbyk-component-reference: Quick reference for native XbyK components and design system - documentation-maintainer: Keep CLAUDE.md accurate, concise, and optimized for context windows All agents include project-specific patterns, file references, and examples from the codebase.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive historical tracking capabilities to the sustainability module, enabling users to view past reports, analyze trends over time, and load paginated report history. The implementation refactors the monolithic React component into a clean view-based architecture while adding backend pagination support with COUNT-based "hasMore" detection.
Key Changes:
- Reorganized frontend into reusable component architecture with separate current/history views
- Implemented page-based pagination with accurate "Load More" button visibility
- Added dual-chart trend visualization showing CO₂ emissions and page weight independently
- Fixed JSON parameter binding and duplicate report issues
Reviewed changes
Copilot reviewed 24 out of 27 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
XperienceCommunity.Sustainability.csproj |
Version bump to 2.7.0 |
SustainabilityTab.cs |
Added LoadMoreHistory PageCommand and initial history loading in ConfigureTemplateProperties |
SustainabilityService.cs |
Implemented GetReportHistory with pagination and proper ID capture for exclusion |
SustainabilityResponse.cs |
Added SustainabilityPageDataID property for report filtering |
entry.tsx |
Updated exports to reflect new file structure |
utils.ts |
Extracted shared utilities for rating colors, resource icons, and hosting status |
types.ts |
Centralized tab-specific types and command constants |
TrendChart.tsx |
New component with two independent SVG charts for emissions and page weight |
HistoryView.tsx |
New history view with trend charts and paginated report list |
HistoricalReportCard.tsx |
Collapsible card component for displaying historical reports |
StatCard.tsx |
Extracted reusable metric display card |
ResourceGroupCard.tsx |
Extracted expandable resource list component |
CurrentReportView.tsx |
Extracted current report display with hero section and resource breakdown |
SustainabilityTabTemplate.tsx |
Refactored main orchestrator with view toggle and pagination state management |
SustainabilityTabTemplate.tsx (deleted) |
Removed old monolithic file in favor of new structure |
README.md |
Added Historical Tracking feature documentation |
CLAUDE.md |
Comprehensive updates documenting pagination patterns, data flow, and parameter binding |
| Agent profiles | Added 5 specialized agent profiles for project development guidance |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/Client/src/Sustainability/tab-template/history/TrendChart.tsx
Outdated
Show resolved
Hide resolved
src/Client/src/Sustainability/tab-template/history/TrendChart.tsx
Outdated
Show resolved
Hide resolved
Address 3 of 4 Copilot recommendations from PR review: 1. [Rejected] SustainabilityPageDataID [JsonIgnore] attribute - Intentionally excluded from JSON serialization - Internal DB identifier only used for backend query filtering - Frontend doesn't need this ID - proper encapsulation 2. [Fixed] Extract magic number 10 to named constant - Added MAX_TREND_REPORTS constant in TrendChart.tsx - Documents relationship to pagination limit - Improves maintainability 3. [Fixed] Add user-facing message for insufficient trend data - Previously returned null silently when < 2 reports - Now shows helpful message: "Trend analysis requires at least 2 data points" - Better UX for users with only 1 report 4. [Fixed] Remove unnecessary null-coalescing operator - LoadMoreHistory parameter is non-nullable - Removed redundant commandData?.PageIndex ?? 0 - Simplified to commandData.PageIndex 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds comprehensive historical tracking capabilities to the sustainability module, allowing users to view historical reports, analyze trends over time, and load paginated report history.
Key Features
Technical Changes
Frontend Refactor:
tab-template/current/andtab-template/history/)CurrentReportView,HistoryView,TrendChart,HistoricalReportCard,StatCard,ResourceGroupCardutils.tsfor rating colors, resource icons, and hosting status helperstab-template/types.tsfor better organizationBackend Improvements:
hasMoredetectionGetReportHistory()method with current report exclusion via.WhereNotEquals()LoadMoreHistoryPageCommand for loading additional historical reportsSustainabilityPageDataIDafter save to enable proper filteringBug Fixes:
.Page(pageIndex, limit)Documentation:
Version: Bumped to 2.7.0
Files Changed
SustainabilityTabTemplate.tsxinto organized component structureTest plan
🤖 Generated with Claude Code