Bklit charts

Bklit UI's charts ship inside the package. Every part is exported from one path:

import {
  Area,
  AreaChart,
  ChartTooltip,
  Grid,
  XAxis,
} from "nooxit-design-system/components/charts"

Each page shows one chart on Nooxit data. Open View code under it for a file that runs as-is.

Grid, XAxis, YAxis, ChartTooltip, Legend, ChartMarkers, ReferenceArea and ProjectionLine work inside the time-series charts.

ColorCopy Anchor Link

The charts follow the chart palette. Their own variables live in styles/charts.css, which theme.css loads, and point at Nooxit tokens:

Give a series its color as var(--chart-1) to var(--chart-5), never as a hex value.

A sankey colors its nodes: channels in blues, the agent's check in lime (matches) and light orange (differs), and the outcomes from green through yellow to orange. Green is only ever the posted outcome.

What changed from BklitCopy Anchor Link

• Installed by hand, not with the CLI. Bklit's install overwrites lib/utils.ts with a plain cn and writes its own grey --chart-1 to --chart-5, which would turn the shadcn charts grey. The files were copied instead, with cn imported from nooxit-design-system/lib/utils.
• Hard-coded colors use tokens. The fuchsia pattern stroke, the lime and emerald gauge gradient, the red and emerald scatter gradient and the zinc date pill now use chart-1, chart-2, chart-5 and primary.
• Bold and semibold text is medium, as everywhere in Nooxit.
• ShimmeringText, the loading label, sits in the charts folder. Bklit's own import path to it breaks once installed.
• The stat cards use Badge and Phosphor arrows instead of Central Icons, a commercial icon set.
• Sankey nodes take a color, which their links blend from and into. SankeyNode takes a unit and SankeyTooltip a valueLabel; Bklit wrote "sessions" after every number.
• Heatmaps take levelThresholds, where levels 1 to 4 start. Bklit fixed them at 1, 2, 3 and 4, which suits commits but not a few dozen cases a day. Give HeatmapLegend the same thresholds.
• LineChart takes a fixed yDomain, such as [0, 100] for percentages. Bklit always starts at 0 and adds 10% above the highest value, so 100% read as 120%.
• Dates read day first ("17 Sept"), as across the product.
• Animated numbers no longer break hydration. ChartStatFlow showed NumberFlow in the browser but plain text on the server whenever the page had loaded NumberFlow before.
• Left out: the choropleth map, candlestick, live line and profit/loss charts. Bklit's brush is not in its registry, so it is not here either.

In another projectCopy Anchor Link

The charts are one registry item, @nooxit/charts. It installs every file to components/charts/ and needs @nooxit/nooxit-theme for the colors:

npx shadcn@latest add @nooxit/charts

Bklit UI's charts are MIT licensed; the notice is in THIRD-PARTY-NOTICES.md.