@lilt-ui/charts 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.7.0
+
+Long lines and areas stay smooth to hover from a hundred points to a hundred thousand.
+
+### Drawing
+
+- Line and area marks with more observations than the plot has pixels draw each pixel column's first, last, lowest and highest observation. The ink is the same and every drawn point is a real reading; gaps and provisional or forecast runs keep their edges, and stacked layers still meet.
+- The headline, tiles, hover, comparison, Watch and exports still read every row.
+- `decimate` on `ChartPlot` and Cartesian cards turns this off. It is on by default.
+
+### Fixes
+
+- Hover no longer rebuilds the plot and reformats every value on each move when a chart is given inline `margins`, as cards do. A 1,000-point, three-layer stacked area hovers at full frame rate instead of about 12 fps.
+- Charts with more than about 125,000 values in total draw instead of showing an empty plot. Domains, summaries, box plots, scatter, slope, portfolio and Watch no longer spread every value into a single call.
+- Line and area runoff paths are reused between renders instead of being rebuilt on every hover.
+
+## 0.6.0
+
+Charts have three loading styles, with skeletons shaped for each family and refreshed palettes.
+
+### Loading
+
+- `loadingStyle` accepts `shimmer` (the default), `draw`, or `breathe` on charts and cards, including finance charts. `ChartLoadingStyle` is exported for typed consumers.
+- Loading skeletons follow each chart's geometry, including candles, range marks, rings, funnels, and flows. Moving skeletons share a clock so cards on a page move together.
+- Loading motion respects reduced-motion preferences and `motion="none"`; placeholders do not present invented readings as data.
+
+### Palettes
+
+- Iris uses violet, rose, and amber; Cobalt uses blue, cyan, and indigo; Emerald uses green, lime, and teal. Default series colors follow Iris, with matching light and dark palettes.
+
 ## 0.5.0
 
 Every chart that can carry it gets depth with one prop, and legends come in five layouts.

