feat(web): rebuild analytics charts on bklit-ui and fix avg/day (#1093)

* feat(web): rebuild analytics charts on bklit-ui and fix avg/day

Fix the home + analytics "avg/day" stat, which divided the all-time
total by a fixed 30-day window (~1667); it now divides by the actual
tracked span so both pages agree (~239/day). Remove the pre-Convex
"legacy" archive callout from the analytics header.

Migrate every analytics chart from evilcharts to bklit-ui (shadcn
@bklit registry, composable visx + motion) behind two thin wrappers
(TrendAreaChart, CategoryBarChart). Charts are themed through the
--chart-* CSS vars mapped onto site tokens (primary / border /
muted-foreground / popover) for a minimal terminal look that adapts
to light and dark automatically.

Horizontal bars get a configurable left gutter so category names stay
readable. Also fixes a vendored shimmering-text import path and adds
@types/d3-array. Removes the evilcharts library and evil-chart-utils.

* fix(web): tighten analytics chart layout and remove padding gaps

- denser horizontal preference bars (30px/row instead of 38)
- drop leftover min-h wrappers that padded empty space below short charts
- lay CLI versions in a single 4-column row instead of a 2x2 wall

* fix(web): give each area chart a unique reveal clip id

bklit's AreaChart hardcoded clipPathId="chart-area-grow-clip", so the
two area charts on the analytics page (metrics sparkline + daily
timeline) emitted duplicate document-scoped SVG ids and could resolve
each other's reveal clip. Derive a per-instance id from useId, matching
how the rest of the chart library already generates ids.

Author: AmanVarshney01

apps/web/components.json

@@ -23,6 +23,6 @@
   "registries": {
     "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
     "@magicui": "https://magicui.design/r/{name}.json",
-    "@evilcharts": "https://evilcharts.com/r/{name}.json"
+    "@bklit": "https://bklit.com/r/{name}.json"
   }
 }

apps/web/package.json

@@ -20,13 +20,22 @@
     "@number-flow/react": "^0.6.0",
     "@orama/orama": "^3.1.18",
     "@shikijs/transformers": "^4.0.2",
+    "@visx/curve": "4.0.1-alpha.0",
+    "@visx/event": "4.0.1-alpha.0",
+    "@visx/gradient": "4.0.1-alpha.0",
+    "@visx/grid": "4.0.1-alpha.0",
+    "@visx/pattern": "4.0.1-alpha.0",
+    "@visx/responsive": "4.0.1-alpha.0",
+    "@visx/scale": "4.0.1-alpha.0",
+    "@visx/shape": "4.0.1-alpha.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "convex": "catalog:",
     "convex-helpers": "catalog:",
     "create-better-t-stack": "workspace:*",
     "culori": "^4.0.2",
+    "d3-array": "^3.2.4",
     "date-fns": "^4.1.0",
     "fumadocs-core": "16.8.10",
     "fumadocs-mdx": "15.0.4",
@@ -55,6 +64,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",
     "@types/culori": "^4.0.1",
+    "@types/d3-array": "^3.2.2",
     "@types/mdx": "^2.0.13",
     "@types/node": "catalog:",
     "@types/papaparse": "^5.5.2",

apps/web/src/app/(home)/_components/stats-section.tsx

@@ -13,9 +13,19 @@ type GithubRepoStats = {
   contributorCount: number;
 };
 
