feat(web): redesign analytics dashboard with observable plot by AmanVarshney01 · Pull Request #973 · AmanVarshney01/create-better-t-stack

AmanVarshney01 · 2026-03-16T21:02:59Z

Summary

replace the old analytics charts with Observable Plot and remove the legacy chart wrapper
rework the analytics layout to stay aligned, responsive, and consistent with the existing site style while moving the live logs above the dashboard
clean up chart spacing, tooltip styling, and calendar-day analytics shaping so momentum and weekday views handle quiet days correctly

Verification

bun run check
bun run build:web
browser pass on /analytics at desktop and mobile widths

Summary by CodeRabbit

New Features
- Redesigned analytics dashboard with refreshed header, live metrics, and responsive layout
- New live metrics tiles, trendline sparkline, and expanded momentum/summary metrics
- Added a "source map" section linking external analytics resources
- New, more compact and accessible chart components and layouts (timelines, distributions, matrices)
Dependencies
- Replaced Recharts with Observable Plot for charting and visualization

vercel · 2026-03-16T21:03:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
create-better-t-stack-web	Ready	Preview, Comment	Mar 16, 2026 9:58pm

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2fee50235a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/backend/convex/analytics.ts

coderabbitai · 2026-03-16T21:17:55Z

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

Migrates the analytics dashboard from Recharts to Observable Plot: adds Plot-based rendering infrastructure, expands analytics data types and helpers, replaces chart UI and styles, updates analytics client/backend data assembly, and refactors multiple analytics components and layout props.

Changes

Cohort / File(s)	Summary
Package / Dependency `apps/web/package.json`	Added `@observablehq/plot` and removed `recharts`.
Charting runtime & integration `apps/web/src/app/(home)/analytics/_components/plot-chart.tsx`, `apps/web/src/app/global.css`	Added PlotChart component and Plot palette/theme read; replaced Recharts-specific CSS with Plot-focused styles.
Removed legacy chart UI `apps/web/src/components/ui/chart.tsx`	Deleted the old chart UI stack (ChartContainer, ChartTooltip, ChartLegend, ChartStyle and ChartConfig type).
Type system & data shapes `apps/web/src/app/(home)/analytics/_components/types.ts`, `apps/web/src/app/(home)/analytics/_components/analytics-helpers.ts`	Expanded analytics types to point-based/time-series, share/version distributions, combo matrices, momentum snapshot; added numerous helpers (formatting, label shortening, share/matrix builders, plot layout helpers).
Analytics client & backend `apps/web/src/app/(home)/analytics/analytics-client.tsx`, `packages/backend/convex/analytics-date-utils.ts`, `packages/backend/convex/analytics.ts`	Introduced buildTimeSeries/buildMonthlyTimeSeries and emptyData; added buildDailyWindow and MAX_DAILY_STATS_WINDOW; refactored data assembly to produce enriched series, distributions, matrices, and momentum metrics.
Page & header updates `apps/web/src/app/(home)/analytics/_components/analytics-header.tsx`, `apps/web/src/app/(home)/analytics/_components/analytics-page.tsx`, `apps/web/src/app/(home)/analytics/_components/analytics-sources.tsx`	Redesigned AnalyticsHeader (new props: liveTotal, trackingDays), changed status label to "streaming", restructured header panels; added AnalyticsSources component; adjusted page section ordering.
Reusable UI primitives `apps/web/src/app/(home)/analytics/_components/chart-card.tsx`, `apps/web/src/app/(home)/analytics/_components/section-header.tsx`	ChartCard refactored to section with optional eyebrow/aside/footer/class props; added SectionHeader component for consistent section headings.
Plot-driven chart components `apps/web/src/app/(home)/analytics/_components/plot-chart.tsx`, `apps/web/src/app/(home)/analytics/_components/preference-chart-card.tsx`, `apps/web/src/app/(home)/analytics/_components/metrics-cards.tsx`, `apps/web/src/app/(home)/analytics/_components/timeline-charts.tsx`, `apps/web/src/app/(home)/analytics/_components/dev-environment-charts.tsx`, `apps/web/src/app/(home)/analytics/_components/stack-configuration-charts.tsx`	Replaced Recharts charts with Plot-based builders and new components (PlotChart, PreferenceChartCard, VersionCard, SplitMeterCard, MetricTile, etc.); updated layouts, responsive margins, compact labeling, and data bindings.
Metrics & tiles `apps/web/src/app/(home)/analytics/_components/metrics-cards.tsx`	Replaced MetricCard with MetricTile and added live sparkline via PlotChart; adjusted metric labels, tone handling, and layout.

Possibly related PRs

