Add spend visualizations to the OSS dashboard - #1
Merged
Conversation
Light paper theme with the shared brand tokens (Space Grotesk + JetBrains Mono, emerald/amber accents, dot grid, wordmark, favicon), and a light-background categorical palette for the cost charts.
Add validated, colorblind-safe spend charts across the dashboard: - palette.js: 8-hue categorical series palette validated against the light card surface (worst adjacent CVD ΔE 8.9, normal-vision ΔE 19.6); slot 5 is the brand emerald. Assigned in fixed order, folding a 9th category to gray. - DonutChart: spend composition by provider/model with center total + legend. - HBarChart: ranked single-hue spend leaderboard (color tracks magnitude, not rank) with an "other" fold. - BarChart: reuse the shared palette, add 2px stacked-segment gaps and richer per-segment tooltips. - Overview: provider donut + top-function/top-model leaderboards. - Models: provider donut + model leaderboard. Routes/Functions: leaderboards. - mock: roll provider/module/route totals up from the underlying model/ function items so every view reconciles to the same window total. 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
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.
Adds engaging, colorblind-safe spend charts across the OSS dashboard so spend by function, model, and provider is visual rather than table-only.
What's new
palette.js) — 8-hue order checked against the light card surface (worst adjacent CVD ΔE 8.9 ≥ 8 target, normal-vision ΔE 19.6 ≥ 15 floor); slot 5 is the brand emerald. Assigned in fixed order; a 9th category folds into a neutral gray.Verification
npm run buildpasses.Note: this branch also carries the earlier local "Restyle dashboard to match the metergraph brand" commit that hadn't been pushed; it may need a rebase onto the latest
main.🤖 Generated with Claude Code