feat(admin): enhance analytics dashboard with improved charts and UX by saddlepaddle · Pull Request #488 · superset-sh/superset

saddlepaddle · 2025-12-23T14:19:18Z

Summary

Add WAU trend chart with workspace_created event filtering (requires 3+ active days)
Add traffic sources chart with breakdown by referring domain (uses TrendsQuery with breakdown)
Add signups trend chart with daily counts
Add revenue trend chart (stub data placeholder)
Add YC Demo Day countdown widget (June 16, 2026)
Add time range pickers (7d/30d/90d/180d) to all charts
Add week picker for leaderboard navigation
Add cohort size column to retention table
Fix sidebar active route highlighting using usePathname()
Improve empty states with consistent dashed border styling across all charts
Use Tailwind 500 colors for traffic sources bar chart

Test plan

Verify WAU chart shows 0 users (no one has 3+ days of workspace_created events yet)
Verify traffic sources chart displays breakdown by referring domain
Verify time range pickers work across all charts
Verify YC countdown displays correctly
Verify retention table shows Size column with cohort counts
Verify empty states display properly when no data available

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Full analytics dashboard: charts and tables for revenue, signups, WAU, funnel, retention, traffic sources, leaderboard, time-range & week pickers, week navigator, and a demo countdown. Updated sidebar/navigation labels.
Chores
- Added charting library dependency for visualizations.
- Integrated PostHog-backed analytics endpoints and added PostHog credentials to deployment configuration.
- Updated site metadata and header breadcrumbs.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Add custom event tracking for key user actions: - Marketing: download_clicked, waitlist_clicked - Desktop: desktop_opened, auth_started, auth_completed, workspace_created/opened/closed/deleted, terminal_opened - Fix user identity to use database user ID consistently across all apps (was using Clerk ID in web/admin which differed from desktop) Also adds posthog-node for reliable server-side tracking in desktop main process. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Replace separate activation and onboarding funnels with one full journey funnel: site visit → download → desktop opened → auth completed → terminal opened This provides a clearer view of where users drop off across the entire user journey from marketing to product activation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add WAU trend chart with workspace_created event filtering - Add traffic sources chart with breakdown by referring domain - Add signups trend chart with daily counts - Add revenue trend chart (stub data for now) - Add YC Demo Day countdown widget - Add time range pickers (7d/30d/90d/180d) to all charts - Add week picker for leaderboard - Add cohort size column to retention table - Fix sidebar active route highlighting - Improve empty states with consistent styling across all charts - Use Tailwind 500 colors for traffic sources bars 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

coderabbitai · 2025-12-23T14:19:32Z

Walkthrough

Adds a complete admin analytics feature set: new UI components and charts, a PostHog client, TRPC analytics router, env/schema and CI wiring for PostHog keys, a small shared constant change, UI/breadcrumb updates, and a dependency on recharts.

Changes

