Upgrading from visx

Upgrade the Bklit UI charts in this project from the old visx-based version to the new d3-based version. The chart source was copied into this repo by the shadcn CLI from the @bklit registry, so it may contain local edits that must survive the upgrade. Guide: https://bklit.com/docs/upgrading-from-visx

What changed upstream: charts no longer use visx. Curves come from d3-shape, scales from d3-scale, LinearGradient / RadialGradient / gradient presets from a new @bklit/gradients item (components/charts/gradients.tsx), and lines, areas, grid lines, heatmap cells and pie/ring/radar groups no longer render visx-* class names. Props and markup are otherwise unchanged.

1. Prepare
- If the git working tree is not clean, stop and ask me to commit or stash.
- Detect the package manager from the lockfile and use it for every command (runner: npx for npm and yarn, pnpm dlx for pnpm, bunx --bun for bun).
- Read components.json. If "registries" has no "@bklit" entry, add "@bklit": "https://ui.bklit.com/r/{name}.json". Resolve aliases.components to a folder (via tsconfig paths); the charts live in <components>/charts/. Call that alias <alias> below (usually @/components).

2. Find the installed charts. Map files in <components>/charts/ to registry items:
- area-chart.tsx -> @bklit/area-chart
- bar-chart.tsx -> @bklit/bar-chart
- candlestick-chart.tsx -> @bklit/candlestick-chart
- choropleth/choropleth-chart.tsx -> @bklit/choropleth-chart
- composed-chart.tsx -> @bklit/composed-chart
- funnel-chart.tsx -> @bklit/funnel-chart
- gauge.tsx -> @bklit/gauge-chart
- heatmap/heatmap-chart.tsx -> @bklit/heatmap-chart
- line-chart.tsx -> @bklit/line-chart
- live-line-chart.tsx -> @bklit/live-line-chart
- pie-chart.tsx -> @bklit/pie-chart
- profit-loss-line.tsx -> @bklit/profit-loss-line
- radar-chart.tsx -> @bklit/radar-chart
- radial-chart.tsx -> @bklit/radial-chart
- ring-chart.tsx -> @bklit/ring-chart
- sankey/sankey-chart.tsx -> @bklit/sankey-chart
- scatter-chart.tsx -> @bklit/scatter-chart
- sparkline.tsx -> @bklit/sparkline
- sunburst-chart.tsx -> @bklit/sunburst-chart
- bar-depth.tsx -> @bklit/bar-depth
Other files (chart-context.tsx, grid.tsx, tooltip/, legend/, markers/, patterns/, x-axis.tsx, ...) are shared items that re-adding a chart reinstalls; only add them by name if no chart above is installed. Never re-add *-example items or stat-card-* blocks: they write app/page.tsx, data/ and components/charts/index.ts. Fix those files in place in step 5.

3. Record my edits. For each file in <components>/charts/ and lib/utils.ts, find the commit that first added it (git log --diff-filter=A --format=%H -- <file> | tail -1) and save git diff <that commit> HEAD -- <file>. Those diffs are my customisations. Note files with no history as "unknown".

4. Re-add. Run one command with every chart from step 2:
<runner> shadcn@latest add @bklit/<chart> @bklit/<chart> ... --overwrite --yes
Then check git diff --stat:
- Re-apply each customisation from step 3 on top of the new files, translating visx code with the mapping in step 5. If one no longer applies cleanly, leave it out and list it in the report.
- If the CLI overwrote a file outside <components>/charts/ and removed my code (for example extra helpers in lib/utils.ts), restore my version and keep only the additions the charts need.

5. Rewrite remaining visx imports everywhere in the project (app/, src/, components/, lib/; not node_modules):
- @visx/curve -> d3-shape (same names, e.g. curveMonotoneX, curveNatural).
- @visx/gradient -> LinearGradient, RadialGradient, Gradient* presets from "<alias>/charts/gradients" (same props). If that file is missing, add @bklit/gradients.
- @visx/scale -> d3-scale: scaleLinear({ domain, range, nice: true }) becomes scaleLinear().domain(domain).nice().range(range); same for scaleTime and scaleBand. Types like ReturnType<typeof scaleLinear<number>> become ScaleLinear<number, number> from d3-scale.
- @visx/shape: LinePath / AreaClosed -> linePathD / areaClosedD and <LinePath d={...} /> from "<alias>/charts/line-path", or line() / area() from d3-shape. arc -> arc() from d3-shape. LineRadial -> lineRadial() from d3-shape.
- @visx/group <Group left={x} top={y}> -> <g transform={`translate(${x}, ${y})`}>.
- @visx/event localPoint -> localPoint from "<alias>/charts/local-point".
- @visx/responsive ParentSize / useParentSize -> ParentSize / useElementSize from "<alias>/charts/chart-parent-size".
- @visx/grid GridRows / GridColumns -> GridRows / GridColumns from "<alias>/charts/grid-lines".
- @visx/heatmap HeatmapRect -> heatmapRectCells from "<alias>/charts/heatmap/heatmap-rect-cells".
- @visx/geo Mercator / Graticule -> geoMercator / geoPath / geoGraticule from d3-geo.
- @visx/zoom TransformMatrix -> TransformMatrix from "<alias>/charts/choropleth". useChoroplethZoom().zoom no longer has handlePinch.
- @visx/sankey -> d3-sankey (same names).
- react-use-measure -> useElementSize from "<alias>/charts/chart-parent-size" or a ResizeObserver.