+const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;
+
+function getDaySpan(firstDate: string | null, lastDate: string | null): number {
+  if (!firstDate || !lastDate) return 0;
+  const start = Date.parse(`${firstDate}T00:00:00Z`);
+  const end = Date.parse(`${lastDate}T00:00:00Z`);
+  if (Number.isNaN(start) || Number.isNaN(end) || end < start) return 0;
+  return Math.floor((end - start) / MILLISECONDS_PER_DAY) + 1;
+}
+
 export default function StatsSection() {
   const stats = useQuery(api.analytics.getStats, {});
-  const dailyStats = useQuery(api.analytics.getDailyStats, { days: 30 });
+  const monthlyStats = useQuery(api.analytics.getMonthlyStats, {});
   const githubRepo = useQuery(api.stats.getGithubRepo, {
     name: "AmanVarshney01/create-better-t-stack",
   }) as GithubRepoStats | null | undefined;
@@ -26,8 +36,8 @@ export default function StatsSection() {
   const liveNpmDownloadCount = useNpmDownloadCounter(npmPackages);
 
   const totalProjects = stats?.totalProjects ?? 0;
-  const avgProjectsPerDay =
-    dailyStats && dailyStats.length > 0 ? (totalProjects / dailyStats.length).toFixed(2) : "0";
+  const trackingDays = getDaySpan(monthlyStats?.firstDate ?? null, monthlyStats?.lastDate ?? null);
+  const avgProjectsPerDay = trackingDays > 0 ? (totalProjects / trackingDays).toFixed(1) : "0";
   const lastUpdated = stats?.lastEventTime
     ? new Date(stats.lastEventTime).toLocaleDateString("en-US", {
         month: "short",

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

@@ -14,21 +14,10 @@ const utcDateTimeFormatter = new Intl.DateTimeFormat("en-US", {
   timeZone: "UTC",
 });
 
-const utcDateFormatter = new Intl.DateTimeFormat("en-US", {
-  month: "short",
-  day: "numeric",
-  year: "numeric",
-  timeZone: "UTC",
-});
-
 function formatUtcDateTime(value: string) {
   return `${utcDateTimeFormatter.format(new Date(value))} UTC`;
 }
 
-function formatUtcDate(value: string) {
-  return utcDateFormatter.format(new Date(value));
-}
-
 function HeaderStat({
   label,
   value,
@@ -53,22 +42,14 @@ export function AnalyticsHeader({
   lastUpdated,
   liveTotal,
   trackingDays,
-  legacy,
   connectionStatus,
 }: {
   lastUpdated: string | null;
   liveTotal: number;
   trackingDays: number;
-  legacy: {
-    total: number;
-    avgPerDay: number;
-    lastUpdatedIso: string;
-    source: string;
-  };
   connectionStatus: "online" | "connecting" | "reconnecting" | "offline";
 }) {
   const formattedDate = lastUpdated ? formatUtcDateTime(lastUpdated) : null;
-  const legacyDate = formatUtcDate(legacy.lastUpdatedIso);
   const statusMeta = {
     online: {
       label: "Streaming",
@@ -112,7 +93,7 @@ export function AnalyticsHeader({
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <div className="grid gap-4 md:grid-cols-2">
         <HeaderStat
           label="Live projects"
           value={formatCompactNumber(liveTotal)}
@@ -123,35 +104,17 @@ export function AnalyticsHeader({
           value={trackingDays}
           detail="Calendar days represented in the live telemetry dataset."
         />
-        <HeaderStat
-          label="Archive total"
-          value={formatCompactNumber(legacy.total)}
-          detail={`Historical creations from the pre-Convex archive through ${legacyDate}.`}
-        />
-        <HeaderStat
-          label="Archive pace"
-          value={legacy.avgPerDay.toFixed(1)}
-          detail="Average project creations per day in the historical snapshot."
-        />
       </div>
 
       <div className="rounded border border-border bg-fd-background p-4">
-        <div className="grid gap-3 text-sm md:grid-cols-4">
+        <div className="flex flex-wrap items-center justify-between gap-3 text-sm">
           <div className="flex items-center gap-2">
             <DatabaseZap className="h-4 w-4 text-primary" />
             <span className="font-mono text-xs text-muted-foreground uppercase">Telemetry</span>
           </div>
-          <div className="flex items-center justify-between gap-3 md:block">
+          <div className="flex items-center gap-2">
             <span className="text-muted-foreground">Latest event</span>
-            <div className="font-medium md:mt-1">{formattedDate ?? "Waiting"}</div>
-          </div>
-          <div className="flex items-center justify-between gap-3 md:block">
-            <span className="text-muted-foreground">Archive snapshot</span>
-            <div className="font-medium md:mt-1">{legacyDate}</div>
-          </div>
-          <div className="flex items-center justify-between gap-3 md:block">
-            <span className="text-muted-foreground">Source</span>
-            <div className="font-medium md:mt-1">{legacy.source}</div>
+            <span className="font-medium">{formattedDate ?? "Waiting"}</span>
           </div>
         </div>
       </div>

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

@@ -12,16 +12,9 @@ import type { AggregatedAnalyticsData } from "./types";
 
 export default function AnalyticsPage({
   data,
-  legacy,
   connectionStatus,
 }: {
   data: AggregatedAnalyticsData;
-  legacy: {
-    total: number;
-    avgPerDay: number;
-    lastUpdatedIso: string;
-    source: string;
-  };
   connectionStatus: "online" | "connecting" | "reconnecting" | "offline";
 }) {
   return (
@@ -31,7 +24,6 @@ export default function AnalyticsPage({
           lastUpdated={data.lastUpdated}
           liveTotal={data.totalProjects}
           trackingDays={data.momentum.trackingDays}
-          legacy={legacy}
           connectionStatus={connectionStatus}
         />
 

apps/web/src/app/(home)/analytics/_components/bklit-charts.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { curveMonotoneX } from "@visx/curve";
+
+import { Area } from "@/components/charts/area";
+import { AreaChart } from "@/components/charts/area-chart";
+import { Bar } from "@/components/charts/bar";
+import { BarChart } from "@/components/charts/bar-chart";
+import { BarXAxis } from "@/components/charts/bar-x-axis";
+import { BarYAxis } from "@/components/charts/bar-y-axis";
+import { Grid } from "@/components/charts/grid";
+import { ChartTooltip, type TooltipRow } from "@/components/charts/tooltip";
+import { XAxis } from "@/components/charts/x-axis";
+
+const ACCENT = "var(--chart-line-primary)";
+const MUTED = "var(--chart-line-secondary)";
+
+const compactNumber = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+}).format;
+
+export type ChartSeries = {
+  /** Numeric key in each data row. */
+  key: string;
+  /** Human label shown in the tooltip / legend. */
+  label: string;
+  /** Series color. Defaults to the site accent (muted for line series). */
+  color?: string;
+  /** Render as a stroke-only line instead of a filled area (area chart only). */
+  line?: boolean;
+};
+
+type Row = Record<string, unknown>;
+
+const num = (value: unknown) => Number(value ?? 0);
+
+/**
+ * Time-series area chart (x is a `Date`). Filled series plus optional overlay
+ * lines. Styling comes from the shared `--chart-*` theme tokens.
+ */
+export function TrendAreaChart({
+  data,
+  series,
+  xKey = "date",
+  height = 300,
+  valueFormat = compactNumber,
+}: {
+  data: Row[];
+  series: ChartSeries[];
+  xKey?: string;
+  height?: number;
+  valueFormat?: (value: number) => string;
+}) {
+  const rows = (point: Row): TooltipRow[] =>
+    series.map((s) => ({
+      color: s.color ?? (s.line ? MUTED : ACCENT),
+      label: s.label,
+      value: valueFormat(num(point[s.key])),
+    }));
+
+  return (
+    <div className="min-w-0" style={{ height }}>
+      <AreaChart
+        data={data}
+        xDataKey={xKey}
+        aspectRatio="auto"
+        className="h-full w-full"
+        margin={{ top: 16, right: 20, bottom: 28, left: 20 }}
+        animationDuration={700}
+      >
+        <Grid horizontal strokeDasharray="4,4" />
+        {series.map((s) => {
+          const color = s.color ?? (s.line ? MUTED : ACCENT);
+          return (
+            <Area
+              key={s.key}
+              dataKey={s.key}
+              fill={color}
+              stroke={color}
+              fillOpacity={s.line ? 0 : 0.15}
+              strokeWidth={s.line ? 1.5 : 2}
+              curve={curveMonotoneX}
+              showHighlight={false}
+            />
+          );
+        })}
+        <XAxis numTicks={5} />
+        <ChartTooltip rows={rows} />
+      </AreaChart>
+    </div>
+  );
+}
+
+/**
+ * Categorical bar chart. `orientation="horizontal"` puts categories on the Y
+ * axis (ranked lists); `"vertical"` puts them on the X axis (time buckets).
+ */
+export function CategoryBarChart({
+  data,
+  xKey,
+  series,
+  orientation = "vertical",
+  height = 300,
+  maxLabels = 12,
+  labelWidth = 120,
+  valueFormat = compactNumber,
+  tooltipLabelKey,
+  tooltipValueKey,
+}: {
+  data: Row[];
+  xKey: string;
+  series: ChartSeries[];
+  orientation?: "vertical" | "horizontal";
+  height?: number;
+  maxLabels?: number;
+  /** Left gutter (px) reserved for category names when `orientation="horizontal"`. */
+  labelWidth?: number;
+  valueFormat?: (value: number) => string;
+  /** Row field holding the full display name for the tooltip (defaults to `xKey`). */
+  tooltipLabelKey?: string;
+  /** Row field holding a preformatted value string (e.g. "1,234 (12%)"). */
+  tooltipValueKey?: string;
+}) {
+  const horizontal = orientation === "horizontal";
+
+  const rows = (point: Row): TooltipRow[] => {
+    if (series.length === 1) {
+      const s = series[0];
+      return [
+        {
+          color: s.color ?? ACCENT,
+          label: String(point[tooltipLabelKey ?? xKey] ?? s.label),
+          value: tooltipValueKey
+            ? String(point[tooltipValueKey] ?? "")
+            : valueFormat(num(point[s.key])),
+        },
+      ];
+    }
+    return series.map((s) => ({
+      color: s.color ?? ACCENT,
+      label: s.label,
+      value: valueFormat(num(point[s.key])),
+    }));
+  };
+
+  return (
+    <div className="min-w-0" style={{ height }}>
+      <BarChart
+        data={data}
+        xDataKey={xKey}
+        orientation={orientation}
+        aspectRatio="auto"
+        className="h-full w-full"
+        margin={
+          horizontal
+            ? { top: 8, right: 16, bottom: 8, left: labelWidth }
+            : { top: 16, right: 12, bottom: 28, left: 12 }
+        }
+        animationDuration={700}
+      >
+        <Grid horizontal={!horizontal} vertical={horizontal} strokeDasharray="4,4" />
+        {series.map((s) => (
+          <Bar key={s.key} dataKey={s.key} fill={s.color ?? ACCENT} lineCap={4} />
+        ))}
+        {horizontal ? <BarYAxis /> : <BarXAxis maxLabels={maxLabels} />}
+        <ChartTooltip showDatePill={false} showCrosshair={false} rows={rows} />
+      </BarChart>
+    </div>
+  );
+}