Cohort / File(s)	Summary
Package Dependencies `apps/admin/package.json`	Added `recharts` v2.15.4
Sidebar & Header `apps/admin/src/app/(dashboard)/components/AppSidebar/AppSidebar.tsx`, `apps/admin/src/app/(dashboard)/components/AppSidebar/components/AppSidebarHeader/AppSidebarHeader.tsx`	Reworked navigation (Home + User Management), added path-aware active state; removed "Admin Panel" label
App Layout / Metadata `apps/admin/src/app/layout.tsx`, `apps/admin/src/app/(dashboard)/layout.tsx`	Updated page metadata and breadcrumb labels ("Admin Panel" → "Superset", "Dashboard" → "Home")
Dashboard Page `apps/admin/src/app/(dashboard)/page.tsx`	Replaced placeholder with full dashboard wired to TRPC queries and composed chart/table components with time/week controls
Chart Components (recharts) `apps/admin/src/app/(dashboard)/components/RevenueTrendChart/...`, `.../SignupsTrendChart/...`, `.../WAUTrendChart/...`, `.../TrafficSourcesChart/...`, `.../FunnelChart/...`	New Area/Bar/Funnel chart components with loading/error/empty states, tooltips, formatting, and barrel exports
Card / Table Components `apps/admin/src/app/(dashboard)/components/MetricCard/...`, `LeaderboardTable/...`, `RetentionCard/...`	New MetricCard, LeaderboardTable, RetentionCard components with props/types, loading/error/empty UI and barrel exports
Utility / Pickers / Micro UI `apps/admin/src/app/(dashboard)/components/DemoCountdown/`, `TimeRangePicker/`, `WeekPicker/*`	Added DemoCountdown, TimeRangePicker (and TimeRange type), WeekPicker; index re-exports
Leaderboard / Funnel / Misc Exports `apps/admin/src/app/(dashboard)/components/*/index.ts`	Added barrel exports for new components
Shared Constants `packages/shared/src/constants.ts`	Changed `POSTHOG_COOKIE_NAME` from `"ph_superset"` to `"superset"`
PostHog Client `packages/trpc/src/lib/posthog-client.ts`	New PostHog query client with in-memory caching and helpers: executeQuery, executeFunnelQuery, executeHogQLQuery, executeRetentionQuery; many related types/interfaces added
TRPC Analytics Router `packages/trpc/src/router/analytics/analytics.ts`, `.../index.ts`, `packages/trpc/src/root.ts`	New analytics TRPC router with endpoints (funnels, WAU, retention, leaderboard, signups, traffic, revenue) and registration on appRouter
TRPC Env Schema `packages/trpc/src/env.ts`	Added server env keys `POSTHOG_API_KEY` and `POSTHOG_PROJECT_ID` to schema
CI / Deploy workflows & Turbo `.github/workflows/deploy-preview.yml`, `.github/workflows/deploy-production.yml`, `turbo.jsonc`	Propagate POSTHOG_API_KEY and POSTHOG_PROJECT_ID into build/deploy steps; added NEXT_PUBLIC_ADMIN_URL, POSTHOG_API_KEY, POSTHOG_PROJECT_ID to globalEnv
Tooling config `biome.jsonc`	Adjusted $schema version reference

Sequence Diagram(s)

sequenceDiagram
    participant Browser as Admin Dashboard (Browser)
    participant TRPCClient as TRPC Client
    participant TRPCServer as TRPC Server / analyticsRouter
    participant PostHogAPI as PostHog API
    participant DB as Database

    rect `#F2F8FF`
    Note over Browser,TRPCClient: Dashboard mounts and issues analytics queries
    Browser->>TRPCClient: useQuery(analytics.getWAUTrend / getSignups / ...)
    end

    rect `#FFF5F0`
    Note over TRPCClient,TRPCServer: TRPC invokes analytics procedures
    TRPCClient->>TRPCServer: invoke analytics endpoint
    TRPCServer->>PostHogAPI: executeQuery / executeHogQLQuery / executeFunnelQuery (cached)
    PostHogAPI-->>TRPCServer: results (or error)
    TRPCServer->>DB: enrich (e.g., join user metadata for leaderboard)
    DB-->>TRPCServer: user records
    TRPCServer-->>TRPCClient: formatted analytics response
    end

    rect `#F5FFF5`
    Note over TRPCClient,Browser: Render visualizations
    TRPCClient-->>Browser: responses
    Browser->>Browser: render charts/tables/cards (recharts + UI primitives)
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

feat: add PostHog event tracking across apps #476: Overlapping PostHog integration and environment/workflow changes.
fix: PostHog cross-subdomain tracking and cookie consent #419: Related PostHog configuration and analytics wiring across the repo.
ci: add CI/CD workflows and environment setup #330: Prior admin/dashboard work touching apps/admin dependencies and UI (overlap on recharts and admin UI changes).

Pre-merge checks and finishing touches

❌ 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%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main objective: enhancing the analytics dashboard with improved charts and UX. It is concise, specific, and directly related to the substantial changeset of new chart components, pickers, and dashboard improvements.
Description check	✅ Passed	The PR description provides a clear summary section with detailed bullet points covering all major changes, includes a test plan section with specific verification steps, and notes the implementation tool. However, the 'Related Issues', 'Type of Change', 'Screenshots', and 'Additional Notes' sections from the template are missing or incomplete.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch posthog-admin-dashboard

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.}

github-actions · 2025-12-23T14:23:27Z

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

Service	Status
Database (Neon)	✅

Thank you for your contribution! 🎉

Preview resources have been processed for cleanup

coderabbitai

Actionable comments posted: 6

🧹 Nitpick comments (8)

apps/admin/src/app/(dashboard)/components/MetricCard/MetricCard.tsx (1)
18-18: Unused error.message property.