fix(web): improve analytics charts #801 — Large analytics charting changes and component migrations overlapping Plot/Timeline/Dev-Environment/Stack chart code.
feat(web): llms.txt, convex live stats, switch to vercel and improved ui #460 — Coordinated analytics overhaul touching client analytics, types, and charting migration (strong overlap in data shape and UI).
chore: drop event field and clean charts #712 — Changes to analytics client/backend and chart components with overlapping data assembly and plotting logic.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: replacing legacy analytics charts with Observable Plot for a dashboard redesign.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

Generate coding plan for human review comments

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (4)

apps/web/src/app/(home)/analytics/_components/plot-chart.tsx (2)
77-97: Ensure build function is stable (memoized) to prevent unnecessary re-renders.

The build function is included in the effect's dependency array. If callers pass an inline function without useCallback, this effect will re-run on every parent render, causing the plot to be rebuilt unnecessarily.

Consider documenting this expectation or adding a note for consumers:
// Callers should memoize the build function with useCallback to prevent
// unnecessary plot rebuilds on parent re-renders.
93-96: Minor: Redundant cleanup call.

After plot.remove(), the element is already detached from the DOM. The subsequent mount.replaceChildren() is a no-op when the mount was the parent. This is harmless but unnecessary.
Simplified cleanup
     return () => {
       plot.remove();
-      mount.replaceChildren();
     };
apps/web/src/app/(home)/analytics/_components/timeline-charts.tsx (1)

187-192: Don't drop the year on compact monthly labels.

monthlyTimeSeries is full-history data, so compact ? "MMM" : "MMM yy" makes repeated months indistinguishable once the dataset crosses a year boundary. Because the axis still renders every month, the mobile layout also ends up with overlapping text. Consider thinning the tick labels and keeping some year signal in the compact formatter.

apps/web/src/app/(home)/analytics/_components/stack-configuration-charts.tsx (1)

19-107: Extract the shared preference chart before the copies drift further.

This PreferenceCard is nearly identical to apps/web/src/app/(home)/analytics/_components/dev-environment-charts.tsx:19-110, and the two versions already differ in maxItems support and height math. Pulling the shared Plot setup into one component/helper will keep future tooltip, compact-label, and sizing fixes from landing in only one section.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a9e62946-536a-496f-9cce-c37a51bd0efa

📥 Commits

Reviewing files that changed from the base of the PR and between ff8cacc and 2fee502.

⛔ Files ignored due to path filters (1)

bun.lock is excluded by !**/*.lock

📒 Files selected for processing (18)

apps/web/package.json
apps/web/src/app/(home)/analytics/_components/analytics-header.tsx
apps/web/src/app/(home)/analytics/_components/analytics-helpers.ts
apps/web/src/app/(home)/analytics/_components/analytics-page.tsx
apps/web/src/app/(home)/analytics/_components/analytics-sources.tsx
apps/web/src/app/(home)/analytics/_components/chart-card.tsx
apps/web/src/app/(home)/analytics/_components/dev-environment-charts.tsx
apps/web/src/app/(home)/analytics/_components/metrics-cards.tsx
apps/web/src/app/(home)/analytics/_components/plot-chart.tsx
apps/web/src/app/(home)/analytics/_components/section-header.tsx
apps/web/src/app/(home)/analytics/_components/stack-configuration-charts.tsx
apps/web/src/app/(home)/analytics/_components/timeline-charts.tsx
apps/web/src/app/(home)/analytics/_components/types.ts
apps/web/src/app/(home)/analytics/analytics-client.tsx
apps/web/src/app/global.css
apps/web/src/components/ui/chart.tsx
packages/backend/convex/analytics-date-utils.ts
packages/backend/convex/analytics.ts

💤 Files with no reviewable changes (1)

apps/web/src/components/ui/chart.tsx

apps/web/src/app/(home)/analytics/analytics-client.tsx

feat(web): redesign analytics dashboard with observable plot

2fee502

vercel bot deployed to Preview March 16, 2026 21:03 View deployment

chatgpt-codex-connector bot reviewed Mar 16, 2026

View reviewed changes

packages/backend/convex/analytics.ts Show resolved Hide resolved

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

apps/web/src/app/(home)/analytics/analytics-client.tsx Outdated Show resolved Hide resolved

fix(web): address analytics review feedback

bd8e96b

vercel bot deployed to Preview March 16, 2026 21:58 View deployment

AmanVarshney01 merged commit 65151ca into main Mar 16, 2026
3 checks passed

AmanVarshney01 deleted the aman/analytics-observable-plot-refresh branch March 16, 2026 22:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(web): redesign analytics dashboard with observable plot#973

feat(web): redesign analytics dashboard with observable plot#973
AmanVarshney01 merged 2 commits intomainfrom
aman/analytics-observable-plot-refresh

AmanVarshney01 commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Review failed

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

AmanVarshney01 commented Mar 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Verification

Summary by CodeRabbit

Uh oh!

vercel bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Possibly related PRs

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AmanVarshney01 commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading