Uh oh!
There was an error while loading. Please reload this page.
feat(analytics): #122 dashboard UI — charts, sortable users, promoted journey - #479
Conversation
… layer (#122) - AnalyticsCharts.tsx: hand-rolled SVG primitives (no chart lib): single- series day line/area with crosshair+tooltip hover layer, horizontal category bars with rounded data-ends and direct value labels; pure helpers (zeroFillDays/niceTicks/linePoints) unit-tested. Lazy-loaded via next/dynamic per the bundle-discipline convention. - Dashboard layout per the dataviz method + .impeccable.md: headline stat strip (type hierarchy, no card chrome), events/day + top-event-type bars, cost/day + cost-by-group bars with the group_by toggle, sortable top-users table, errors/day trend + feed. Every chart panel keeps a 'View data' table fallback; single-hue charts (forest; status red only on the errors trend) validated with the palette validator. - Trend panels now request ?bucket=day (the #121 backend series). - Promoted journey e2e/admin-analytics.spec.ts: generates rows via real student actions, polls the rollup, drives the dashboard as the seeded admin (charts, feed row, group-by toggle, presets, refusal for non-admins), db causality via queryRaw. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend-staging | 6c96105 | Commit Preview URL Branch Preview URL | Jul 30 2026, 06:39 PM |
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reached
Next review available in:8 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: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (9)
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 |
| const ro = new ResizeObserver((entries) => { | ||
| const w = entries[0]?.contentRect.width; | ||
| if (w) setWidth(Math.max(240, Math.floor(w))); | ||
| }); |
… scaling, header - zeroFillDays/DayPointValue move to lib/daySeries.ts (JSX-free): the screen's static import no longer creates a synchronous edge into AnalyticsCharts, so next/dynamic actually keeps the chart code out of the eager chunk. AnalyticsCharts re-exports for a single import site. - Tooltip positions as a wrapper PERCENTAGE (tooltipLeftPct, tested) instead of viewBox pixels — no drift when the rendered width falls under the 240px measurement floor (narrow viewports). - Stale #121-era screen header rewritten; unused type import dropped. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ndow emptied the e2e dashboard Caught by the promoted journey's first cycle run: under NEXT_PUBLIC_TEST_MODE presetRange built a frozen March 2026 window while the backend stamps events with its real clock, so every panel queried an empty range. Query bounds are a #426-family skip-list entry (stay real); pinned by a .testmode.test mirroring the established recipe. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Part of #122 (left open per closure policy — Andres verifies the UI and closes). Builds on the #121 data layer (PR #478).
What
AnalyticsCharts.tsx, no new dependency): hand-rolled SVG day line/area with a crosshair+tooltip hover layer, and horizontal category bars with 4px rounded data-ends + direct value labels. Pure math helpers (zeroFillDays/niceTicks/linePoints) are unit-tested; components lazy-load vianext/dynamic(ssr:false)./admin/analytics: headline stat strip (total events, active users, LLM cost, calls — type hierarchy, no card chrome), events-per-day + top event types, cost-per-day + cost-by-group with thegroup_bytoggle, a sortable top-users table, and an errors-per-day trend above the feed. Every chart panel keeps a 'View data' table fallback; truncation badges stay.#1B6C42for usage/cost, the status red only on the errors trend (title+labels carry identity, never color alone). Palette checked with the skill's validator; text wears text tokens.e2e/admin-analytics.spec.ts— real student actions generate events → poll the rollup → drive the dashboard as the seeded admin (charts render, feed row for the bogus path, group-by toggle, range preset, student refusal), DB causality viaqueryRaw.Notes
Tests
Frontend 384 passed (12 screen tests incl. bucket wiring, chart render, sort, table fallback; 8 chart-primitive tests), tsc clean, lint 0 errors. Full local e2e cycle (now 31 journeys) runs before merge.
🤖 Generated with Claude Code