feat: refactor shadcn chart to the v3 recharts

fix: chart point labels overflow and layering

Author: l-you

dashboard/bun.lock

@@ -16,7 +16,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": "^4.1.2",
+    "@apollo/client": "^4.1.6",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -27,37 +27,38 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@tanstack/react-router": "^1.154.7",
+    "@tanstack/react-router": "^1.166.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "graphql": "^16.12.0",
-    "lucide-react": "^0.563.0",
-    "react": "^19.2.3",
-    "react-day-picker": "^9.13.0",
-    "react-dom": "^19.2.3",
-    "recharts": "2.15.4",
-    "tailwind-merge": "^3.4.0",
+    "graphql": "^16.13.1",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.4",
+    "react-is": "^19.2.4",
+    "recharts": "3.8.0",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.3.5"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.6",
-    "@graphql-codegen/cli": "^6.1.1",
-    "@graphql-codegen/client-preset": "^5.2.2",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/router-generator": "^1.154.8",
-    "@tanstack/router-plugin": "^1.154.8",
-    "@types/node": "^25.0.10",
-    "@types/react": "^19.2.9",
+    "@graphql-codegen/cli": "^6.1.3",
+    "@graphql-codegen/client-preset": "^5.2.4",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/router-generator": "^1.166.2",
+    "@tanstack/router-plugin": "^1.166.3",
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "autoprefixer": "^10.4.23",
-    "lightningcss": "^1.31.1",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "autoprefixer": "^10.4.27",
+    "lightningcss": "^1.32.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "vite": "^7.3.1"
   }

dashboard/package.json

@@ -1,13 +1,12 @@
 import { TrendingUp } from 'lucide-react';
 import type { FunctionComponent } from 'react';
 import { useMemo } from 'react';
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 import DashboardCardState from '@/components/dashboard-card-state';
-import { Card, CardContent, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Progress, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton } from '@/components/ui';
+import OverviewChartPlot from '@/components/overview-chart/overview-chart-plot';
+import { Card, CardContent, CardHeader, CardTitle, Progress, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton } from '@/components/ui';
 import type { FilterInput } from '@/gql/graphql';
+import { buildOverviewChartData } from '@/components/overview-chart/overview-chart-data';
 import { useChartDataLoader } from '@/hooks/use-chart-data-loader';
