@lilt-ui/charts 0.7.0 → 0.8.0

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;