package/dist/activity-ring.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChartMotion } from './types';
+import { ChartLoadingStyle, ChartMotion } from './types';
 export interface ActivitySelection<Row> {
     hour: number;
     row: Row | null;
@@ -23,6 +23,7 @@ export interface ActivityRingProps<Row> {
     onSelectionChange?: (selection: ActivitySelection<Row> | null) => void;
     /** `loading` keeps showing the last accepted day until new data is ready. */
     status?: 'ready' | 'loading';
+    loadingStyle?: ChartLoadingStyle;
     /** A new key drops the accepted day and any selection. */
     resetKey?: string | number;
     motion?: ChartMotion;
@@ -42,5 +43,5 @@ export declare function activitySlots<Row>(data: readonly Row[], hour: (row: Row
  * The 24-hour dot ring inside `ActivityRingCard`: one column of dots per time slot, filled by
  * how much happened then. One tab stop; arrow keys step around the day and Enter pins a slot.
  */
-export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cards/activity-ring-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -47,6 +47,7 @@ export interface ActivityRingCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -59,4 +60,4 @@ export declare function clockLabel(hour: number): string;
  * filled by how much happened then. Hovering or stepping around the ring reads each slot in the
  * headline; tiles name the busiest and quietest times.
  */
-export declare function ActivityRingCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, hour, value, bucketMinutes, unit, maximum: suppliedMaximum, aggregate, height, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion, className, style, }: ActivityRingCardProps<Row, Key>): ReactElement;
+export declare function ActivityRingCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, hour, value, bucketMinutes, unit, maximum: suppliedMaximum, aggregate, height, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion, className, style, }: ActivityRingCardProps<Row, Key>): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartController, ChartMargins, ChartTooltipContext, NumericXConfig, TimeXConfig, ChartAxis, ChartBarAppearance, ChartBackground, ChartCurve, ChartMotion, ChartPalette, ChartHoverReadout, ChartHoverStyle, ChartSeries, ChartTooltipIndicator, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartController, ChartMargins, ChartTooltipContext, NumericXConfig, TimeXConfig, ChartAxis, ChartBarAppearance, ChartBackground, ChartCurve, ChartMotion, ChartPalette, ChartHoverReadout, ChartHoverStyle, ChartSeries, ChartTooltipIndicator, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch, ChartLoadingStyle } from '../types';
 import { NumericKey, ResolvedX, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -118,6 +118,12 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
     background?: ChartBackground;
     /** Brighten the background around the hovered point. Defaults to true. */
     spotlight?: boolean;
+    /**
+     * Draw a long line or area from each pixel column's first, last, lowest and highest
+     * observation, so tens of thousands of points stay fast to hover. The ink is the same, and the
+     * headline, tiles, hover, Watch and exports still read every row. Defaults to true.
+     */
+    decimate?: boolean;
     /** Card treatment: `elevated` (default), `outline`, or `ghost` inside your own card. */
     surface?: ChartSurface;
     /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
@@ -184,6 +190,12 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
      */
     sync?: string;
     loading?: boolean;
+    /**
+     * How the skeleton moves while `loading`: `shimmer` (default) sweeps a highlight over still
+     * shapes, `draw` reveals bars or contours in order, `breathe` lets them rise and settle.
+     * Moving skeletons on a page share a clock.
+     */
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -258,6 +270,7 @@ export interface CardMarks {
 }
 /** Panes drawn under the main plot, linked to it: same data, x, margins and crosshair. */
 export interface CardPaneContext<Row> {
+    loadingStyle?: ChartLoadingStyle;
     data: readonly Row[];
     x: TimeXConfig<Row> | NumericXConfig<Row>;
     controller: ChartController;
@@ -278,7 +291,7 @@ export declare const CARD_PADDING = 20;
  * The shared card body: headline, delta, period, plot, and value tiles, with hover sync and
  * range comparison. Area, Line, and Bar cards differ only in their `shape`.
  */
-export declare function CartesianCard<Row, Key extends NumericKey<Row>>({ shape, title, data: suppliedData, x, series: seriesInput, headline: suppliedHeadline, aggregate: suppliedAggregate, headlineSeries, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, tiles, legend, legendSwatch, depth, height, valueFormat, locale, formatValue: suppliedFormatValue, formatAxisValue: suppliedFormatAxisValue, formatX, xType, compare, target: suppliedTarget, forecast, sync, axis, hover, hoverStyle, background, spotlight, surface, badge, numberStyle, palette, bleed, axisInset, pillSeries, pillValue, pillPosition, tooltipIndicator, loading, motion, className, style, panes, live, heading, restCaption, normal, onNormalChange, }: Omit<CartesianCardProps<Row, Key>, 'series'> & {
+export declare function CartesianCard<Row, Key extends NumericKey<Row>>({ shape, title, data: suppliedData, x, series: seriesInput, headline: suppliedHeadline, aggregate: suppliedAggregate, headlineSeries, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, tiles, legend, legendSwatch, depth, height, valueFormat, locale, formatValue: suppliedFormatValue, formatAxisValue: suppliedFormatAxisValue, formatX, xType, compare, target: suppliedTarget, forecast, sync, axis, hover, hoverStyle, background, spotlight, decimate, surface, badge, numberStyle, palette, bleed, axisInset, pillSeries, pillValue, pillPosition, tooltipIndicator, loading, loadingStyle, motion, className, style, panes, live, heading, restCaption, normal, onNormalChange, }: Omit<CartesianCardProps<Row, Key>, 'series'> & {
     series: readonly CoreSeries<Key>[];
     shape: CardShape;
     /** Linked panes under the plot, such as volume or indicators. */

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -53,6 +53,7 @@ export interface FunnelChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -83,4 +84,4 @@ export declare function pipeEnd(x: number, half: number, rx: number, side: 'left
  * its percentage on the band and its count in a tile beneath. Hovering a stage reads it in the
  * headline with the conversion from the step before.
  */
-export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;
+export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -59,6 +59,7 @@ export interface HeatmapChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -109,4 +110,4 @@ export declare function labelTier(index: number, count: number): 'major' | 'mino
  * labeled. Hovering or focusing a cell reads it in the headline; arrow keys move between cells.
  * Missing cells are hatched and say "No data", so they never read as zero.
  */
-export declare function HeatmapChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, x, y, value, columns, rows: rowOrder, domain, aggregate, height, radius, gap, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: HeatmapChartCardProps<Row, Key>): ReactElement;
+export declare function HeatmapChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, x, y, value, columns, rows: rowOrder, domain, aggregate, height, radius, gap, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: HeatmapChartCardProps<Row, Key>): ReactElement;

package/dist/cards/horizontal-bar-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -52,6 +52,7 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -61,4 +62,4 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
  * A ranked list card: each row carries a bar, its value, and its share of the total. Hovering a
  * row reads it in the headline; click pins it and the arrow keys move through the list.
  */
-export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;
+export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { AnimatedNumberVariant } from '../motion/animated-number';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 export interface ProgressRange {
     id: string;
     label: string;
@@ -49,6 +49,7 @@ export interface ProgressCardProps {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -57,4 +58,4 @@ export interface ProgressCardProps {
  * One value against a goal: the value in the header, and a large ring or gauge with the
  * percentage reached. Past the goal the ring stays full and the percentage keeps counting.
  */
-export declare function ProgressCard({ title, value: suppliedValue, target: suppliedTarget, label, variant, depth, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, footer, valueFormat, locale, formatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: ProgressCardProps): ReactElement;
+export declare function ProgressCard({ title, value: suppliedValue, target: suppliedTarget, label, variant, depth, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, footer, valueFormat, locale, formatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: ProgressCardProps): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange, CardSeries } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -51,6 +51,7 @@ export interface RadarChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -96,5 +97,5 @@ export declare function profilePath(fractions: readonly (number | null)[], radiu
  * shape of strengths and gaps reads at a glance. Hovering or stepping around the spokes reads
  * every profile at that dimension.
  */
-export declare function RadarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, series, domain: suppliedDomain, aggregate, grid, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
+export declare function RadarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, series, domain: suppliedDomain, aggregate, grid, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
 export {};

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartMotion, ChartLoadingStyle, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { RankedRow } from './rank';
@@ -61,6 +61,8 @@ export interface RadialChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    /** Shimmer (default), a clockwise draw, or a gentle pulse. Honors reduced motion. */
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -84,5 +86,5 @@ export declare function ringAngles(rows: readonly RankedRow[]): Slice[];
  * A donut or pie card: the headline total, slices with a matching legend, and each slice's
  * share. Hovering a slice or a legend row reads it in the headline.
  */
-export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
+export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
 export {};

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { SankeyGraph, SankeyLink, SankeyNode } from '../engine/sankey';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -46,6 +46,7 @@ export interface SankeyChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -70,5 +71,5 @@ export declare function sankeyGraph<Row>({ data, source, target, value, conserva
  * amount that moved. Hovering or stepping through flows with the arrow keys reads each in the
  * headline with its share of the step it left.
  */
-export declare function SankeyChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, source, target, value, conservation, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: SankeyChartCardProps<Row, Key>): ReactElement;
+export declare function SankeyChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, source, target, value, conservation, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: SankeyChartCardProps<Row, Key>): ReactElement;
 export {};

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -65,6 +65,7 @@ export interface ScatterChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -97,4 +98,4 @@ export declare function clipTrend(fit: {
  * and colored by group. Hovering or stepping through points with the arrow keys reads each one in
  * the headline, with its position marked on both axes.
  */
-export declare function ScatterChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, x, y, size, sizeLabel, group, label, xLabel, yLabel, trend, depth, height, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, xFormat, locale, formatValue: suppliedFormatValue, formatX: suppliedFormatX, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: ScatterChartCardProps<Row, Key>): ReactElement;
+export declare function ScatterChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, x, y, size, sizeLabel, group, label, xLabel, yLabel, trend, depth, height, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, xFormat, locale, formatValue: suppliedFormatValue, formatX: suppliedFormatX, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: ScatterChartCardProps<Row, Key>): ReactElement;

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { SlopeOrder } from '../engine/slope';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -64,6 +64,7 @@ export interface SlopeChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -75,4 +76,4 @@ export interface SlopeChartCardProps<Row, Key extends NumericKey<Row>> {
  * category reads its later value and change in the headline; click pins it, and the arrow keys
  * move through categories.
  */
-export declare function SlopeChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, from, to, fromLabel, toLabel, variant, depth, sort, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, color, height, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: SlopeChartCardProps<Row, Key>): ReactElement;
+export declare function SlopeChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, from, to, fromLabel, toLabel, variant, depth, sort, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, color, height, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: SlopeChartCardProps<Row, Key>): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartBarAppearance, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartBarAppearance, ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { NumericKey, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -64,10 +64,11 @@ export interface StatCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
 }
 /** Cells of a meter: whole cells up to the value, then one cell trimmed to the exact remainder. */
 export declare function meterCells(ratio: number, count?: number): number[];
-export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, depth, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, className, style, }: StatCardProps<Row, Key>): ReactElement;
+export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, depth, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, loadingStyle, className, style, }: StatCardProps<Row, Key>): ReactElement;

package/dist/chart-context.d.ts

@@ -53,6 +53,11 @@ export interface ChartSnapshot<T> {
     /** Series drawn by column marks. */
     columns: readonly string[];
     geometry: PlotGeometry | null;
+    /**
+     * Lines and areas with more rows than pixels draw from this thinner geometry, which traces the
+     * same ink; null when every row is drawn. Inspection and everything else read `geometry`.
+     */
+    drawGeometry: PlotGeometry | null;
     plot: PlotBox;
     formatX: (value: number) => string;
     formatY: (value: number) => string;
@@ -116,5 +121,7 @@ export declare function makeAxisTicks(snapshot: ChartSnapshot<unknown>, previous
 export declare function logTicks(domain: readonly [number, number], count: number): number[];
 export declare function buildSnapshot<T>(data: NormalizedData<T>, series: readonly ChartSeries<T>[], xConfig: ChartXConfig<T>, yConfig: ChartYConfig, margins: ChartMargins, width: number, height: number, yDomainOverride?: readonly [number, number] | null, xDomainOverride?: readonly [number, number] | null, geometrySeries?: readonly ChartSeries<T>[], arrangement?: PlotArrangement, stackWeights?: Readonly<Record<string, number>>, barLayout?: ChartBarLayout, 
 /** Keeps line and area observations off the plot edges so labels can center on them. */
-edgeInset?: number): ChartSnapshot<T>;
+edgeInset?: number, 
+/** Draw long lines and areas from at most four rows per pixel column. */
+decimate?: boolean): ChartSnapshot<T>;
 export { ChartContext };

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, 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, 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, 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/decimate.d.ts

@@ -0,0 +1,25 @@
+import { NormalizedData } from './normalize';
+import { StackMode } from './stack';
+export interface DecimateOptions {
+    /** Series drawn as lines or areas, in chart order. Bars are drawn per row and left out. */
+    lines: readonly string[];
+    /** Stacked layers, in drawing order, whose cumulative boundaries are what the plot draws. */
+    stack?: {
+        series: readonly string[];
+        mode: StackMode;
+        weights?: Readonly<Record<string, number>>;
+    };
+    xDomain: readonly [number, number];
+    /** Maps a row's x to its screen pixel. */
+    xToPixel: (x: number) => number;
+}
+/**
+ * The rows worth drawing when a series has more rows than the plot has pixels (M4): in each pixel
+ * column, every drawn line's first, last, lowest and highest row. That traces the same ink as
+ * every row would, and every kept row is a real observation. Rows at the edge of a gap or a
+ * change of status are always kept, so gaps and provisional runs never close up.
+ *
+ * Returns null when thinning would not save much; the caller then draws every row. Only drawing
+ * uses the result: inspection, values and exports keep reading every row.
+ */
+export declare function decimateRows<T>(data: NormalizedData<T>, options: DecimateOptions): NormalizedData<T> | null;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartAxis, ChartBackground, ChartHoverStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
 import { AnimatedNumberVariant } from '../../motion/animated-number';
 import { BookLevel } from '../indicators';
 export interface DepthChartCardProps {
@@ -23,6 +23,7 @@ export interface DepthChartCardProps {
     surface?: ChartSurface;
     numberStyle?: AnimatedNumberVariant;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -31,4 +32,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, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, motion, className, style, depth, }: DepthChartCardProps): ReactElement;
+export declare function DepthChartCard({ title, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, motion, className, style, depth, }: DepthChartCardProps): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
 import { BookLevel } from './indicators';
 export interface OrderBookProps {
     title: string;
@@ -17,6 +17,8 @@ export interface OrderBookProps {
     /** Briefly highlight levels whose size changed. Defaults to true; reduced motion turns it off. */
     flash?: boolean;
     surface?: ChartSurface;
+    loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -25,4 +27,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, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, motion, className, style, }: OrderBookProps): ReactElement;
+export declare function OrderBook({ title, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, motion, className, style, }: OrderBookProps): ReactElement;