feat(dashboard): refine activity calendar gradation, colors, alignment + chart day markers#443
Merged
Merged
Conversation
The activity calendar used a 5-level log scale, which compressed the busy end so high-volume days were indistinguishable (e.g. a 1M and a 1.5M tokens/day both pinned to the top shade). - Switch to a 10-level power scale (exponent 0.7): keeps high-volume days separated while still lifting quiet days off the lightest level. - Recolor the green ramp to a graduated blue derived from the prompt-cache blue (--info), across the dark and both light theme blocks. - Make the legend data-driven so it always mirrors the grid's level count. - Update tests for the new scale and add a legend-coverage test. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ay markers Two dashboard chart fixes: - Activity calendar: align week columns to Sunday (was Monday/ISO) so the rows read Sun..Sat top-to-bottom, matching the Mon/Wed/Fri day labels. Previously Monday sat in the top row while its label aligned to the second row. Applied to both buildCalendarGrid and calendarMonthLabels so month headers stay over the right columns; added a Sunday-first test. - Live token throughput chart: draw the day-boundary divider and date label in a new high-contrast --chart-day-marker color (the primary text color: bright on dark, dark on light) at higher opacity, so the marker and especially its date label are legible instead of faint muted gray. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe dashboard updates calendar heatmap scaling to 10 levels with Sunday-aligned grid layout, adds a dedicated day-marker color token, makes the legend dynamic, and changes the overview token chart to use stacked fills and summed tooltip totals. ChangesDashboard calendar scaling and chart marker updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@internal/admin/dashboard/static/js/modules/contribution-calendar.test.cjs`:
- Around line 96-105: The calendarLegendLevels test is too loose and can miss
ordering or duplicate issues in the legend data. Update the assertion in
contribution-calendar.test.cjs so it verifies the exact full 0 through 10
sequence returned by createCalendarModule().calendarLegendLevels(), rather than
only checking the endpoints and membership. Keep the focus on the
calendarLegendLevels helper and ensure the expected array order matches what
page-overview.html renders.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0eeb890c-5ff8-41ec-8159-1cf2e380c8a3
📒 Files selected for processing (6)
internal/admin/dashboard/static/css/dashboard.cssinternal/admin/dashboard/static/js/dashboard.jsinternal/admin/dashboard/static/js/modules/contribution-calendar.jsinternal/admin/dashboard/static/js/modules/contribution-calendar.test.cjsinternal/admin/dashboard/static/js/modules/live-tokens.jsinternal/admin/dashboard/templates/page-overview.html
Comment on lines
+96
to
+105
| test('calendarLegendLevels covers level 0 through the max level', () => { | ||
| const m = createCalendarModule(); | ||
| const levels = m.calendarLegendLevels(); | ||
| assert.equal(levels[0], 0, 'starts at the empty level'); | ||
| assert.equal(levels[levels.length - 1], 10, 'ends at the darkest level'); | ||
| // Every active level must have a matching swatch so the legend mirrors the grid. | ||
| for (let v = 1; v <= 10; v++) { | ||
| assert.ok(levels.includes(v), `legend includes level ${v}`); | ||
| } | ||
| }); |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Assert the exact legend sequence.
Because the template renders swatches in the returned order, this test should verify the full 0..10 array, not just endpoints and membership. A shuffled or duplicate-filled result would still pass here but break the legend ordering in internal/admin/dashboard/templates/page-overview.html, Lines 219-221.
Suggested tightening
test('calendarLegendLevels covers level 0 through the max level', () => {
const m = createCalendarModule();
const levels = m.calendarLegendLevels();
- assert.equal(levels[0], 0, 'starts at the empty level');
- assert.equal(levels[levels.length - 1], 10, 'ends at the darkest level');
- // Every active level must have a matching swatch so the legend mirrors the grid.
- for (let v = 1; v <= 10; v++) {
- assert.ok(levels.includes(v), `legend includes level ${v}`);
- }
+ assert.deepEqual(
+ levels,
+ Array.from({ length: 11 }, (_, i) => i),
+ 'legend should render each level exactly once in ascending order'
+ );
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| test('calendarLegendLevels covers level 0 through the max level', () => { | |
| const m = createCalendarModule(); | |
| const levels = m.calendarLegendLevels(); | |
| assert.equal(levels[0], 0, 'starts at the empty level'); | |
| assert.equal(levels[levels.length - 1], 10, 'ends at the darkest level'); | |
| // Every active level must have a matching swatch so the legend mirrors the grid. | |
| for (let v = 1; v <= 10; v++) { | |
| assert.ok(levels.includes(v), `legend includes level ${v}`); | |
| } | |
| }); | |
| test('calendarLegendLevels covers level 0 through the max level', () => { | |
| const m = createCalendarModule(); | |
| const levels = m.calendarLegendLevels(); | |
| assert.deepEqual( | |
| levels, | |
| Array.from({ length: 11 }, (_, i) => i), | |
| 'legend should render each level exactly once in ascending order' | |
| ); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@internal/admin/dashboard/static/js/modules/contribution-calendar.test.cjs`
around lines 96 - 105, The calendarLegendLevels test is too loose and can miss
ordering or duplicate issues in the legend data. Update the assertion in
contribution-calendar.test.cjs so it verifies the exact full 0 through 10
sequence returned by createCalendarModule().calendarLegendLevels(), rather than
only checking the endpoints and membership. Keep the focus on the
calendarLegendLevels helper and ensure the expected array order matches what
page-overview.html renders.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Confidence Score: 5/5The changes are dashboard-only visual refinements with no API or provider behavior impact. The modified calendar scale, Sunday-first alignment, legend generation, and chart marker color changes are narrowly scoped and covered by updated calendar tests.
 T-Rex LogsWhat T-Rex did
Reviews (1): Last reviewed commit: "fix(dashboard): Sunday-align activity ca..." | Re-trigger Greptile |
The Daily Token Usage line chart drew every series from the axis baseline, so Input/Output/Prompt-cached/Locally-cached overlapped instead of summing. Convert it to a stacked area chart so each series sits on the one below and the band's top edge is the per-unit total. Enable y/x axis stacking and add a 'Total' line to the tooltip. The series are additive and non-overlapping (paid input, output, prompt-cache reads, local cache) — the same model the live throughput bar chart stacks — so the total is correct with no double-counting. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Refines the dashboard's GitHub-style Activity calendar and the live token throughput chart's day markers.
Activity calendar
--info(the prompt-cache blue), across the dark and both light theme blocks. Legend is now data-driven so it always mirrors the grid.Monlabel lined up with the second row. Now aligned to Sunday → rows read Sun..Sat, matching theMon/Wed/Frilabels (GitHub style). Applied to bothbuildCalendarGridandcalendarMonthLabels.Live token throughput chart
--chart-text) at low opacity, so they were faint. They now use a new high-contrast--chart-day-markercolor (the primary text color: bright on dark, dark on light) at higher opacity — the date label especially is now legible.User-visible impact
Dashboard-only (Overview page). No API or provider behavior changes.
Tests
contribution-calendar.test.cjsupdated for the new scale; added legend-coverage and Sunday-first regression tests. 8/8 pass.🤖 Generated with Claude Code
Summary by CodeRabbit