@lilt-ui/charts 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.8.0
+
+A new tooltip, a dotted y axis, a band that lights the hovered column, and a readout that never covers the marks.
+
+### Hover
+
+- The tooltip's date sits in a recessed well, and each row reads marker, name, value, with the value right after its name. The panel hugs its rows.
+- With a tooltip or strip readout, the crosshair turns dotted and hovered points become rings. Pills keep their filled hover dots.
+- `hover="strip"` docks the reading in a one-line capsule above the plot, centered on the crosshair, so it never covers the marks. The headline rests, as with the tooltip. `Tooltip` takes `layout: 'strip'`.
+- Bar and column charts light the inspected column with a soft band behind its bars, arriving in step with the bars that light up. `spotlight={false}` turns it off along with the background spotlight.
+- When no pill covers it, the inspected observation's x label brightens.
+
+### Axes
+
+- `axis="dots"` now labels the y axis: each label sits in a gutter with a node and a dotted leader across the plot, and the value pill sits on the axis. The x axis keeps its dot under every observation. Loading skeletons match.
+
 ## 0.7.1
 
 ### Fixes

package/dist/cards/cartesian-card.d.ts

@@ -116,7 +116,10 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
     axis?: ChartAxis;
     /** Texture behind the plot: `dots` (default), `grid`, `lines`, or `none`. */
     background?: ChartBackground;
-    /** Brighten the background around the hovered point. Defaults to true. */
+    /**
+     * Light up what is under the pointer: the background around a point, and on bar charts the
+     * whole column. Defaults to true.
+     */
     spotlight?: boolean;
     /**
      * Draw a long line or area from each pixel column's first, last, lowest and highest
@@ -145,7 +148,8 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
     axisInset?: number;
     /**
      * What the hovered point shows, one readout at a time: `pills` (default) on the axes, a
-     * `tooltip` with every series, or `headline`, which leaves the plot to the hover dots.
+     * `tooltip` with every series, a `strip` docked above the plot, or `headline`, which leaves the
+     * plot to the hover dots.
      */
     hover?: ChartHoverReadout;
     /** How the pills or tooltip look: `soft` (default), `solid`, or `accent`. */

package/dist/finance.js

@@ -1,5 +1,5 @@
 "use client";
-import { A as e, C as t, I as n, J as r, L as i, P as a, Q as o, R as s, S as c, T as l, _ as u, a as d, b as f, f as p, ht as m, i as h, n as g, nt as _, ot as v, q as y, t as b, u as x, v as S, w as C, x as w, y as T, z as E } from "./skeleton-block-DvtzSsgP.js";
+import { A as e, C as t, I as n, J as r, L as i, P as a, Q as o, R as s, S as c, T as l, _ as u, a as d, b as f, f as p, ht as m, i as h, n as g, nt as _, ot as v, q as y, t as b, u as x, v as S, w as C, x as w, y as T, z as E } from "./skeleton-block-Bs6JLXVq.js";
 import { S as D, d as O, g as k, h as A, p as j, u as ee } from "./report-context-CkzH-r8B.js";
 import { useEffect as M, useMemo as N, useRef as P, useState as F } from "react";
 import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { $ as e, A as t, B as n, C as r, D as i, E as a, F as o, G as s, H as c, I as l, J as u, K as d, L as f, M as p, N as m, O as h, Q as g, R as _, S as v, T as y, U as ee, V as te, W as b, X as x, Y as S, Z as C, _ as ne, _t as w, at as T, b as re, c as E, ct as D, d as ie, dt as O, et as k, f as A, ft as j, g as M, gt as N, h as P, ht as F, i as I, it as L, j as R, k as z, l as B, lt as V, m as ae, mt as H, n as U, o as oe, ot as W, p as se, pt as G, q as ce, r as le, rt as ue, s as de, st as fe, t as pe, tt as K, u as me, ut as he, v as ge, vt as _e, w as ve, x as q, y as ye, yt as be, z as J } from "./skeleton-block-DvtzSsgP.js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, F as o, G as s, H as c, I as l, J as u, K as d, L as f, M as p, N as m, O as h, Q as g, R as _, S as v, T as y, U as ee, V as te, W as b, X as x, Y as S, Z as C, _ as ne, _t as w, at as T, b as re, c as E, ct as D, d as ie, dt as O, et as k, f as A, ft as j, g as M, gt as N, h as P, ht as F, i as I, it as L, j as R, k as z, l as B, lt as V, m as ae, mt as H, n as U, o as oe, ot as W, p as se, pt as G, q as ce, r as le, rt as ue, s as de, st as fe, t as pe, tt as K, u as me, ut as he, v as ge, vt as _e, w as ve, x as q, y as ye, yt as be, z as J } from "./skeleton-block-Bs6JLXVq.js";
 import { n as xe, t as Se } from "./chart-data-CCwLQeXa.js";
 import { S as Ce, _ as we, b as Te, c as Ee, d as De, f as Oe, g as ke, h as Ae, l as je, m as Me, p as Ne, u as Pe, x as Fe } from "./report-context-CkzH-r8B.js";
 import { a as Ie, i as Le, n as Re, r as ze, t as Be } from "./analysis-BJRmXHOB.js";

