feat(ui): SVG chart primitives for the B2 analytics batch (U5 B2)#438
Conversation
First B2 slice — the shared chart primitives all four analytics screens (Analytics, Productivity, Merge Analytics, Model Usage) will compose, hand-drawn SVG with no charting dependency (matching the mockups and the app's existing approach): - Sparkline: compact inline trend polyline with optional soft area fill, tone-colored; decorative by default, labeled via ariaLabel. - LineChart: multi-series polylines on a shared y-scale over a dashed grid, with optional legend and edge-anchored x-axis labels. - StatTile: dashboard summary tile (value + label + sub) with an optional sparkline slot; tone-colors the value. - charts.ts: pure geometry helpers (seriesToPoints inverts Y and centers flat series; pointsToArea closes to the baseline), exported and unit-tested from the app suite since libs/ui has no CI runner (7 tests). Presentational only — no screen or pilot in this slice; the four B2 screens land on top. Verified in Storybook (11 stories) light + dark. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
Warning Review limit reached
Next review available in: 58 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (12)
✨ Finishing Touches🧪 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 |
Preempts Biome noArrayIndexKey on the decorative grid lines; keys are unique and stable per line. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
…2) (#439) Second B2 slice, composing the chart primitives from #438 into a generic dashboard screen that all four B2 views can reuse: - libs/ui: new AnalyticsDashboard screen — a KPI stat-tile row (each with an optional area sparkline), a column of titled line-chart cards, and an optional right rail of summary meta cards; loading/error/empty states with aria-live. Data-agnostic via new shared types UiKpi / UiChartCard, so Productivity / Merge Analytics / Model Usage can reuse it by mapping their report onto the same props. - Electron: pure analytics-ui mappers (formatCount/Percent/Cost, successRateTone, UTC shortDate, evenly-sampled axis labels, and buildKpis/buildCharts/buildSections from AnalyticsReport; 14 tests) + AnalyticsPilotView over the existing analytics.getReport IPC. Mounted as "Analytics (new UI)" beside the legacy multi-tab view. - i18n: analytics:analyticsPilot.* keys (en+fr), navigation.analyticsNext. Scope: the pilot renders the report's summary KPIs + trend charts + outcome/QA summary cards. The legacy view keeps the agent-stats and QA-issue drilldowns (dedicated tables), which are a natural part 2. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
1 participant
Summary
First slice of B2 "Analytics & usage". Rather than porting a chart-heavy dashboard in one go, this lands the shared chart primitives that all four B2 screens (Analytics, Productivity, Merge Analytics, Model Usage) will compose — so the SVG geometry is written and verified once.
No charting library is added: both the
.lazywebanalytics mockups and the app's existing analytics components draw charts by hand with SVG<polyline>, so these primitives match that approach (and stay dependency-free / CSP-safe).New primitives (libs/ui)
Sparkline— compact inline trend line as a single<polyline>, with an optional soft area fill; tone-colored (info/good/warn/bad/neutral). Decorative by default (aria-hidden), or labeled viaariaLabel.LineChart— multi-series polylines on a shared y-scale over a dashed grid, with an optional legend and edge-anchored x-axis labels.StatTile— dashboard summary tile (big value + label + optional sub-line) with an optionalsparklineslot; tone-colors the value.charts.ts— pure geometry helpers:seriesToPoints(evenly spaces x, inverts y for SVG's top-left origin, centers a flat series, applies vertical padding) andpointsToArea(closes a line to the baseline).Testing
libs/uihas no CI test runner, so the pure geometry helpers are exported from the package and unit-tested from the app's vitest suite — 7 tests (ascending/flat/padded series, empty, single-point, area closing).libs/ui+ Electron tsc clean; Storybook rebuilt (11 stories), Sparkline / LineChart / StatTile verified in light + dark (two-series line chart with grid + legend + axis labels, stat tile with area-filled sparkline).Next in B2
The Analytics screen composes these into stat tiles + trend charts; then Productivity / Merge Analytics / Model Usage reuse the same primitives.
🤖 Generated with Claude Code