@lilt-ui/charts 0.7.1 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.8.1
+
+### Fixes
+
+- Data landing on a loading chart no longer flashes the finished chart before its entrance. The skeleton blurs away first, then the chart makes its usual entrance, so the two never share the plot. In 3D the flash showed a full chart for a frame; it is gone in every loading style.
+
+## 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/chart-context.d.ts

@@ -89,7 +89,7 @@ export interface ChartContextValue<T> {
     revealProgress: number;
     reducedMotion: boolean;
     transitionDuration: number;
-    transitionKind: 'initial' | 'handoff' | 'matched-update' | 'topology-update' | null;
+    transitionKind: 'initial' | 'matched-update' | 'topology-update' | null;
     axis: {
         x: readonly AxisTick[];
         y: readonly AxisTick[];

package/dist/engine/lifecycle.d.ts

@@ -1,10 +1,10 @@
-export type LifecyclePhase = 'pending' | 'loading' | 'handoff' | 'revealing' | 'ready' | 'updating' | 'empty' | 'error';
+export type LifecyclePhase = 'pending' | 'loading' | 'revealing' | 'ready' | 'updating' | 'empty' | 'error';
 export interface LifecycleGeneration {
     next: () => number;
     current: () => number;
     isCurrent: (generation: number) => boolean;
 }
 export declare function createLifecycleGeneration(): LifecycleGeneration;
-export declare function durationForPhase(phase: 'initial' | 'handoff' | 'matched-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
+export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
 /** Preserve full data fidelity while avoiding repeated per-sample geometry tweens. */
 export declare function skipDataTweenForWorkload(sampleCount: number, millisecondsSinceLastUpdate: number): boolean;

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-JtV7oz8b.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-JtV7oz8b.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;