package/dist/interaction/axis-cursor.d.ts

@@ -8,9 +8,16 @@ export interface AxisCursor {
     x: MotionValue<number>;
     /** The inspected position itself, for marks that must line up with the crosshair. */
     pointerX: MotionValue<number>;
+    /**
+     * The inspected column, unsprung: it jumps to each observation the moment it is read, in step
+     * with the bars that light up, for marks that snap to a column rather than glide.
+     */
+    columnX: MotionValue<number>;
     y: MotionValue<number>;
-    /** 1 while this chart owns an inspection, else 0. */
+    /** 1 while this chart owns an inspection with pills on its axes, else 0. */
     active: MotionValue<number>;
+    /** 1 while any reading is shown, whatever the readout, else 0. */
+    inspecting: MotionValue<number>;
     /** The preset each axis uses. */
     axis: ResolvedAxis;
     pill: ChartHoverStyle;
@@ -36,5 +43,10 @@ export interface ResolvedAxis {
 }
 /** Split an `axis` prop into one preset per axis. An axis left out is `minimal`. */
 export declare function resolveAxis(axis: ChartAxis | undefined): ResolvedAxis;
+/**
+ * Y axes that keep their labels in a gutter beside the plot: classic, segmented, and dots, whose
+ * labels lead into the plot along a dotted line.
+ */
+export declare function hasYGutter(style: ChartAxisStyle): boolean;
 /** Pills sit on the y axis when it has labels, and above the hovered mark when it does not. */
 export declare function resolvePillPosition(position: 'auto' | 'axis' | 'mark', style: ChartAxisStyle): 'axis' | 'mark';

package/dist/interaction/inspection-layer.d.ts

@@ -29,10 +29,15 @@ interface InspectionLayerProps<T> {
     compactPlot?: boolean;
     inlineOnly?: boolean;
     hideAxisBadges?: boolean;
+    /**
+     * A panel (tooltip or strip) reads the values out away from the point, so the crosshair turns
+     * dotted and the point becomes a ring that marks the spot instead of sitting on it.
+     */
+    panel?: boolean;
     peer?: boolean;
     onCompareFromHere?: () => void;
     /** Range marks in the plot; column marks draw their own highlight instead of a point. */
     marks?: readonly PlotMark[];
 }
-export declare function InspectionLayer<T>({ snapshot, selection, series, seriesColors, paintId, renderContent, inspectionSeries, stackedPill, pinIcon, tooltipClassName, tooltipAriaLabel, width, height, reducedMotion, highlightMaskId, crossGradientId, compactPlot, inlineOnly, hideAxisBadges, peer, onCompareFromHere, marks, }: InspectionLayerProps<T>): ReactElement;
+export declare function InspectionLayer<T>({ snapshot, selection, series, seriesColors, paintId, renderContent, inspectionSeries, stackedPill, pinIcon, tooltipClassName, tooltipAriaLabel, width, height, reducedMotion, highlightMaskId, crossGradientId, compactPlot, inlineOnly, hideAxisBadges, panel, peer, onCompareFromHere, marks, }: InspectionLayerProps<T>): ReactElement;
 export {};

package/dist/primitives/hover-band.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+/**
+ * Behind a bar or column chart, the inspected column is lit as a whole: a soft band the height of
+ * the plot, a little wider than its bars. A column is what a reader inspects on a bar chart, so
+ * the band says so where a thin crosshair would not.
+ */
+export declare function HoverBand(): ReactElement | null;