@lilt-ui/charts 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.7.1
+
+### Fixes
+
+- Charts inside a CSS-transformed container lay out at their real size instead of the scaled one. Charts in dialogs that scale in, zoom-to-fit dashboards and scaled previews were drawn squashed: the Cartesian plot, Sankey, Radar, Scatter, Slope, Activity Ring and the Funnel's depth look. Untransformed charts measure exactly as before.
+
+## 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.

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

@@ -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. */
@@ -285,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, loadingStyle, 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/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, 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, 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;