-import { buildTimeFormatter, parseChartDate } from '@/lib/chart-date';
-import { CHART_CONFIG, CHART_MARGIN, TICK_MARGIN } from '@/lib/chart-config';
 
 interface OverviewChartSectionProps {
   siteId: string;
@@ -22,11 +21,7 @@ const PROGRESS_MIN = 0;
 
 const OverviewChartSection: FunctionComponent<OverviewChartSectionProps> = ({ siteId, dateRange, filter, bucket, onBucketChange }) => {
   const { loadedData, state, loadingMore, progress, expectedCount } = useChartDataLoader({ siteId, dateRange, filter, bucket });
-  const formatters = useMemo(() => ({ daily: buildTimeFormatter('daily'), hourly: buildTimeFormatter('hourly') }), []);
-  const chartData = useMemo(() => loadedData.map((stat) => {
-    const timestamp = parseChartDate(stat.date);
-    return timestamp === null ? null : { timestamp, visitors: stat.visitors, pageViews: stat.pageViews, sessions: stat.sessions };
-  }).filter((item): item is NonNullable<typeof item> => item !== null).sort((a, b) => a.timestamp - b.timestamp), [loadedData]);
+  const chartData = useMemo(() => buildOverviewChartData(loadedData), [loadedData]);
   const showProgress = (state === 'refreshing' && chartData.length > EMPTY_COUNT) || loadingMore;
   const progressLabel = expectedCount === null ? `Loaded ${loadedData.length.toLocaleString()} points` : `Loaded ${Math.min(loadedData.length, expectedCount).toLocaleString()} of ${expectedCount.toLocaleString()} points`;
 
@@ -42,19 +37,8 @@ const OverviewChartSection: FunctionComponent<OverviewChartSectionProps> = ({ si
         {showProgress ? <div className="space-y-2"><div className="flex items-center justify-between text-xs text-muted-foreground"><span>{loadingMore ? 'Loading more data' : 'Refreshing chart data'}</span><span>{progressLabel}</span></div><Progress value={progress ?? PROGRESS_MIN} className="h-2" /></div> : null}
       </CardHeader>
       <CardContent>
-        <DashboardCardState state={state} overlayLabel={loadingMore ? 'Loading more' : 'Refreshing chart'} skeleton={<Skeleton className="h-[300px] w-full" />} className="min-h-[300px]">
-          <ChartContainer config={CHART_CONFIG} className="h-[300px] w-full">
-            <AreaChart data={chartData} margin={CHART_MARGIN}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="timestamp" type="number" scale="time" domain={['dataMin', 'dataMax']} tickFormatter={(value) => formatters[bucket].format(Number(value))} tickLine={false} axisLine={false} tickMargin={TICK_MARGIN} className="text-xs" />
-              <YAxis tickLine={false} axisLine={false} tickMargin={TICK_MARGIN} className="text-xs" />
-              <ChartTooltip content={<ChartTooltipContent labelFormatter={(value) => typeof value === 'number' ? formatters[bucket].format(value) : String(value)} />} />
-              <ChartLegend content={<ChartLegendContent />} />
-              <Area type="monotone" dataKey="visitors" stackId="1" stroke="var(--color-visitors)" fill="var(--color-visitors)" fillOpacity={0.6} />
-              <Area type="monotone" dataKey="pageViews" stackId="2" stroke="var(--color-pageViews)" fill="var(--color-pageViews)" fillOpacity={0.6} />
-              <Area type="monotone" dataKey="sessions" stackId="3" stroke="var(--color-sessions)" fill="var(--color-sessions)" fillOpacity={0.6} />
-            </AreaChart>
-          </ChartContainer>
+        <DashboardCardState state={state} overlayLabel={loadingMore ? 'Loading more' : 'Refreshing chart'} skeleton={<Skeleton className="h-[clamp(240px,44vw,320px)] w-full" />} className="min-h-[clamp(240px,44vw,320px)]">
+          <OverviewChartPlot bucket={bucket} data={chartData} />
         </DashboardCardState>
       </CardContent>
     </Card>

dashboard/src/components/chart-skeleton.tsx

@@ -0,0 +1,48 @@
+import type { OverviewPoint } from '@/components/overview-chart/overview-chart-series';
+
+const MAX_AXIS_TICKS = 6;
+const FIRST_INDEX = 0;
+const MIN_TICK_COUNT = 2;
+const dailyAxisFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+});
+const hourlyAxisDateFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+});
+const hourlyAxisTimeFormatter = new Intl.DateTimeFormat('en-US', {
+  hour: 'numeric',
+  timeZone: 'UTC',
+});
+
+export const buildOverviewAxisTicks = (data: OverviewPoint[]): number[] => {
+  if (data.length <= MAX_AXIS_TICKS) {
+    return data.map((point) => point.timestamp);
+  }
+
+  const segmentCount = MAX_AXIS_TICKS - 1;
+  const lastIndex = data.length - 1;
+  const indexes = new Set<number>([FIRST_INDEX, lastIndex]);
+
+  for (let segment = 1; segment < segmentCount; segment += 1) {
+    indexes.add(Math.round((segment * lastIndex) / segmentCount));
+  }
+
+  return [...indexes]
+    .sort((left, right) => left - right)
+    .slice(FIRST_INDEX, Math.max(MIN_TICK_COUNT, MAX_AXIS_TICKS))
+    .map((index) => data[index]?.timestamp)
+    .filter((tick): tick is number => typeof tick === 'number');
+};
+
+export const formatOverviewAxisTickLines = (bucket: 'daily' | 'hourly', value: number): string[] => {
+  const date = new Date(value);
+  if (bucket === 'hourly') {
+    return [hourlyAxisDateFormatter.format(date), hourlyAxisTimeFormatter.format(date)];
+  }
+
+  return [dailyAxisFormatter.format(date)];
+};

dashboard/src/components/overview-chart-section.tsx

@@ -0,0 +1,21 @@
+import type { DailyStatsFieldsFragment } from '@/gql/graphql';
+import { parseChartDate } from '@/lib/chart-date';
+import type { OverviewPoint } from '@/components/overview-chart/overview-chart-series';
+
+export const buildOverviewChartData = (stats: DailyStatsFieldsFragment[]): OverviewPoint[] =>
+  stats
+    .map((stat) => {
+      const timestamp = parseChartDate(stat.date);
+      if (timestamp === null) {
+        return null;
+      }
+
+      return {
+        timestamp,
+        visitors: stat.visitors,
+        pageViews: stat.pageViews,
+        sessions: stat.sessions,
+      };
+    })
+    .filter((point): point is OverviewPoint => point !== null)
+    .sort((left, right) => left.timestamp - right.timestamp);

dashboard/src/components/overview-chart/overview-chart-axis.ts

@@ -0,0 +1,8 @@
+const compactNumberFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+});
+
+export const formatOverviewAxisValue = (value: number): string => compactNumberFormatter.format(value);
+
+export const formatOverviewValue = (value: number): string => value.toLocaleString();

dashboard/src/components/overview-chart/overview-chart-data.ts

