@lilt-ui/charts 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.12.2
+
+Range comparisons show where they stand while you draw them.
+
+- While a comparison is drawn, each wick shows its x label just above the plot, so you know where to let go. Wicks close together share one label, and the labels blur out as the result lands. Reduced motion only fades them.
+- The comparison band and wicks fade from the top in the first series colour, and each endpoint has a capsule grip with a soft halo.
+- On a ghost card, the badge stands on its own as a rounded glass bar above the header instead of overlapping it.
+
+## 0.12.1
+
+Pins let go the way you expect, and the hover band wears the colour of what it lights.
+
+- Every card that pins (radial, heatmap, funnel, horizontal bar, radar, sankey, scatter, slope, activity ring, and the treemap, calendar, timeline and strip cards) releases its pin on any press that misses the marks: empty plot, elsewhere in the card, or off it, as area and bar charts already did. Escape releases after a mouse pin too. Presses on controls, such as legend items and the period menu, keep the pin.
+- The band behind an inspected column takes that column's colour: a falling candle lights red, a rising one green, and the volume pane follows its bars. With several series in a column, it takes the colour of the one being read.
+- The docs offer `compare` (off, on, or `'badge'`) in Props on every chart that reads change over time.
+- The README covers loading and empty states, long series, and how pins let go, and drops the pre-1.0 upgrade notes.
+
 ## 0.12.0
 
 Hover lands with the column it reads, and every chart moves a little more like a real object.

package/README.md

@@ -97,11 +97,11 @@ That's the whole card: the headline, the change chip, value tiles, and hover all
 | **Spread**           | Range (floating bars, error bars, timeline intervals) and Box plot      |
 | **Markets**          | Candlestick, Indicators, Price, Depth, Order book, and Portfolio        |
 
-### More ways to read observations
+### Companion cards
 
 `TreemapChartCard` reads `label`, `value`, and an optional `group` for one parent level. `CalendarHeatmapCard` reads `date` and `value`, with optional inclusive UTC `from`/`to` bounds. `TimelineChartCard` reads `label`, `start`, and `end`, and packs overlaps within optional `lane` categories. `StripChartCard` reads `category` and `value`; `display="beeswarm"` separates collisions without moving numeric positions.
 
-All four support `depth`, `loadingStyle="shimmer" | "draw" | "breathe"`, the shared skeleton fade, and reduced motion. Background refreshes keep accepted readings. They also accept `header={false}`, `onSelectionChange`, and `renderReadout` for your own presentation. Treemap areas must be nonnegative, calendar dates are UTC, and timeline durations are measured in milliseconds (displayed as hours by default).
+They take the same `depth`, loading, empty, and header props as every other card, plus `onSelectionChange` and `renderReadout` for your own presentation. Treemap areas must be nonnegative, calendar dates are UTC, and timeline durations are measured in milliseconds (displayed as hours by default).
 
 ## Finance charts
 
@@ -206,8 +206,10 @@ Cards that need attention rise, what you've seen calms down, and what clears set
 
 - **Linked hover.** Give cards the same `sync` name and they read the same moment together.
 - **Targets and forecasts.** `target` draws a goal line and counts the points that reach it. `forecast` marks projected rows and keeps them out of the headline.
-- **Pin and compare.** Click to pin a point. Add `compare` and drag across a chart to see what changed.
+- **Pin and compare.** Click any mark to pin it; press anywhere off the marks, or Escape, to let go. Add `compare` and drag across a chart to see what changed, in the headline or, with `compare="badge"`, in the card's tab.
 - **Honest data.** `null` is a gap, never a zero, and missing values say so.
+- **Loading and empty.** `loading` shows a skeleton that `"shimmer"`s, `"draw"`s, or `"breathe"`s in the chart's own shape, then hands over to the data. A period with no rows shows a still empty state, or your own with `empty`, and the headline reads a dash, never zero.
+- **Long series.** Line and area cards draw tens of thousands of points from four per pixel column; hover, tiles, and exports still read every row.
 - **Watch.** `normal` flags what's unusual and says why; a `ChartBoard` raises what needs attention.
 - **Calm by default.** Keyboard navigation, screen reader labels, and motion that respects reduced-motion settings.
 
