@skdx/angular-charts 0.33.0 → 0.34.0

package/types/skdx-angular-charts-internal.d.ts

@@ -1,18 +1,37 @@
 import * as _angular_core from '@angular/core';
 
+/** A plotted value; `null` (or `NaN`) is a gap. */
+type Value = number | null;
 /** One plotted series: a name for the legend/title and a value per category. */
 interface Series {
     name: string;
-    data: number[];
+    data: Value[];
     /** Any CSS color; defaults to the next `@skdx/tokens` series color. */
     color?: string | undefined;
 }
-/** One named value, for the part-of-whole charts (pie, funnel). */
+/** One named value, for the part-of-whole charts (pie, funnel, radial bar). */
 interface Datum {
     name: string;
     value: number;
     color?: string | undefined;
 }
+/**
+ * How values are written: a function, or a named `Intl` style. `percent` expects fractions
+ * (0.25 → 25%), `duration` expects seconds, the date styles expect epoch milliseconds.
+ */
+type Format = ((value: number) => string) | {
+    style: 'integer' | 'decimal' | 'percent' | 'currency' | 'compact' | 'scientific' | 'date' | 'time' | 'datetime' | 'duration';
+    /** BCP-47 locale; defaults to the runtime locale. */
+    locale?: string | undefined;
+    /** ISO 4217 code for `currency`. @default 'USD' */
+    currency?: string | undefined;
+    /** Fraction digits for the number styles. */
+    digits?: number | undefined;
+    /** Suffix written after the number, e.g. ` ms`. */
+    unit?: string | undefined;
+};
+/** Semantic color of a reference line or band. */
+type Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
 interface Sized {
     /** @default 600 (300 for the round charts, 120 for sparklines) */
     width?: number | undefined;
@@ -22,43 +41,185 @@ interface Sized {
     legend?: boolean | undefined;
     /** Show a hover tooltip for the mark under the pointer. @default true */
     tooltip?: boolean | undefined;
+    /** How values are written in ticks, labels and tooltips. @default the runtime locale's number format */
+    format?: Format | undefined;
+    /** Categorical series colors, cycled by series index. @default the `@skdx/tokens` scales */
+    palette?: string[] | undefined;
+    /** Series (by name) left out of the plot; their legend entries stay, dimmed. */
+    hiddenSeries?: string[] | undefined;
+    /** Draw a loading placeholder instead of the chart. @default false */
+    loading?: boolean | undefined;
+    /** Draw this message instead of the chart. */
+    error?: string | undefined;
+    /** Written in place of an empty chart. @default 'No data available' */
+    emptyMessage?: string | undefined;
+    /** Longer accessible description, rendered as the svg `<desc>`. */
+    description?: string | undefined;
+    /** Hide the chart from assistive technology, for charts that repeat adjacent text. @default false */
+    decorative?: boolean | undefined;
+    /**
+     * Fade marks in on mount and transition them on data changes; `true` is 300 ms, a number sets
+     * the duration. Off under `prefers-reduced-motion` and above 1500 shapes. @default false
+     */
+    animate?: boolean | number | undefined;
+    /** Measure the container and lay the chart out at that width, so text keeps its size. @default false */
+    responsive?: boolean | undefined;
+}
+type Curve = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+/** A horizontal or vertical line, or a shaded band, drawn behind the marks in data coordinates. */
+type Reference = {
+    label?: string | undefined;
+    /** @default 'neutral' */
+    variant?: Variant | undefined;
+} & ({
+    y: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    x: number | string | Date;
+} | {
+    y1: number;
+    y2: number;
+    axis?: 'left' | 'right' | undefined;
+} | {
+    x1: number | string | Date;
+    x2: number | string | Date;
+});
+interface AxisOptions {
+    min?: number | undefined;
+    max?: number | undefined;
+    /** @default 'linear' */
+    scale?: 'linear' | 'log' | undefined;
+    /** Overrides the chart-level `format` for this axis. */
+    format?: Format | undefined;
+    /** Axis title. */
+    label?: string | undefined;
+}
+interface XAxisOptions extends Pick<AxisOptions, 'format' | 'label'> {
+    /**
+     * `category` spaces points evenly; `time` and `linear` place numeric or date categories
+     * proportionally, so irregular timestamps land where they belong. @default 'category'
+     */
+    type?: 'category' | 'time' | 'linear' | undefined;
+}
+/** A visible window over the categories: indexes `[start, end)`. */
+interface Zoom {
+    start: number;
+    end: number;
 }
-type Curve = 'linear' | 'monotone';
-interface ChartInput extends Sized {
-    series: Series[];
-    /** X-axis labels; defaults to the 1-based index of each point. */
-    categories?: string[] | undefined;
-}
-interface BarChartInput extends ChartInput {
-    /** Stack series on top of each other instead of grouping them side by side. @default false */
-    stacked?: boolean | undefined;
-}
-interface LineChartInput extends ChartInput {
-    /** Straight segments, or a monotone cubic that never overshoots the data. @default 'linear' */
+/** A bar, line or area series inside a cartesian chart. */
+interface CartesianSeries extends Series {
+    /** Defaults to the chart's own type: bars in a BarChart, lines in a LineChart, areas in an AreaChart. */
+    type?: 'bar' | 'line' | 'area' | undefined;
+    /** Which y axis the values are measured on. @default 'left' */
+    axis?: 'left' | 'right' | undefined;
+    /** Overrides the chart-level curve for this line or area. */
+    curve?: Curve | undefined;
+    /** SVG dash pattern, e.g. `'4 3'`, for a line or area outline. */
+    dash?: string | undefined;
+    /** Dots on line and area points. @default true up to 100 points, then off */
+    markers?: boolean | undefined;
+    /** Stack with the other series that share the same group; `true` is the default group. */
+    stack?: boolean | string | undefined;
+}
+/** A shaded band between two series of values, e.g. a forecast interval. */
+interface RangeSeries {
+    type: 'range';
+    name: string;
+    low: Value[];
+    high: Value[];
+    color?: string | undefined;
+    axis?: 'left' | 'right' | undefined;
     curve?: Curve | undefined;
 }
-type AreaChartInput = LineChartInput;
+type Category = string | number | Date;
+interface ChartInput extends Sized {
+    series: (CartesianSeries | RangeSeries)[];
+    /** X-axis labels; defaults to the 1-based index of each point. Numbers and dates are written with `xAxis.format`. */
+    categories?: Category[] | undefined;
+    xAxis?: XAxisOptions | undefined;
+    yAxis?: AxisOptions | undefined;
+    /** Enables the second y axis on the right; series opt in with `axis: 'right'`. */
+    rightAxis?: AxisOptions | undefined;
+    references?: Reference[] | undefined;
+    /** Write each value next to its mark. @default false */
+    labels?: boolean | undefined;
+    /** Straight segments, a monotone cubic, or steps, for the line and area series. @default 'linear' */
+    curve?: Curve | undefined;
+    /** Draw lines across gaps instead of breaking them. @default false */
+    connectNulls?: boolean | undefined;
+    /** Stack the series instead of grouping them; `'percent'` normalizes each category to 100%. @default false */
+    stacked?: boolean | 'percent' | undefined;
+    /** Bars grow along x, categories run down the y axis. Line and area series are ignored. @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Corner radius of bars, in pixels. @default 0 */
+    radius?: number | undefined;
+    /** Order categories by the first series' value. */
+    sort?: 'asc' | 'desc' | undefined;
+    /**
+     * `histogram`: each series' data is a raw sample, binned into equal-width bars.
+     * `cumulative`: each series is replaced by its running total.
+     */
+    transform?: 'histogram' | 'cumulative' | undefined;
+    /** Histogram bin count. @default Sturges' rule */
+    bins?: number | undefined;
+    /** Histogram bin width; wins over `bins`. */
+    binWidth?: number | undefined;
+    /** Histogram domain; samples outside are dropped. @default the sample extent */
+    binDomain?: [number, number] | undefined;
+    /** What histogram bars measure. @default 'count' */
+    binMode?: 'count' | 'density' | 'cumulative' | undefined;
+    /** Visible category window, for zooming. */
+    zoom?: Zoom | undefined;
+    /** Draw a range strip under the plot showing the whole series and the zoomed window. @default false */
+    brush?: boolean | undefined;
+    /** Snap the hover tooltip to the nearest category and list every series' value there. @default false */
+    crosshair?: boolean | undefined;
+}
+type BarChartInput = ChartInput;
+type LineChartInput = ChartInput;
+type AreaChartInput = ChartInput;
 interface PieChartInput extends Sized {
     data: Datum[];
     /** Hole radius as a fraction of the outer radius: 0 is a pie, 0.6 a donut. @default 0 */
     innerRadius?: number | undefined;
     /** Write each slice's name and share on the slice. @default false */
     labels?: boolean | undefined;
+    /** Degrees clockwise from 12 o'clock where the first slice starts. @default 0 */
+    startAngle?: number | undefined;
+    /** Degrees clockwise from 12 o'clock where the last slice ends; `-90`/`90` makes a half circle. @default startAngle + 360 */
+    endAngle?: number | undefined;
+    /** Text in the middle of a donut, e.g. the total. */
+    centerLabel?: string | undefined;
 }
 interface ScatterSeries {
     name: string;
-    /** `[x, y]` pairs. */
-    data: [number, number][];
+    /** `[x, y]` pairs, or `[x, y, size]` triples for bubbles. */
+    data: ([number, number] | [number, number, number])[];
     color?: string | undefined;
 }
 interface ScatterChartInput extends Sized {
     series: ScatterSeries[];
+    /** Bubble radius range in pixels, for `[x, y, size]` data. @default [3, 18] */
+    sizeRange?: [number, number] | undefined;
+    /** Least-squares line per series. @default false */
+    trendline?: boolean | undefined;
+    xAxis?: AxisOptions | undefined;
+    yAxis?: AxisOptions | undefined;
+    references?: Reference[] | undefined;
 }
 interface SparklineInput extends Sized {
-    data: number[];
+    data: Value[];
     color?: string | undefined;
     /** @default 'linear' */
     curve?: Curve | undefined;
+    /** @default 'area' */
+    variant?: 'area' | 'line' | 'bar' | undefined;
+    /** Color by direction: success when the last value is above the first, danger below. @default false */
+    trend?: boolean | undefined;
+    /** Mark the minimum and maximum. @default false */
+    extremes?: boolean | undefined;
+    /** Write the last value after the line. @default false */
+    lastValue?: boolean | undefined;
 }
 interface RadarChartInput extends Sized {
     series: Series[];
@@ -66,21 +227,40 @@ interface RadarChartInput extends Sized {
     categories: string[];
     /** Scale every series to its own maximum, so rings read as percentages. @default false */
     normalize?: boolean | undefined;
+    /** Outer ring value. @default the largest value, rounded up */
+    max?: number | undefined;
+    /** Fill the polygons. @default true */
+    fill?: boolean | undefined;
 }
+interface CalendarCell {
+    date: string | number | Date;
+    value: number;
+}
+/** A matrix (`rows`, `columns`, `data`) or a calendar (`calendar`); one of the two must be given. */
 interface HeatmapInput extends Sized {
-    rows: string[];
-    columns: string[];
-    /** `data[row][column]`. */
-    data: number[][];
+    rows?: string[] | undefined;
+    columns?: string[] | undefined;
+    /** `data[row][column]`; `null` cells are left blank. */
+    data?: Value[][] | undefined;
+    /** One value per day; laid out as weekday rows and week columns, labelled by month. */
+    calendar?: CalendarCell[] | undefined;
     /** The cell color; each cell's opacity follows its value. */
     color?: string | undefined;
     /** Split around zero: values below use `negativeColor`, opacity follows the distance from zero. @default false */
     diverging?: boolean | undefined;
     /** @default the tokens danger color */
     negativeColor?: string | undefined;
+    /** Write each value in its cell. @default false */
+    labels?: boolean | undefined;
+    /** Value range the opacity ramp covers. @default the data extent */
+    domain?: [number, number] | undefined;
 }
 interface FunnelChartInput extends Sized {
     data: Datum[];
+    /** @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** `pyramid` widens toward the end and reports shares of the total instead of conversion. @default 'funnel' */
+    variant?: 'funnel' | 'pyramid' | undefined;
 }
 interface Tick {
     /** Pixel position along the axis. */
@@ -115,16 +295,25 @@ interface TreemapInput extends Sized {
     data: TreeNode[];
 }
 interface Candle {
-    label: string;
+    label: Category;
     open: number;
     high: number;
     low: number;
     close: number;
+    /** Drawn as a bar in a pane under the candles when any candle has one. */
+    volume?: number | undefined;
 }
 interface CandlestickInput extends Sized {
     data: Candle[];
     /** @default 'linear' */
     scale?: 'linear' | 'log' | undefined;
+    /** Bars with open/close ticks instead of filled candles. @default 'candlestick' */
+    variant?: 'candlestick' | 'ohlc' | undefined;
+    xAxis?: Pick<AxisOptions, 'format'> | undefined;
+    references?: Reference[] | undefined;
+    zoom?: Zoom | undefined;
+    brush?: boolean | undefined;
+    crosshair?: boolean | undefined;
 }
 interface WaterfallInput extends Sized {
     /** Signed deltas, applied in order. */
@@ -137,11 +326,13 @@ interface GanttTask {
     start: number;
     end: number;
     color?: string | undefined;
+    /** Tasks sharing a group share a row, so one row can hold several intervals. */
+    group?: string | undefined;
 }
 interface GanttInput extends Sized {
     tasks: GanttTask[];
-    /** Formats the x-axis ticks, e.g. a timestamp as a date. @default formatValue */
-    format?: ((value: number) => string) | undefined;
+    /** Vertical lines and bands in time coordinates, e.g. `{ x: Date.now(), label: 'Today' }`. */
+    references?: Reference[] | undefined;
 }
 interface BoxplotInput extends Sized {
     /** One box per series, over that series' raw samples. */
@@ -184,11 +375,56 @@ interface MapInput extends Sized {
     /** @default 'equirectangular' */
     projection?: 'equirectangular' | 'mercator' | undefined;
 }
+interface RadialBand {
+    from: number;
+    to: number;
+    variant?: Variant | undefined;
+}
+interface RadialBarInput extends Sized {
+    /** One concentric arc per datum, the first outermost. */
+    data: Datum[];
+    /** The value a full arc represents. @default the largest value */
+    max?: number | undefined;
+    /** Degrees clockwise from 12 o'clock. @default 0 */
+    startAngle?: number | undefined;
+    /** @default 360 */
+    endAngle?: number | undefined;
+    /** Hole radius as a fraction of the outer radius. @default 0.3 */
+    innerRadius?: number | undefined;
+    /** Gap between arcs as a fraction of one arc's thickness. @default 0.25 */
+    gap?: number | undefined;
+    /** Draw the full-range track behind each arc. @default true */
+    track?: boolean | undefined;
+    /** Round the arc ends. @default true */
+    rounded?: boolean | undefined;
+    /** Write each name and value at the arc start. @default false */
+    labels?: boolean | undefined;
+    /** Threshold sectors drawn outside the arcs, in value units. */
+    bands?: RadialBand[] | undefined;
+    /** A tick across every arc at this value. */
+    target?: number | undefined;
+    /** Text in the middle, e.g. the headline value. */
+    centerLabel?: string | undefined;
+}
+/** What a click, focus or hover refers to. */
+interface ChartItem {
+    /** The tooltip text. */
+    label: string;
+    series?: string | undefined;
+    category?: string | undefined;
+    index?: number | undefined;
+    value?: number | undefined;
+    name?: string | undefined;
+    /** Set on legend entries, which toggle a series instead of reporting a value. */
+    legend?: boolean | undefined;
+}
 interface ShapeBase {
     /** The `data-skdx-part` value, e.g. `node`, `link`, `grid`. */
     part: string;
     /** Native tooltip text. */
     title?: string | undefined;
+    /** What the mark stands for; makes it clickable and keyboard-focusable. */
+    item?: ChartItem | undefined;
 }
 type Shape = (ShapeBase & {
     kind: 'path';
@@ -200,6 +436,7 @@ type Shape = (ShapeBase & {
     strokeLinejoin?: 'round' | undefined;
     opacity?: number | undefined;
     fillOpacity?: number | undefined;
+    dash?: string | undefined;
 }) | (ShapeBase & {
     kind: 'rect';
     x: number;
@@ -209,6 +446,7 @@ type Shape = (ShapeBase & {
     fill: string;
     stroke?: string | undefined;
     opacity?: number | undefined;
+    rx?: number | undefined;
 }) | (ShapeBase & {
     kind: 'line';
     x1: number;
@@ -217,12 +455,15 @@ type Shape = (ShapeBase & {
     y2: number;
     stroke: string;
     dash?: string | undefined;
+    strokeWidth?: number | undefined;
 }) | (ShapeBase & {
     kind: 'circle';
     cx: number;
     cy: number;
     r: number;
     fill: string;
+    stroke?: string | undefined;
+    opacity?: number | undefined;
 }) | (ShapeBase & {
     kind: 'text';
     x: number;
@@ -231,7 +472,25 @@ type Shape = (ShapeBase & {
     anchor?: 'start' | 'middle' | 'end' | undefined;
     baseline?: 'middle' | 'hanging' | undefined;
     fill?: string | undefined;
+    weight?: 'bold' | undefined;
 });
+/** Where the pointer can act inside a cartesian chart: category slots, the shared tooltip rows and the brush strip. */
+interface Hit {
+    plot: Box;
+    /** Pixel center of every visible category. */
+    xs: number[];
+    /** Tooltip lines per visible category: the category, then one per series. */
+    rows: string[][];
+    /** Total category count, before zooming. */
+    count: number;
+    zoom: Zoom;
+    /** The range strip, when `brush` is on. */
+    brush?: {
+        box: Box;
+        window: Box;
+    } | undefined;
+    crosshair: boolean;
+}
 /** What every layout returns: the outer size, the whole chart as shapes and the tooltip switch. */
 interface Canvas {
     width: number;
@@ -239,51 +498,199 @@ interface Canvas {
     /** Everything drawn, back to front: grid, marks, legend and labels. */
     shapes: Shape[];
     tooltip: boolean;
+    description?: string | undefined;
+    decorative?: boolean | undefined;
+    /** Transition duration in ms when animation is on. */
+    animate?: number | undefined;
+    responsive?: boolean | undefined;
+    hit?: Hit | undefined;
 }
 interface LegendItem {
     name: string;
     color: string;
 }
 
-declare function layoutBarChart(input: BarChartInput): Canvas;
+/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */
+declare const layoutBarChart: (input: BarChartInput) => Canvas;
+
+/** One polyline per series with a dot per value; series may also be bars, areas or ranges. */
+declare const layoutLineChart: (input: LineChartInput) => Canvas;
+/** Filled (optionally stacked) areas down to zero; series may also be bars, lines or ranges. */
+declare const layoutAreaChart: (input: AreaChartInput) => Canvas;
 
-declare function layoutLineChart(input: LineChartInput): Canvas;
-declare function layoutAreaChart(input: AreaChartInput): Canvas;
+type Kind = 'bar' | 'line' | 'area';
+/** Markers are drawn up to this many visible points per series. */
+declare const MARKER_LIMIT = 100;
+/** Per-point titles (and so per-point tooltips) are emitted up to this many visible points per series. */
+declare const TITLE_LIMIT = 2000;
+/** Bars, lines, areas and range bands that share one category axis and up to two value axes. */
+declare function layoutCartesian(input: ChartInput, defaultType: Kind): Canvas;
 
 declare function layoutScatterChart(input: ScatterChartInput): Canvas;
 
 declare function layoutPieChart(input: PieChartInput): Canvas;
 
+/** A small axis-less trend: an area (default), a bare line, or bars; optional extremes and last value. */
 declare function layoutSparkline(input: SparklineInput): Canvas;
 
 declare function layoutRadarChart(input: RadarChartInput): Canvas;
 
 declare function layoutHeatmap(input: HeatmapInput): Canvas;
 
+/**
+ * Stages narrowing with their value (conversion), or a pyramid widening toward the end
+ * (shares of a whole). Vertical by default, horizontal when asked.
+ */
 declare function layoutFunnelChart(input: FunnelChartInput): Canvas;
 
 /**
- * Tooltip shapes for the mark under the pointer, or none. Reads the mark's
- * `<title>` and converts the pointer position into viewBox units.
+ * Concentric arcs, one per datum, each a share of `max`: KPI completion, utilization,
+ * quota attainment. `bands` and `target` turn it into a gauge; `startAngle`/`endAngle` open it.
  */
-declare function hoverTooltip(target: EventTarget | null, svg: Element, clientX: number, clientY: number, width: number, height: number): Shape[];
+declare function layoutRadialBar(input: RadialBarInput): Canvas;
 
+/**
+ * Series colors, cycling through the `@skdx/tokens` scales so charts follow the
+ * active theme. Load `@skdx/tokens/css` (or any theme) for these to resolve.
+ */
+declare const SERIES_COLORS: readonly string[];
 declare const CHART_COLORS: {
     readonly axis: "var(--skdx-color-border-strong)";
     readonly grid: "var(--skdx-color-border-subtle)";
     readonly label: "var(--skdx-color-text-muted)";
+    readonly focus: "var(--skdx-color-focus-ring)";
+    readonly positive: "var(--skdx-color-success-500)";
+    readonly negative: "var(--skdx-color-danger-500)";
     readonly fontFamily: "var(--skdx-font-family)";
     readonly fontSize: "var(--skdx-font-size-xs)";
 };
+/** Semantic color of a reference line, band or threshold sector. */
+declare const variantColor: (variant?: Variant) => string;
+
+/** The default: the runtime locale's plain number format, with float noise trimmed. */
+declare const formatValue: (v: number) => string;
+/** Turns a `Format` into a function; `undefined` gives the default number format. */
+declare function makeFormatter(format: Format | undefined): (value: number) => string;
+/** A category as axis text: strings as they are, numbers and dates through `format`. */
+declare function categoryLabel(c: Category, format?: Format): string;
+
+/** A tooltip box next to the pointer, kept inside the canvas; one line per entry. */
+declare function tooltipShapes(x: number, y: number, text: string | string[], width: number, height: number): Shape[];
+/**
+ * The loading, error or empty placeholder, or `null` when the chart should draw. Charts call this
+ * first so no axis is drawn around missing data.
+ */
+declare function stateCanvas(input: Sized, empty: boolean, w?: number, h?: number): Canvas | null;
+
+/** Converts a client position into viewBox units of the svg. */
+declare function toViewBox(svg: Element, clientX: number, clientY: number, width: number, height: number): {
+    x: number;
+    y: number;
+};
+/** The crosshair line and shared tooltip at the category nearest to `x`, or none outside the plot. */
+declare function crosshairShapes(layout: Canvas, x: number, y: number): Shape[];
+/**
+ * Tooltip shapes for the mark under the pointer, or none. Reads the mark's
+ * `<title>` and converts the pointer position into viewBox units.
+ */
+declare function hoverTooltip(target: EventTarget | null, svg: Element, clientX: number, clientY: number, width: number, height: number): Shape[];
+/** What to draw for a pointer at the given position: the crosshair when on, else the hovered mark's tooltip. */
+declare function pointerShapes(layout: Canvas, target: EventTarget | null, svg: Element, clientX: number, clientY: number): Shape[];
+/** The shape index and item of the mark an event landed on, if it stands for something. */
+declare function itemAt(layout: Canvas, target: EventTarget | null): {
+    index: number;
+    item: ChartItem;
+} | undefined;
+/** Indexes of the shapes a keyboard user can land on, in drawing order. */
+declare const focusTargets: (layout: Canvas) => number[];
+/** A representative point of a shape, where its tooltip is anchored. */
+declare function anchorOf(s: Shape): {
+    x: number;
+    y: number;
+};
+/** The focus ring around a shape plus its tooltip, for keyboard users. */
+declare function focusShapes(layout: Canvas, index: number | null): Shape[];
+/**
+ * The mark to focus after a key press: arrows step, Home/End jump, Escape clears (`null`);
+ * `undefined` means the key was not handled and should propagate.
+ */
+declare function nextFocus(layout: Canvas, current: number | null, key: string): number | null | undefined;
+/** Whether the zoom shows everything. */
+declare const isUnzoomed: (zoom: Zoom | undefined, count: number) => boolean;
+/** The window after a wheel step at viewBox `x`: scrolling up narrows around the pointer, down widens. */
+declare function zoomWheel(hit: Hit, deltaY: number, x: number): Zoom | undefined;
+/**
+ * The window after a pinch: `ratio` is the current finger distance over the distance when the
+ * pinch began (`> 1` narrows the window), anchored at viewBox `x`.
+ */
+declare function zoomPinch(hit: Hit, from: Zoom, ratio: number, x: number): Zoom;
+/** The window after dragging the plot by `dx` viewBox pixels from where `from` was set. */
+declare function zoomPan(hit: Hit, from: Zoom, dx: number): Zoom;
+type BrushGrab = 'move' | 'left' | 'right';
+/**
+ * What a pointer-down at viewBox (x, y) grabs in the range strip: a handle, the window,
+ * or (outside the window) a window re-centred there. `undefined` outside the strip.
+ */
+declare function brushGrab(hit: Hit, x: number, y: number): {
+    grab: BrushGrab;
+    zoom: Zoom;
+} | undefined;
+/** The window after dragging a brush grab by `dx` viewBox pixels. */
+declare function brushDrag(hit: Hit, grab: BrushGrab, from: Zoom, dx: number): Zoom;
+
+/** One shape as SVG markup. Shared by the export and usable for server rendering. */
+declare function shapeMarkup(s: Shape): string;
+/**
+ * A standalone SVG document of a layout, for download or server rendering. Colors stay as
+ * `var(--skdx-…)` references unless `resolve` maps them to concrete values, e.g. from
+ * `getComputedStyle(document.documentElement).getPropertyValue(name)`.
+ */
+declare function svgMarkup(layout: Canvas, label: string, resolve?: (cssVariable: string) => string): string;
+/**
+ * Rasterizes SVG markup (from `svgMarkup`, with tokens resolved) to a PNG blob at `scale` device
+ * pixels per unit. Browser only: needs `Image`, `document` and a canvas.
+ */
+declare function svgToPng(markup: string, width: number, height: number, scale?: number, background?: string): Promise<Blob>;
+/** RFC 4180 CSV of rows, for "download data" and clipboard copy. */
+declare function csv(rows: (string | number | null | undefined)[][]): string;
+/** Series and categories as CSV rows: a header of series names, one row per category. */
+declare function seriesCsv(series: {
+    name: string;
+    data: (number | null)[];
+}[], categories?: (string | number | Date)[]): string;
+
+/** Above this many shapes animation switches itself off; the transitions would cost more than they explain. */
+declare const ANIMATION_LIMIT = 1500;
+/**
+ * The static stylesheet every root ships: marks fade in on mount and their geometry transitions on
+ * change, both over `--skdx-chart-duration`, which is `0ms` (nothing moves) unless the root sets it
+ * from `animationDuration`. Tooltips, focus rings and the crosshair are excluded so interaction
+ * stays immediate; `prefers-reduced-motion` turns everything off. Geometry transitions rely on
+ * SVG 2 presentation attributes as CSS properties, which evergreen browsers support.
+ */
+declare const ANIMATION_CSS: string;
+/** The `--skdx-chart-duration` value for a layout, e.g. `300ms`, or `undefined` when it must not animate. */
+declare function animationDuration(layout: Canvas): string | undefined;
+
+/**
+ * Round timestamps covering `[min, max]` (epoch ms), about `count` of them: seconds to weeks as
+ * UTC-aligned multiples, then whole months or years.
+ */
+declare function timeTicks(min: number, max: number, count?: number): number[];
 
 declare function layoutSankey(input: SankeyInput): Canvas;
 
 declare function layoutTreemap(input: TreemapInput): Canvas;
 
+/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */
 declare function layoutCandlestick(input: CandlestickInput): Canvas;
 
 declare function layoutWaterfall(input: WaterfallInput): Canvas;
 
+/**
+ * Intervals on a numeric time axis, one row per task, or per `group` when tasks share one.
+ * Generic enough for schedules, on-call shifts, uptime windows and market sessions.
+ */
 declare function layoutGantt(input: GanttInput): Canvas;
 
 declare function layoutBoxplot(input: BoxplotInput): Canvas;
@@ -295,24 +702,58 @@ declare function layoutChord(input: ChordInput): Canvas;
 /** Projection fitted to the features' bounds (equirectangular by default, or Mercator); opacity follows the value. */
 declare function layoutMap(input: MapInput): Canvas;
 
-/** The accessible `<svg>` root every chart renders into: projected marks, then decorations, then the hover tooltip. */
+/**
+ * The accessible `<svg>` root every chart renders into: marks, decorations, then the hover or
+ * keyboard tooltip. Owns focus state; reports legend toggles and zoom changes to the chart.
+ */
 declare class SkdxChartRootComponent {
     readonly layout: _angular_core.InputSignal<Canvas>;
     readonly kind: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /** Wheel and pinch zoom, drag pans the category axis. */
+    readonly zoomable: _angular_core.InputSignal<boolean>;
+    /** Measure the host and report its width, so the chart can lay out at that width. */
+    readonly responsive: _angular_core.InputSignal<boolean>;
+    /** A mark was clicked, or Enter/Space was pressed on the focused mark. */
+    readonly itemClick: _angular_core.OutputEmitterRef<ChartItem>;
+    /** The legend toggled a series; the chart applies it through its `hiddenSeries` model. */
+    readonly hiddenSeriesChange: _angular_core.OutputEmitterRef<string[]>;
+    /** Wheel, drag, pinch or brush moved the window; the chart applies it through its `zoom` model. */
+    readonly zoomChange: _angular_core.OutputEmitterRef<Zoom | undefined>;
+    /** The host's measured width, under `responsive`. */
+    readonly measured: _angular_core.OutputEmitterRef<number>;
     protected readonly colors: {
         readonly axis: "var(--skdx-color-border-strong)";
         readonly grid: "var(--skdx-color-border-subtle)";
         readonly label: "var(--skdx-color-text-muted)";
+        readonly focus: "var(--skdx-color-focus-ring)";
+        readonly positive: "var(--skdx-color-success-500)";
+        readonly negative: "var(--skdx-color-danger-500)";
         readonly fontFamily: "var(--skdx-font-family)";
         readonly fontSize: "var(--skdx-font-size-xs)";
     };
+    protected readonly duration: _angular_core.Signal<string | null>;
+    private readonly pointers;
+    private readonly svg;
+    constructor();
     protected readonly tip: _angular_core.WritableSignal<Shape[]>;
+    protected readonly focused: _angular_core.WritableSignal<number | null>;
+    protected readonly canZoom: _angular_core.Signal<boolean>;
+    protected readonly focusable: _angular_core.Signal<boolean>;
+    protected readonly descId: _angular_core.Signal<string | null>;
+    protected readonly focusShapes: _angular_core.Signal<Shape[]>;
+    private drag;
+    private viewBox;
     protected onPointerMove(e: PointerEvent): void;
+    protected onPointerDown(e: PointerEvent): void;
+    protected onPointerUp(e: PointerEvent): void;
+    protected onWheel(e: WheelEvent): void;
+    protected onClick(e: MouseEvent): void;
+    protected onKeyDown(e: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxChartRootComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartRootComponent, "skdx-chart-root", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "kind": { "alias": "kind"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartRootComponent, "skdx-chart-root", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "kind": { "alias": "kind"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "hiddenSeriesChange": "hiddenSeriesChange"; "zoomChange": "zoomChange"; "measured": "measured"; }, never, never, true, never>;
 }
-/** The `<svg>` root, grid, axis and tick labels every axis chart shares; marks are projected. */
+/** Size, state, formatting, accessibility and interaction inputs every chart takes. */
 declare abstract class SkdxSizedBase {
     readonly width: _angular_core.InputSignal<number | undefined>;
     readonly height: _angular_core.InputSignal<number | undefined>;
@@ -322,37 +763,133 @@ declare abstract class SkdxSizedBase {
     readonly legend: _angular_core.InputSignal<boolean>;
     /** Show a hover tooltip for the mark under the pointer. */
     readonly tooltip: _angular_core.InputSignal<boolean>;
+    /** How values are written: a function or an `Intl` style such as `{ style: 'currency', currency: 'EUR' }`. */
+    readonly format: _angular_core.InputSignal<Format | undefined>;
+    /** Categorical series colors, cycled by series index. */
+    readonly palette: _angular_core.InputSignal<string[] | undefined>;
+    /** Series left out of the plot; two-way bindable, the legend toggles it. */
+    readonly hiddenSeries: _angular_core.ModelSignal<string[] | undefined>;
+    /** Draw a loading placeholder instead of the chart. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Draw this message instead of the chart. */
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    /** Written in place of an empty chart. */
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
+    /** Longer accessible description, rendered as the svg `<desc>`. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** Hide the chart from assistive technology. */
+    readonly decorative: _angular_core.InputSignal<boolean>;
+    /** Fade marks in and transition them on change; `true` is 300 ms, a number sets the duration. */
+    readonly animate: _angular_core.InputSignal<number | boolean>;
+    /** Lay the chart out at the host's width, so text keeps its size. */
+    readonly responsive: _angular_core.InputSignal<boolean>;
+    /** The width the root measured under `responsive`. */
+    protected readonly measuredWidth: _angular_core.WritableSignal<number | undefined>;
+    /** Visible category window; two-way bindable, wheel, drag, pinch and brush update it. */
+    readonly zoom: _angular_core.ModelSignal<Zoom | undefined>;
+    /** Wheel zooms and drag pans the category axis. */
+    readonly zoomable: _angular_core.InputSignal<boolean>;
+    /** A mark was clicked, or Enter/Space was pressed on the focused mark. */
+    readonly itemClick: _angular_core.OutputEmitterRef<ChartItem>;
+    /** Applies a legend toggle reported by the root. */
+    protected toggle([name]: string[]): void;
     protected sized(): {
         width: number | undefined;
         height: number | undefined;
+        animate: number | boolean;
+        responsive: boolean;
         legend: boolean;
         tooltip: boolean;
+        format: Format | undefined;
+        palette: string[] | undefined;
+        hiddenSeries: string[] | undefined;
+        loading: boolean;
+        error: string | undefined;
+        emptyMessage: string | undefined;
+        description: string | undefined;
+        decorative: boolean;
+        zoom: Zoom | undefined;
     };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxSizedBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxSizedBase, never, never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxSizedBase, never, never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "hiddenSeries": { "alias": "hiddenSeries"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; }, { "hiddenSeries": "hiddenSeriesChange"; "zoom": "zoomChange"; "itemClick": "itemClick"; }, never, never, true, never>;
 }
-/** Inputs the category charts take. */
+/** Inputs the cartesian charts (bar, line, area) take. */
 declare abstract class SkdxChartBase extends SkdxSizedBase {
-    readonly series: _angular_core.InputSignal<Series[]>;
-    readonly categories: _angular_core.InputSignal<string[] | undefined>;
+    readonly series: _angular_core.InputSignal<(CartesianSeries | RangeSeries)[]>;
+    /** X-axis labels; numbers and dates are written with `xAxis.format`. */
+    readonly categories: _angular_core.InputSignal<Category[] | undefined>;
+    readonly xAxis: _angular_core.InputSignal<XAxisOptions | undefined>;
+    readonly yAxis: _angular_core.InputSignal<AxisOptions | undefined>;
+    /** Enables the second y axis; series opt in with `axis: 'right'`. */
+    readonly rightAxis: _angular_core.InputSignal<AxisOptions | undefined>;
+    /** Lines and bands in data coordinates: targets, SLAs, forecast periods. */
+    readonly references: _angular_core.InputSignal<Reference[] | undefined>;
+    /** Write each value next to its mark. */
+    readonly labels: _angular_core.InputSignal<boolean>;
+    readonly curve: _angular_core.InputSignal<Curve | undefined>;
+    readonly connectNulls: _angular_core.InputSignal<boolean>;
+    /** Stack the series; `'percent'` normalizes each category to 100%. */
+    readonly stacked: _angular_core.InputSignal<boolean | "percent">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal" | undefined>;
+    /** Corner radius of bars. */
+    readonly radius: _angular_core.InputSignal<number | undefined>;
+    readonly sort: _angular_core.InputSignal<"asc" | "desc" | undefined>;
+    readonly transform: _angular_core.InputSignal<"histogram" | "cumulative" | undefined>;
+    readonly bins: _angular_core.InputSignal<number | undefined>;
+    readonly binWidth: _angular_core.InputSignal<number | undefined>;
+    readonly binDomain: _angular_core.InputSignal<[number, number] | undefined>;
+    readonly binMode: _angular_core.InputSignal<"cumulative" | "count" | "density" | undefined>;
+    /** Draw a range strip under the plot showing the whole series and the zoomed window. */
+    readonly brush: _angular_core.InputSignal<boolean>;
+    /** Snap the hover tooltip to the nearest category and list every series. */
+    readonly crosshair: _angular_core.InputSignal<boolean>;
     protected input(): {
-        series: Series[];
-        categories: string[] | undefined;
+        series: (CartesianSeries | RangeSeries)[];
+        categories: Category[] | undefined;
+        xAxis: XAxisOptions | undefined;
+        yAxis: AxisOptions | undefined;
+        rightAxis: AxisOptions | undefined;
+        references: Reference[] | undefined;
+        labels: boolean;
+        curve: Curve | undefined;
+        connectNulls: boolean;
+        stacked: boolean | "percent";
+        orientation: "vertical" | "horizontal" | undefined;
+        radius: number | undefined;
+        sort: "asc" | "desc" | undefined;
+        transform: "histogram" | "cumulative" | undefined;
+        bins: number | undefined;
+        binWidth: number | undefined;
+        binDomain: [number, number] | undefined;
+        binMode: "cumulative" | "count" | "density" | undefined;
+        brush: boolean;
+        crosshair: boolean;
         width: number | undefined;
         height: number | undefined;
+        animate: number | boolean;
+        responsive: boolean;
         legend: boolean;
         tooltip: boolean;
+        format: Format | undefined;
+        palette: string[] | undefined;
+        hiddenSeries: string[] | undefined;
+        loading: boolean;
+        error: string | undefined;
+        emptyMessage: string | undefined;
+        description: string | undefined;
+        decorative: boolean;
+        zoom: Zoom | undefined;
     };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxChartBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxChartBase, never, never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxChartBase, never, never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "xAxis": { "alias": "xAxis"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "rightAxis": { "alias": "rightAxis"; "required": false; "isSignal": true; }; "references": { "alias": "references"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "bins": { "alias": "bins"; "required": false; "isSignal": true; }; "binWidth": { "alias": "binWidth"; "required": false; "isSignal": true; }; "binDomain": { "alias": "binDomain"; "required": false; "isSignal": true; }; "binMode": { "alias": "binMode"; "required": false; "isSignal": true; }; "brush": { "alias": "brush"; "required": false; "isSignal": true; }; "crosshair": { "alias": "crosshair"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Draws a core shape list back to front. */
+/** Draws a core shape list back to front; marks with an `item` carry their index for hit-testing. */
 declare class SkdxChartShapesComponent {
     readonly shapes: _angular_core.InputSignal<Shape[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxChartShapesComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartShapesComponent, "g[skdxChartShapes]", never, { "shapes": { "alias": "shapes"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { CHART_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, hoverTooltip, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall };
-export type { AreaChartInput, BarChartInput, Box, BoxplotInput, Candle, CandlestickInput, Canvas, ChartInput, ChordInput, Curve, Datum, Frame, FunnelChartInput, GanttInput, GanttTask, GeoMultiPolygon, GeoPolygon, HeatmapInput, LegendItem, LineChartInput, MapFeature, MapInput, PieChartInput, RadarChartInput, SankeyInput, SankeyLink, ScatterChartInput, ScatterSeries, Series, Shape, Sized, SparklineInput, SunburstInput, Tick, TreeNode, TreemapInput, WaterfallInput };
+export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, MARKER_LIMIT, SERIES_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TITLE_LIMIT, anchorOf, animationDuration, brushDrag, brushGrab, categoryLabel, crosshairShapes, csv, focusShapes, focusTargets, formatValue, hoverTooltip, isUnzoomed, itemAt, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutCartesian, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutRadialBar, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall, makeFormatter, nextFocus, pointerShapes, seriesCsv, shapeMarkup, stateCanvas, svgMarkup, svgToPng, timeTicks, toViewBox, tooltipShapes, variantColor, zoomPan, zoomPinch, zoomWheel };
+export type { AreaChartInput, AxisOptions, BarChartInput, Box, BoxplotInput, BrushGrab, CalendarCell, Candle, CandlestickInput, Canvas, CartesianSeries, Category, ChartInput, ChartItem, ChordInput, Curve, Datum, Format, Frame, FunnelChartInput, GanttInput, GanttTask, GeoMultiPolygon, GeoPolygon, HeatmapInput, Hit, LegendItem, LineChartInput, MapFeature, MapInput, PieChartInput, RadarChartInput, RadialBand, RadialBarInput, RangeSeries, Reference, SankeyInput, SankeyLink, ScatterChartInput, ScatterSeries, Series, Shape, Sized, SparklineInput, SunburstInput, Tick, TreeNode, TreemapInput, Value, Variant, WaterfallInput, XAxisOptions, Zoom };