The error prop is typed with { message: string } but the actual message is not displayed—the component shows a hardcoded "Failed to load" instead. Consider either using the message or simplifying the error type.
Option 1: Use the error message
-				<p className="text-destructive text-sm">Failed to load</p>
+				<p className="text-destructive text-sm">{error.message || "Failed to load"}</p>
Option 2: Simplify the error type if message is intentionally hidden
-	error?: { message: string } | null;
+	error?: Error | null;
Also applies to: 44-45
apps/admin/package.json (1)

36-36: Consider evaluating compatibility with recharts 3.x.

recharts@2.15.4 is a valid, stable version with no known security vulnerabilities. However, it's significantly outdated—the latest release is 3.6.0. If your application is compatible with the 3.x series, updating would provide access to newer features and improvements.
apps/admin/src/app/(dashboard)/components/AppSidebar/AppSidebar.tsx (1)
80-83: Consider using Next.js Link for client-side navigation.

Using raw <a> tags triggers full page reloads. For smoother navigation within the admin dashboard, prefer next/link:
🔎 Proposed fix
+import Link from "next/link";
...
-										<a href={item.url}>
+										<Link href={item.url}>
 											<item.icon className="size-4" />
 											{item.title}
-										</a>
+										</Link>
Apply the same change to line 117 for section items.
apps/admin/src/app/(dashboard)/page.tsx (1)
33-37: Consider extracting the time range parsing logic.

The pattern Number.parseInt(range.slice(1, -1), 10) is repeated 5 times. A small helper would improve readability and maintainability:
🔎 Suggested helper
const parseDays = (range: TimeRange): number =>
  Number.parseInt(range.slice(1, -1), 10);

// Usage:
trpc.analytics.getWAUTrend.queryOptions({ days: parseDays(wauRange) })
apps/admin/src/app/(dashboard)/components/RetentionCard/RetentionCard.tsx (1)
17-24: Consider making week columns dynamic for future flexibility.

The current CohortRow interface hardcodes week0-week4. If retention periods need to change, this requires interface updates. A more flexible approach:
🔎 Alternative structure
interface CohortRow {
  cohort: string;
  weeks: WeekData[]; // Dynamic array instead of fixed properties
}
This would require corresponding changes to the table rendering logic. However, the current approach is acceptable if the 5-week retention view is a stable requirement.
apps/admin/src/app/(dashboard)/components/WeekPicker/WeekPicker.tsx (1)
14-31: Consider ISO 8601 week convention for international users.

The week calculation uses Sunday as the first day (US convention). For international applications, ISO 8601 specifies Monday as the week start. Consider making this configurable or documenting the US-centric behavior.

The date formatting is also hardcoded to "en-US" locale.
Optional: Support for configurable week start day
 interface WeekPickerProps {
 	/** Week offset from current week (0 = this week, -1 = last week, etc.) */
 	weekOffset: number;
 	onChange: (offset: number) => void;
 	/** Minimum offset (how far back can we go). Default -12 (12 weeks back) */
 	minOffset?: number;
+	/** First day of week (0 = Sunday, 1 = Monday). Default 0 */
+	weekStartsOn?: 0 | 1;
 }

