01f79afaf3
Replace all 5 direct recharts usages with the shared, token-themed SVG
primitives, lazy-loaded for bundle savings:
- dashboard, usage, users/[id], ops/client-logs, extraction/entity-chart
now render AreaChart/BarChart/Donut from @bytelyst/charts.
- new src/components/charts: next/dynamic wrappers (own chunk, ssr:false)
that dynamic-import a local static re-export (primitives.tsx) — the chart
packages declare only an `import` export condition, so a direct
import('@bytelyst/charts') trips Next's resolver.
- new src/lib/chart-data.ts: pure, finite-safe data mappers (unit-tested).
- recharts removed from package.json + the admin-web lockfile importer entry
(now fully unused). Lockfile delta is importer-only (+charts/+data-viz as
workspace:*, -recharts); no monorepo re-normalization; --frozen-lockfile clean.
- vitest.config: inline @bytelyst/{charts,data-viz} + dedupe react so the
SSR no-NaN render tests use a single React copy.
Fidelity notes (charts are single-series/vertical; StackedBar is charts 0.2.x):
stacked severity chart -> single bars colored by dominant severity; pie charts
-> Donut; horizontal bars -> vertical.
Verify: typecheck+lint+build green (123 routes); vitest 18 files / 159 tests
(+19); format:check no new failures; e2e 11 passed / 80 failed (unchanged vs
UX-1 baseline — failures are environmental, no backend).
Generated with [Devin](https://cli.devin.ai/docs)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Lazy, code-split wrappers around the shared `@bytelyst/charts` /
|
|
* `@bytelyst/data-viz` SVG primitives (UX-2 / CC.5). The chart code is pulled
|
|
* into its own async chunk via `next/dynamic` so it never weighs down the
|
|
* initial bundle of the (heavy) dashboard surfaces that embed it. The
|
|
* primitives are pure SVG and token-themed (`--bl-*`, bridged in `globals.css`),
|
|
* so they inherit admin's light/dark palette automatically.
|
|
*
|
|
* Replaces the previous direct `recharts` usage on the dashboard, usage,
|
|
* per-user, client-logs and extraction-entity surfaces.
|
|
*/
|
|
import dynamic from 'next/dynamic';
|
|
|
|
function ChartFallback() {
|
|
return (
|
|
<div
|
|
className="h-full min-h-[200px] w-full animate-pulse rounded-md bg-muted"
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const AreaChart = dynamic(
|
|
() => import('./primitives').then(m => ({ default: m.AreaChart })),
|
|
{ ssr: false, loading: ChartFallback }
|
|
);
|
|
|
|
export const BarChart = dynamic(() => import('./primitives').then(m => ({ default: m.BarChart })), {
|
|
ssr: false,
|
|
loading: ChartFallback,
|
|
});
|
|
|
|
export const LineChart = dynamic(
|
|
() => import('./primitives').then(m => ({ default: m.LineChart })),
|
|
{ ssr: false, loading: ChartFallback }
|
|
);
|
|
|
|
export const Donut = dynamic(() => import('./primitives').then(m => ({ default: m.Donut })), {
|
|
ssr: false,
|
|
loading: ChartFallback,
|
|
});
|
|
|
|
export const Sparkline = dynamic(
|
|
() => import('./primitives').then(m => ({ default: m.Sparkline })),
|
|
{ ssr: false, loading: ChartFallback }
|
|
);
|
|
|
|
export const KpiCard = dynamic(() => import('./primitives').then(m => ({ default: m.KpiCard })), {
|
|
ssr: false,
|
|
loading: ChartFallback,
|
|
});
|