6. CSS. Search stylesheets, className strings and querySelector calls for visx- selectors. Lines, areas, grid lines, heatmap cells and pie/ring/radar groups no longer render .visx-linepath, .visx-area-closed, .visx-rows, .visx-columns, .visx-line, .visx-heatmap-rect, .visx-heatmap-rects, .visx-line-radial or .visx-group. Replace those rules with chart props (stroke, strokeWidth, strokeOpacity, fill, ...), the --chart-* CSS variables, or a className on the chart root plus a descendant selector (.chart-grid line for grid lines). Keep .visx-brush-*, .visx-geo-graticule, .visx-group on the brush and graticule, and .visx-pattern-*: they are still rendered. Do not rename visx-pattern.tsx.

7. Dependencies. Remove from package.json every @visx/* package, @use-gesture/react, @use-gesture/core and react-use-measure that nothing imports any more (search first). Make sure every d3 module imported anywhere (d3-shape, d3-scale, d3-array, d3-geo, d3-sankey) is in dependencies. In a TypeScript project, add the matching @types/d3-* packages as devDependencies if TypeScript reports a missing declaration file. Reinstall.

8. Verify. Run the project's typecheck (its typecheck script or tsc --noEmit), lint and build, and fix errors caused by the upgrade. Search again for "@visx/" and "react-use-measure" outside node_modules and lockfiles; expect no results.

9. Report: the charts re-added; each customisation re-applied (file and one line); customisations I need to review; CSS selectors changed; packages removed and added; typecheck, lint and build results. Do not commit.

git status
# For each file you edited:
git log --diff-filter=A --format=%H -- components/charts/line.tsx | tail -1
git diff <that-commit> HEAD -- components/charts/line.tsx > line.patch

npx shadcn@latest add @bklit/line-chart --diff

npx shadcn@latest add @bklit/line-chart @bklit/area-chart @bklit/bar-chart --overwrite --yes

grep -rn "@visx/\|react-use-measure" --include="*.ts" --include="*.tsx" . --exclude-dir=node_modules

grep -rn "visx-" --include="*.css" --include="*.scss" --include="*.tsx" . --exclude-dir=node_modules

# npm
npm uninstall @visx/curve @visx/event @visx/geo @visx/gradient @visx/grid @visx/group @visx/heatmap @visx/responsive @visx/sankey @visx/scale @visx/shape @visx/zoom react-use-measure

# pnpm
pnpm remove @visx/curve @visx/event @visx/geo @visx/gradient @visx/grid @visx/group @visx/heatmap @visx/responsive @visx/sankey @visx/scale @visx/shape @visx/zoom react-use-measure

# yarn
yarn remove @visx/curve @visx/event @visx/geo @visx/gradient @visx/grid @visx/group @visx/heatmap @visx/responsive @visx/sankey @visx/scale @visx/shape @visx/zoom react-use-measure

# bun
bun remove @visx/curve @visx/event @visx/geo @visx/gradient @visx/grid @visx/group @visx/heatmap @visx/responsive @visx/sankey @visx/scale @visx/shape @visx/zoom react-use-measure

npm install -D @types/d3-shape @types/d3-scale @types/d3-array

npx tsc --noEmit
npm run build

// Before
import { curveMonotoneX } from "@visx/curve";

// After
import { curveMonotoneX } from "d3-shape";

<Line dataKey="revenue" curve={curveMonotoneX} />

// Before
import { LinearGradient } from "@visx/gradient";

// After
import { LinearGradient } from "@/components/charts/gradients";

<BarChart data={data}>
  <LinearGradient id="bar-fill" from="var(--chart-1)" to="var(--chart-1)" toOpacity={0.12} />
  <Bar dataKey="revenue" fill="url(#bar-fill)" stroke="var(--chart-1)" />
</BarChart>

npx shadcn@latest add @bklit/gradients

// Before
import { scaleLinear } from "@visx/scale";

const y = scaleLinear({ domain: [0, max], range: [height, 0], nice: true });
type Y = ReturnType<typeof scaleLinear<number>>;

// After
import { type ScaleLinear, scaleLinear } from "d3-scale";

const y = scaleLinear().domain([0, max]).nice().range([height, 0]);
type Y = ScaleLinear<number, number>;

// Before
import { LinePath } from "@visx/shape";

<LinePath data={data} x={(d) => x(d.date)} y={(d) => y(d.value)} curve={curveNatural} stroke="var(--chart-1)" />

// After
import { curveNatural } from "d3-shape";
import { LinePath, linePathD } from "@/components/charts/line-path";

const d = linePathD(data, { x: (d) => x(d.date), y: (d) => y(d.value), curve: curveNatural });
<LinePath d={d} stroke="var(--chart-1)" />

// Before
import { Group } from "@visx/group";
import { localPoint } from "@visx/event";
import { ParentSize } from "@visx/responsive";

<Group left={left} top={top}>{children}</Group>

// After
import { localPoint } from "@/components/charts/local-point";
import { ParentSize } from "@/components/charts/chart-parent-size";

<g transform={`translate(${left}, ${top})`}>{children}</g>

// Before
import type { TransformMatrix } from "@visx/zoom";

// After
import type { TransformMatrix } from "@/components/charts/choropleth";

const initialZoom: TransformMatrix = {
  scaleX: 1, scaleY: 1, translateX: 0, translateY: 0, skewX: 0, skewY: 0,
};

// Before
import type { SankeyNode } from "@visx/sankey";

// After
import type { SankeyNode } from "d3-sankey";

/* Before */
.visx-rows line {
  stroke-dasharray: 4 4;
}

<Grid horizontal strokeDasharray="4 4" />

<LineChart className="revenue-chart" data={data}>
  {/* … */}
</LineChart>

.revenue-chart .chart-grid line {
  stroke-dasharray: 4 4;
}

<ChartTooltip animateSize={false} />