@@ -0,0 +1,33 @@
+import type { FunctionComponent } from 'react';
+import type { DefaultLegendContentProps, LegendPayload } from 'recharts';
+import { compareOverviewSeriesOrder, getOverviewSeries, isOverviewSeriesKey } from '@/components/overview-chart/overview-chart-series';
+
+const OverviewChartLegend: FunctionComponent<DefaultLegendContentProps> = ({ payload }) => {
+  const items = (payload ?? [])
+    .map((entry: LegendPayload) => {
+      if (!isOverviewSeriesKey(entry.dataKey)) {
+        return null;
+      }
+
+      return getOverviewSeries(entry.dataKey) ?? null;
+    })
+    .filter((entry): entry is NonNullable<typeof entry> => entry !== null)
+    .sort((left, right) => compareOverviewSeriesOrder(left.key, right.key));
+
+  return (
+    <div className="mt-4 flex flex-wrap gap-2">
+      {items.map((series) => (
+        <div
+          key={series.key}
+          className="inline-flex max-w-full items-center gap-2 rounded-full border border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground"
+          title={series.label}
+        >
+          <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: series.stroke }} />
+          <span className="max-w-[10rem] truncate font-medium text-foreground">{series.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OverviewChartLegend;

dashboard/src/components/overview-chart/overview-chart-formatters.ts

@@ -0,0 +1,93 @@
+import type { CSSProperties, FunctionComponent } from 'react';
+import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { buildOverviewAxisTicks } from '@/components/overview-chart/overview-chart-axis';
+import OverviewChartLegend from '@/components/overview-chart/overview-chart-legend';
+import OverviewChartTooltip from '@/components/overview-chart/overview-chart-tooltip';
+import OverviewChartXAxisTick from '@/components/overview-chart/overview-chart-x-axis-tick';
+import { formatOverviewAxisValue } from '@/components/overview-chart/overview-chart-formatters';
+import { OVERVIEW_RENDER_SERIES, OVERVIEW_SERIES, getOverviewSeriesIndex, type OverviewPoint } from '@/components/overview-chart/overview-chart-series';
+
+interface OverviewChartPlotProps {
+  bucket: 'daily' | 'hourly';
+  data: OverviewPoint[];
+}
+
+const MAX_TICK_COUNT = 6;
+const X_AXIS_MIN_TICK_GAP = 24;
+const X_AXIS_TICK_MARGIN = 10;
+const DAILY_X_AXIS_HEIGHT = 40;
+const HOURLY_X_AXIS_HEIGHT = 52;
+const LEGEND_HEIGHT = 52;
+
+const chartStyle = {
+  width: '100%',
+  height: '100%',
+  maxWidth: '100%',
+} satisfies CSSProperties;
+
+const OverviewChartPlot: FunctionComponent<OverviewChartPlotProps> = ({ bucket, data }) => {
+  const ticks = buildOverviewAxisTicks(data).slice(0, MAX_TICK_COUNT);
+  const xAxisHeight = bucket === 'hourly' ? HOURLY_X_AXIS_HEIGHT : DAILY_X_AXIS_HEIGHT;
+
+  return (
+    <div className="h-[clamp(240px,44vw,320px)] w-full">
+      <AreaChart accessibilityLayer data={data} responsive style={chartStyle} margin={{ top: 12, right: 6, bottom: 0, left: -18 }}>
+        <defs>
+          {OVERVIEW_SERIES.map((series) => (
+            <linearGradient key={series.key} id={`overview-${series.key}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={series.fillStart} />
+              <stop offset="95%" stopColor={series.fillEnd} />
+            </linearGradient>
+          ))}
+        </defs>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border/60" />
+        <XAxis
+          dataKey="timestamp"
+          type="number"
+          scale="time"
+          domain={['dataMin', 'dataMax']}
+          ticks={ticks}
+          tickLine={false}
+          axisLine={false}
+          minTickGap={X_AXIS_MIN_TICK_GAP}
+          interval={0}
+          tickMargin={X_AXIS_TICK_MARGIN}
+          height={xAxisHeight}
+          tick={(props) => <OverviewChartXAxisTick {...props} bucket={bucket} />}
+          className="text-xs"
+        />
+        <YAxis tickFormatter={(value) => formatOverviewAxisValue(Number(value))} tickLine={false} axisLine={false} width={44} className="text-xs" />
+        <Tooltip
+          cursor={{ stroke: 'hsl(var(--border))', strokeDasharray: '4 4' }}
+          isAnimationActive={false}
+          itemSorter={(item) => getOverviewSeriesIndex(item.dataKey)}
+          content={(props) => <OverviewChartTooltip {...props} bucket={bucket} />}
+        />
+        <Legend
+          verticalAlign="bottom"
+          align="left"
+          height={LEGEND_HEIGHT}
+          itemSorter={(item) => getOverviewSeriesIndex(item.dataKey)}
+          content={(props) => <OverviewChartLegend {...props} />}
+        />
+        {OVERVIEW_RENDER_SERIES.map((series) => (
+          <Area
+            key={series.key}
+            type="monotone"
+            dataKey={series.key}
+            name={series.label}
+            stroke={series.stroke}
+            fill={`url(#overview-${series.key})`}
+            strokeWidth={series.strokeWidth}
+            fillOpacity={1}
+            dot={false}
+            activeDot={{ r: 4, fill: series.stroke, stroke: 'hsl(var(--background))', strokeWidth: 2 }}
+            isAnimationActive={false}
+          />
+        ))}
+      </AreaChart>
+    </div>
+  );
+};
+
+export default OverviewChartPlot;