@lilt-ui/charts 0.9.2 → 0.11.0

package/dist/cards/treemap-chart-card.d.ts

@@ -0,0 +1,24 @@
+import { NumericKey, TextKey } from './keys';
+import { ObservationsCardProps, ObservationScene } from './observations-card';
+export interface TreemapChartCardProps<Row, Key extends NumericKey<Row>> extends ObservationsCardProps<Row> {
+    /** Unique text field naming each leaf within its group. */
+    label: TextKey<Row>;
+    /** Nonnegative area. Null is missing; zero has no area. */
+    value: Key;
+    /** Optional parent category. Input rows are leaves, never parent totals. */
+    group?: TextKey<Row>;
+}
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Balanced binary tiling. Input order stays deterministic, with no random placement. */
+export declare function tileAreas<T>(items: readonly T[], weight: (item: T) => number, rect: Rect): {
+    item: T;
+    rect: Rect;
+}[];
+export declare function treemapLayout<Row>(data: readonly Row[], label: string, value: string, group: string | undefined, width: number, height: number, color?: string): ObservationScene<Row>;
+export declare function TreemapChartCard<Row, const Key extends NumericKey<Row>>({ label, value, group, color, ...props }: TreemapChartCardProps<Row, Key>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chart.d.ts

@@ -15,5 +15,5 @@ type ChartPlotRendererProps<T> = Omit<ChartProps<T>, 'className' | 'style'> & Om
     controllerLinked?: boolean;
     tooltipNode?: ReactNode;
 };
-export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, loadingStyle, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, decimate, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
+export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, loadingStyle, empty: emptyState, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, decimate, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
 export {};

package/dist/engine/keyed.d.ts

@@ -0,0 +1,19 @@
+import { ChartSeries } from '../types';
+import { NormalizedData } from './normalize';
+/**
+ * Whether a change of rows can morph by x value rather than cross-fade: both frames are time or
+ * number data in ascending order, they keep the same series, and they share at least two x values
+ * to anchor the glide. A period switch such as 30 → 90 days qualifies; categories do not.
+ */
+export declare function canMorphByKey<T>(from: NormalizedData<T>, to: NormalizedData<T>, series: readonly ChartSeries<T>[]): boolean;
+/**
+ * One frame of a keyed morph: every row from both frames, in x order. Rows in both ease from
+ * their old values to their new ones; rows added after the old last row grow out of its value,
+ * so arriving data draws the line forward; other one-sided rows keep their own values, and the
+ * gliding domain carries them in or out past the plot edge.
+ */
+export declare function keyedFrame<T>(from: NormalizedData<T>, to: NormalizedData<T>, progress: number): NormalizedData<T>;
+/** Ease for something moving across the plot: slow out, quick through, soft landing. */
+export declare function morphEase(progress: number): number;
+/** A domain between two others, at the same eased progress as the data. */
+export declare function mixDomain(from: readonly [number, number], to: readonly [number, number], progress: number): readonly [number, number];

package/dist/engine/lifecycle.d.ts

@@ -5,6 +5,6 @@ export interface LifecycleGeneration {
     isCurrent: (generation: number) => boolean;
 }
 export declare function createLifecycleGeneration(): LifecycleGeneration;
-export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
+export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'keyed-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/engine/sankey.d.ts

@@ -34,3 +34,19 @@ export declare function layoutSankey(graph: SankeyGraph, width: number, height:
     nodes: PositionedSankeyNode[];
     links: PositionedSankeyLink[];
 };
+/**
+ * A frame between two layouts of the same flows, at `t` from 0 to 1 (a spring may pass 1).
+ * Nodes move and resize, links keep their ends attached as they thicken or thin, and nodes or
+ * links new to `to` grow from nothing. Matched by id, so a period change reads as the same
+ * flows changing rather than a redraw.
+ */
+export declare function mixSankeyLayout(from: {
+    nodes: readonly PositionedSankeyNode[];
+    links: readonly PositionedSankeyLink[];
+}, to: {
+    nodes: readonly PositionedSankeyNode[];
+    links: readonly PositionedSankeyLink[];
+}, t: number): {
+    nodes: PositionedSankeyNode[];
+    links: PositionedSankeyLink[];
+};

package/dist/finance/cards/depth-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartStyle, ChartSurface } from '../../types';
 import { AnimatedNumberVariant } from '../../motion/animated-number';
 import { BookLevel } from '../indicators';
 export interface DepthChartCardProps {
@@ -29,6 +29,11 @@ export interface DepthChartCardProps {
     numberStyle?: AnimatedNumberVariant;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when there is no data: `dots` (default), the chart's own `shape`, your
+     * own element such as `<ChartEmpty>No book yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -37,4 +42,4 @@ export interface DepthChartCardProps {
  * Order book depth: how much could trade at each price, buying and selling, as stepped areas, with
  * the mid, spread and total depth in the header. Hover reads the size resting at each price.
  */
-export declare function DepthChartCard({ title, header, 'aria-label': ariaLabel, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, motion, className, style, depth, }: DepthChartCardProps): ReactElement;
+export declare function DepthChartCard({ title, header, 'aria-label': ariaLabel, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, empty, motion, className, style, depth, }: DepthChartCardProps): ReactElement;

package/dist/finance/order-book.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { ChartEmptyState, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
 import { BookLevel } from './indicators';
 export interface OrderBookProps {
     /** Optional visible table caption. */
@@ -24,6 +24,11 @@ export interface OrderBookProps {
     surface?: ChartSurface;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when there is no data: `dots` (default), the chart's own `shape`, your
+     * own element such as `<ChartEmpty>No book yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -32,4 +37,4 @@ export interface OrderBookProps {
  * A price ladder: asks above, bids below, a spread row between, and a depth bar behind each
  * level sized by its running total. It is a real table, so screen readers read it row by row.
  */
-export declare function OrderBook({ title, header, 'aria-label': ariaLabel, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, motion, className, style, }: OrderBookProps): ReactElement;
+export declare function OrderBook({ title, header, 'aria-label': ariaLabel, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, empty: emptyState, motion, className, style, }: OrderBookProps): ReactElement;