-function getWeekLabel(offset: number): string {
+function getWeekLabel(offset: number, weekStartsOn = 0): string {
 	const now = new Date();
 	const startOfWeek = new Date(now);
-	// Go to start of current week (Sunday)
-	startOfWeek.setDate(now.getDate() - now.getDay() + offset * 7);
+	// Go to start of current week
+	const dayOfWeek = now.getDay();
+	const daysToSubtract = (dayOfWeek + 7 - weekStartsOn) % 7;
+	startOfWeek.setDate(now.getDate() - daysToSubtract + offset * 7);
apps/admin/src/app/(dashboard)/components/RevenueTrendChart/RevenueTrendChart.tsx (1)
49-122: LGTM! Well-structured chart component with good state handling.

The component correctly implements loading, error, and empty states with consistent styling. The dynamic tick interval calculation (line 58) provides reasonable spacing, and the currency formatting is properly internationalized.
Optional: Add defensive type check in formatter

Line 105 uses a type assertion that could be made safer:
 							<ChartTooltip
 								content={
 									<ChartTooltipContent
-										formatter={(value) => formatCurrency(value as number)}
+										formatter={(value) => 
+											typeof value === 'number' ? formatCurrency(value) : String(value)
+										}
 									/>
 								}
 							/>
apps/admin/src/app/(dashboard)/components/FunnelChart/FunnelChart.tsx (1)
42-126: LGTM! Clear funnel visualization with helpful conversion metrics.

The component correctly renders funnel data with:

Consistent loading, error, and empty states

Custom tooltip displaying both user counts and conversion rates

Locale-aware number formatting

Appropriate chart dimensions and margins
Optional: Add defensive null check in tooltip formatter

Line 103 accesses item.payload.conversionRate without a null check. While the TypeScript interface makes this required, adding a defensive check improves runtime safety:
 									<ChartTooltipContent
 										formatter={(value, _name, item) => (
 											<div className="flex flex-col gap-1">
 												<span>{value.toLocaleString()} users</span>
-												<span className="text-muted-foreground">
-													{item.payload.conversionRate.toFixed(1)}% conversion
-												</span>
+												{item.payload.conversionRate != null && (
+													<span className="text-muted-foreground">
+														{item.payload.conversionRate.toFixed(1)}% conversion
+													</span>
+												)}
 											</div>
 										)}
 									/>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 35a1a80 and d8f1a5a.

⛔ Files ignored due to path filters (2)

apps/admin/public/yc-logo.png is excluded by !**/*.png
bun.lock is excluded by !**/*.lock

📒 Files selected for processing (34)

apps/admin/package.json
apps/admin/src/app/(dashboard)/components/AppSidebar/AppSidebar.tsx
apps/admin/src/app/(dashboard)/components/AppSidebar/components/AppSidebarHeader/AppSidebarHeader.tsx
apps/admin/src/app/(dashboard)/components/DemoCountdown/DemoCountdown.tsx
apps/admin/src/app/(dashboard)/components/DemoCountdown/index.ts
apps/admin/src/app/(dashboard)/components/FunnelChart/FunnelChart.tsx
apps/admin/src/app/(dashboard)/components/FunnelChart/index.ts
apps/admin/src/app/(dashboard)/components/LeaderboardTable/LeaderboardTable.tsx
apps/admin/src/app/(dashboard)/components/LeaderboardTable/index.ts
apps/admin/src/app/(dashboard)/components/MetricCard/MetricCard.tsx
apps/admin/src/app/(dashboard)/components/MetricCard/index.ts
apps/admin/src/app/(dashboard)/components/RetentionCard/RetentionCard.tsx
apps/admin/src/app/(dashboard)/components/RetentionCard/index.ts
apps/admin/src/app/(dashboard)/components/RevenueTrendChart/RevenueTrendChart.tsx
apps/admin/src/app/(dashboard)/components/RevenueTrendChart/index.ts
apps/admin/src/app/(dashboard)/components/SignupsTrendChart/SignupsTrendChart.tsx
apps/admin/src/app/(dashboard)/components/SignupsTrendChart/index.ts
apps/admin/src/app/(dashboard)/components/TimeRangePicker/TimeRangePicker.tsx
apps/admin/src/app/(dashboard)/components/TimeRangePicker/index.ts
apps/admin/src/app/(dashboard)/components/TrafficSourcesChart/TrafficSourcesChart.tsx
apps/admin/src/app/(dashboard)/components/TrafficSourcesChart/index.ts
apps/admin/src/app/(dashboard)/components/WAUTrendChart/WAUTrendChart.tsx
apps/admin/src/app/(dashboard)/components/WAUTrendChart/index.ts
apps/admin/src/app/(dashboard)/components/WeekPicker/WeekPicker.tsx
apps/admin/src/app/(dashboard)/components/WeekPicker/index.ts
apps/admin/src/app/(dashboard)/layout.tsx
apps/admin/src/app/(dashboard)/page.tsx
apps/admin/src/app/layout.tsx
packages/shared/src/constants.ts
packages/trpc/src/env.ts
packages/trpc/src/lib/posthog-client.ts
packages/trpc/src/root.ts
packages/trpc/src/router/analytics/analytics.ts
packages/trpc/src/router/analytics/index.ts

💤 Files with no reviewable changes (1)

apps/admin/src/app/(dashboard)/components/AppSidebar/components/AppSidebarHeader/AppSidebarHeader.tsx

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}