@@ -235,7 +237,7 @@ function PeriodSelect({ value, options, onValueChange, ...rest }: ChartRangeSele
 <ChartComponentsProvider rangeSelect={PeriodSelect}>{children}</ChartComponentsProvider>;
 ```
 
-`RadialChartCard` keeps its centre and pointer interaction with the legend hidden. Tab to the graphic and use arrows to inspect, Enter/Space to pin, and Escape to clear. With a controlled `selected`, Escape requests `onSelectedChange(null)` in every legend layout.
+Every card that pins works from the keyboard: Tab to the chart, arrows to inspect, Enter or Space to pin, and Escape to clear. Radial, Funnel, and Horizontal bar cards can hand their pin to you with a controlled `selected`; a click, Escape, or a press off the marks then asks `onSelectedChange` instead of changing it.
 
 Cards follow shadcn theme variables when your app defines them: `--card`, `--card-foreground`, `--muted-foreground`, `--border`, `--ring`, and `--chart-1` to `--chart-5`. Anything you leave out falls back to Lilt's own palette.
 
@@ -246,22 +248,6 @@ Every Lilt style lives in the `lilt` cascade layer, so your CSS wins without spe
 @import 'tailwindcss';
 ```
 
-## Upgrading from 0.1
-
-0.2 replaces a series' `interval` with named `fields`, which carry any companion values: a forecast's low and high, quartiles, or a candle's open, high, and low. `IntervalBand` now names the fields it reads:
-
-```tsx
-// 0.1
-{ id: 'revenue', accessor: (row) => row.revenue, interval: { lower: (row) => row.low, upper: (row) => row.high, meaning: 'Forecast' } }
-<IntervalBand series="revenue" />
-
-// 0.2
-{ id: 'revenue', accessor: (row) => row.revenue, fields: { low: { label: 'Low', accessor: (row) => row.low }, high: { label: 'High', accessor: (row) => row.high } } }
-<IntervalBand series="revenue" lower="low" upper="high" />
-```
-
-Cards are unchanged: `forecast={{ from, lower, upper }}` works as before. Tooltip content reads `series[].fields` instead of `series[].interval`.
-
 ## License
 
 MIT © Lilt UI

package/dist/finance.js

@@ -1,6 +1,6 @@
 "use client";
-import { $ as e, A as t, C as n, I as r, J as i, L as a, P as o, Q as s, R as c, S as l, T as u, X as d, Z as f, _ as p, a as m, b as h, bt as g, dt as _, f as v, i as y, n as b, rt as x, st as S, t as C, u as w, v as T, w as E, x as D, y as O, z as k } from "./skeleton-block-CxrRuqe0.js";
-import { C as A, d as j, g as ee, h as M, p as N, u as P } from "./report-context-DLA3I57K.js";
+import { $ as e, A as t, C as n, I as r, J as i, L as a, P as o, Q as s, R as c, S as l, T as u, X as d, Z as f, _ as p, a as m, b as h, bt as g, dt as _, f as v, i as y, n as b, rt as x, st as S, t as C, u as w, v as T, w as E, x as D, y as O, z as k } from "./skeleton-block-DIgcA9t6.js";
+import { C as A, d as j, g as ee, h as M, p as N, u as P } from "./report-context-CIUa6iiD.js";
 import { useEffect as F, useMemo as I, useRef as L, useState as R } from "react";
 import { Fragment as z, jsx as B, jsxs as V } from "react/jsx-runtime";
 import { min as H } from "d3-array";
@@ -191,6 +191,10 @@ var ae = c(function({ series: t, open: n, high: r, low: i, display: a = "candle"
 		e.high,
 		e.low
 	],
+	color: (e, { row: t, descriptor: n }) => {
+		let r = K(t, e.series, e);
+		return r ? q(n, t, r) : void 0;
+	},
 	highlight: (e, { row: t, snapshot: r, descriptor: i }) => {
 		let a = K(t, e.series, e);
 		if (!a) return null;