style(analytics): filled/hollow legend circles + 30% area fills#73
Merged
Conversation
The default Chart.js legend struck through hidden series (confusing). Replace it with a custom legend: a filled circle when the series is shown, a hollow circle when hidden (click still toggles). Give both lines a translucent rgba(color, 0.3) area fill beneath them (theme-color-derived via a small hex/rgb→rgba helper). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Order datasets [Page views, Users] so the blue Users line + fill render above the gray Page views (later-drawn = on top); reverse the legend so Users still lists first. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Chart.js draws datasets in reverse sorted order (lowest order/index drawn LAST = on top), so the earlier array reorder pushed Users to the bottom. Use the explicit `order` property (Users:0 over Page views:1) and drop the legend reverse. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- dashboard: drop the Page views (gray) area fill to 15% (Users stays 30%) - widget: its inline script sits in the page content, which parses BEFORE the admin layout's Chart.js — so 'typeof Chart === undefined' was true and it returned before even fetching (no numbers, no sparkline). Defer the work to DOMContentLoaded (Chart.js loaded by then) and populate the numbers regardless of the chart lib. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…both lines + legend - both numbers now fs-2 (equal, prominent) instead of a huge Users + tiny Page views - taller chart (56 -> 120px) - plot BOTH Users + Page views (fills + z-order, Users on top) and show the same filled/hollow toggle legend as the full dashboard chart Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move the Users/Page-views toggle into the numbers row as a custom HTML legend (filled/ hollow circles, click toggles), float the numbers over the chart (negative-margin overlap), and enable the y-grid + x/y axis labels like the full dashboard chart. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Merged
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
1 participant
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.
Two dashboard-chart tweaks requested after the chart started rendering:
generateLabelsoff each dataset's visibility,hidden:falseso the label is never struck through). A customonClickkeeps the click-to-toggle.rgba(color, 0.3)) beneath them — Users in--bs-primary, Page views in--bs-secondary-color— via a small hex/rgb→rgba helper so the fill tracks the active theme/skin.Deployed + verified on tiger-dev (asset serves 200).
🤖 Generated with Claude Code