inkplot 0.0.1-placeholder.0 → 1.0.0-beta.1

package/dist/react.js

@@ -0,0 +1,252 @@
+/**
+ * The React adapter: a chart written as React components, drawing through the same element tree as any other chart.
+ *
+ *     import { Chart, CartesianPlane, Axis, LinearScale } from 'inkplot/react';
+ *     import { lightTheme } from 'inkplot';
+ *
+ *     <Chart theme={lightTheme} hostProps={{ style: { height: 300 } }}>
+ *       <CartesianPlane>
+ *         <Axis meta-title="Time"><LinearScale /></Axis>
+ *         …
+ *
+ * Every concrete element class has a component of the same name, exported from here. Each is made by a call marked pure,
+ * so a bundler keeps only the ones you use, and the classes behind the rest stay out. For a class of your own, make
+ * its component with `reactWrapper(MyClass)`. The one with no wrapper above it is the root: it
+ * renders a `<div>` and attaches the chart to it (`hostProps` are that div's props, `platformOptions` the DOMPlatform's).
+ *
+ * How the two trees stay one:
+ * - Every wrapper instance owns one element, made on its first render and never swapped. React decides which instance is
+ *   which (by position and key), so a reorder moves instances and a changed tag type makes a new one.
+ * - Rendering only collects. Each wrapper, as it renders, adds its element to the list its parent started. Nothing in the
+ *   element tree is touched until React commits: then each wrapper links its element into its parent's, puts the
+ *   parent's children in the order the list says, and writes the attributes that differ. So an abandoned render (Strict
+ *   Mode, an interrupted transition) changes nothing, and unchanged attributes cost a comparison.
+ * - Attributes come from props (`meta-title`, `style-axis-color` nest as in attrs.ts). Plain objects and arrays are compared by content, so
+ *   `meta={{ title }}` written in a render does not invalidate the chart each time. Functions are compared by identity: memoize them.
+ *
+ * Limits, which follow from the element tree having no idea where React put things:
+ * - A chart element that appears through state in a component *between* chart elements joins its parent in the right
+ *   place only if the parent renders too; otherwise it goes last. Keep the condition in the component that renders the parent.
+ * - Do not wrap a component that renders chart elements in `React.memo`, or hand chart elements down as `children` through a
+ *   component that re-renders by itself: a child that does not render is not in the list, so it cannot be reordered (it stays where it is).
+ * - Fixed children (an axis' scale) come first in the order the class' documentation gives; the order is not type-checked.
+ */
+import { createContext, createElement, forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { attributesOf, difference } from './adapt.js';
+import { DOMPlatform } from './dom-platform.js';
+import * as annotation_ from './annotation.js';
+import * as boxplot_ from './boxplot.js';
+import * as boxzoom_ from './boxzoom.js';
+import * as brush_ from './brush.js';
+import * as axis_ from './axis.js';
+import * as bars_ from './bars.js';
+import * as chart_ from './chart.js';
+import * as crosshair_ from './crosshair.js';
+import * as errors_ from './errors.js';
+import * as cursor_ from './cursor.js';
+import * as curve_ from './curve.js';
+import * as curves_ from './curves.js';
+import * as decimation_ from './decimation.js';
+import * as furniture_ from './furniture.js';
+import * as key_ from './key.js';
+import * as legend_ from './legend.js';
+import * as mapped_ from './mapped.js';
+import * as trend_ from './trend.js';
+import * as heatmap_ from './heatmap.js';
+import * as marker_ from './marker.js';
+import * as panzoom_ from './panzoom.js';
+import * as plane_ from './plane.js';
+import * as pointer_ from './pointer.js';
+import * as radial_ from './radial.js';
+import * as renderer_ from './renderer.js';
+import * as scales_ from './scales.js';
+import * as series_ from './series.js';
+import * as sources_ from './sources.js';
+import * as stack_ from './stack.js';
+import * as density_ from './density.js';
+import * as stats_ from './stats.js';
+import * as steps_ from './steps.js';
+import * as summary_ from './summary.js';
+import * as time_intl_ from './time-intl.js';
+import * as time_temporal_ from './time-temporal.js';
+const ParentContext = createContext(null);
+/** Put `element` among the parent's children before the first later sibling in the render list that is already there. */
+function place(parent, element) {
+    let found = false;
+    for (const other of parent.list) {
+        if (found && other.parent === parent.element) {
+            parent.element.insertBefore(element, other);
+            return;
+        }
+        if (other === element)
+            found = true;
+    }
+    parent.element.append(element);
+}
+/**
+ * Bring a parent's children into the order its render listed them. Only when every child linked now was in the list: a child
+ * that did not render this time (memoized, say) is not in it, and nothing is known about where it belongs.
+ */
+function reorder(self) {
+    if (self.list.size !== self.mounted.size)
+        return;
+    let at = self.element.firstChild;
+    for (const child of self.list) {
+        if (child === at) {
+            at = at.nextSibling;
+            continue;
+        }
+        if (child.parent === self.element)
+            self.element.remove(child);
+        self.element.insertBefore(child, at);
+    }
+}
+/** Attach `chart` to a div and release it again; used by the root wrapper and by `ChartView`. */
+function useAttached(chart, hostRef, options) {
+    const size = options?.size;
+    useLayoutEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        const platform = new DOMPlatform(host, options);
+        // oxlint-disable-next-line typescript/consistent-type-assertions -- the ref holds a chart element, which a React ref cannot be typed as
+        chart.attach(platform);
+        return () => {
+            // oxlint-disable-next-line typescript/consistent-type-assertions -- the ref holds a chart element, which a React ref cannot be typed as
+            chart.detach();
+            platform.dispose();
+        };
+        // The platform is made again only for a change that needs a new one.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chart, size?.width, size?.height, options?.preciseText, options?.schedule]);
+}
+/** The host div's props: it fills what it is in unless told otherwise. */
+const hostPropsOf = (props, ref) => ({ ...props, ref, style: { width: '100%', height: '100%', ...props?.style } });
+/**
+ * A React component for a chart element class. Its props are the element's attributes (hyphenated names nest) and its
+ * children are the element's children. A `ref` receives the element. See the notes at the top of this file.
+ */
+export function reactWrapper(cls) {
+    const Wrapper = forwardRef((props, ref) => {
+        const parent = useContext(ParentContext);
+        const host = useRef(null);
+        const state = useRef(null);
+        // oxlint-disable-next-line typescript/consistent-type-assertions -- the props of a generic component, split into the ones this wrapper owns
+        const { children, hostProps, platformOptions, ...rest } = props;
+        const next = attributesOf(rest);
+        if (!state.current) {
+            const element = new cls(next);
+            state.current = { element, applied: next, self: { element, list: new Set(), mounted: new Set() } };
+        }
+        const s = state.current;
+        // Rendering only collects: this render's children report to the list as they render, and this element reports to its parent's.
+        s.self.list.clear();
+        parent?.list.add(s.element);
+        useImperativeHandle(ref, () => s.element, [s.element]);
+        // Committing: attributes first, then the place among the siblings, then the children's order. Children's effects ran before these.
+        useLayoutEffect(() => {
+            const patch = difference(s.applied, next);
+            if (patch)
+                s.element.setAttributes(patch);
+            s.applied = next;
+        });
+        useLayoutEffect(() => {
+            if (!parent)
+                return;
+            parent.mounted.add(s.element);
+            place(parent, s.element);
+            return () => {
+                parent.mounted.delete(s.element);
+                if (s.element.parent === parent.element)
+                    parent.element.remove(s.element);
+            };
+        }, [parent, s.element]);
+        useLayoutEffect(() => reorder(s.self));
+        // The root is attached last, to a tree that is complete.
+        useAttached(s.element, host, parent ? undefined : platformOptions);
+        const inside = createElement(ParentContext.Provider, { value: s.self }, children);
+        return parent ? inside : createElement('div', hostPropsOf(hostProps, host), inside);
+    });
+    Wrapper.displayName = cls.name || 'Element';
+    // oxlint-disable-next-line typescript/consistent-type-assertions -- the wrapper is typed per element class by the caller's declaration
+    return Wrapper;
+}
+/**
+ * Shows a chart made some other way (with `new`, or with the JSX runtime) in React. The chart is attached while this is mounted
+ * and detached when it is not; its attributes and children are yours to change, as the chart is not React's.
+ */
+export function ChartView(props) {
+    const host = useRef(null);
+    useAttached(props.chart, host, props.platformOptions);
+    return createElement('div', hostPropsOf(props.hostProps, host));
+}
+// ── Built-in components: one per concrete element class (the ones in `registry`). Each is a pure call, so a bundler drops the
+// wrappers you do not use, and with them the classes they name. `reactWrapper` stays for classes of your own.
+export const Chart = /* @__PURE__ */ reactWrapper(chart_.Chart);
+export const ChartTitle = /* @__PURE__ */ reactWrapper(furniture_.ChartTitle);
+export const ChartTooltip = /* @__PURE__ */ reactWrapper(furniture_.ChartTooltip);
+export const ChartSummary = /* @__PURE__ */ reactWrapper(summary_.ChartSummary);
+export const Cursor = /* @__PURE__ */ reactWrapper(cursor_.Cursor);
+export const Crosshair = /* @__PURE__ */ reactWrapper(crosshair_.Crosshair);
+export const Legend = /* @__PURE__ */ reactWrapper(legend_.Legend);
+export const CartesianPlane = /* @__PURE__ */ reactWrapper(plane_.CartesianPlane);
+export const PolarPlane = /* @__PURE__ */ reactWrapper(radial_.PolarPlane);
+export const RadarPlane = /* @__PURE__ */ reactWrapper(radial_.RadarPlane);
+export const Axis = /* @__PURE__ */ reactWrapper(axis_.Axis);
+export const ColorAxis = /* @__PURE__ */ reactWrapper(mapped_.ColorAxis);
+export const SizeAxis = /* @__PURE__ */ reactWrapper(mapped_.SizeAxis);
+export const ColorKey = /* @__PURE__ */ reactWrapper(key_.ColorKey);
+export const SizeKey = /* @__PURE__ */ reactWrapper(key_.SizeKey);
+export const LinearScale = /* @__PURE__ */ reactWrapper(scales_.LinearScale);
+export const LogScale = /* @__PURE__ */ reactWrapper(scales_.LogScale);
+export const SqrtScale = /* @__PURE__ */ reactWrapper(scales_.SqrtScale);
+export const BandScale = /* @__PURE__ */ reactWrapper(scales_.BandScale);
+export const IntlTimeScale = /* @__PURE__ */ reactWrapper(time_intl_.IntlTimeScale);
+export const TemporalTimeScale = /* @__PURE__ */ reactWrapper(time_temporal_.TemporalTimeScale);
+export const DomainSeries = /* @__PURE__ */ reactWrapper(series_.DomainSeries);
+export const XYSeries = /* @__PURE__ */ reactWrapper(series_.XYSeries);
+export const Stack = /* @__PURE__ */ reactWrapper(stack_.Stack);
+export const FlatDataSource = /* @__PURE__ */ reactWrapper(sources_.FlatDataSource);
+export const ObjectDataSource = /* @__PURE__ */ reactWrapper(sources_.ObjectDataSource);
+export const CompositeDataSource = /* @__PURE__ */ reactWrapper(sources_.CompositeDataSource);
+export const SyntheticDataSource = /* @__PURE__ */ reactWrapper(sources_.SyntheticDataSource);
+export const Decimator = /* @__PURE__ */ reactWrapper(decimation_.Decimator);
+export const MinMaxKernel = /* @__PURE__ */ reactWrapper(decimation_.MinMaxKernel);
+export const M4Kernel = /* @__PURE__ */ reactWrapper(decimation_.M4Kernel);
+export const LttbKernel = /* @__PURE__ */ reactWrapper(decimation_.LttbKernel);
+export const StrideKernel = /* @__PURE__ */ reactWrapper(decimation_.StrideKernel);
+export const LinePath = /* @__PURE__ */ reactWrapper(renderer_.LinePath);
+export const AreaPath = /* @__PURE__ */ reactWrapper(renderer_.AreaPath);
+export const LinearCurve = /* @__PURE__ */ reactWrapper(curve_.LinearCurve);
+export const MonotoneCurve = /* @__PURE__ */ reactWrapper(curves_.MonotoneCurve);
+export const NaturalCurve = /* @__PURE__ */ reactWrapper(curves_.NaturalCurve);
+export const CardinalCurve = /* @__PURE__ */ reactWrapper(curves_.CardinalCurve);
+export const CatmullRomCurve = /* @__PURE__ */ reactWrapper(curves_.CatmullRomCurve);
+export const BasisCurve = /* @__PURE__ */ reactWrapper(curves_.BasisCurve);
+export const BumpCurve = /* @__PURE__ */ reactWrapper(curves_.BumpCurve);
+export const QuadraticCurve = /* @__PURE__ */ reactWrapper(curves_.QuadraticCurve);
+export const ArcCurve = /* @__PURE__ */ reactWrapper(curves_.ArcCurve);
+export const StepCurve = /* @__PURE__ */ reactWrapper(steps_.StepCurve);
+export const BarPath = /* @__PURE__ */ reactWrapper(bars_.BarPath);
+export const BarLinePath = /* @__PURE__ */ reactWrapper(bars_.BarLinePath);
+export const BoxPath = /* @__PURE__ */ reactWrapper(boxplot_.BoxPath);
+export const BoxStats = /* @__PURE__ */ reactWrapper(stats_.BoxStats);
+export const Density = /* @__PURE__ */ reactWrapper(density_.Density);
+export const ErrorBars = /* @__PURE__ */ reactWrapper(errors_.ErrorBars);
+export const ErrorBand = /* @__PURE__ */ reactWrapper(errors_.ErrorBand);
+export const LinearTrend = /* @__PURE__ */ reactWrapper(trend_.LinearTrend);
+export const PolynomialTrend = /* @__PURE__ */ reactWrapper(trend_.PolynomialTrend);
+export const SinusoidalTrend = /* @__PURE__ */ reactWrapper(trend_.SinusoidalTrend);
+export const LoessTrend = /* @__PURE__ */ reactWrapper(trend_.LoessTrend);
+export const HeatMap = /* @__PURE__ */ reactWrapper(heatmap_.HeatMap);
+export const DotMarker = /* @__PURE__ */ reactWrapper(marker_.DotMarker);
+export const CrossMarker = /* @__PURE__ */ reactWrapper(marker_.CrossMarker);
+export const PlusMarker = /* @__PURE__ */ reactWrapper(marker_.PlusMarker);
+export const CircleMarker = /* @__PURE__ */ reactWrapper(marker_.CircleMarker);
+export const SquareMarker = /* @__PURE__ */ reactWrapper(marker_.SquareMarker);
+export const LineAnnotation = /* @__PURE__ */ reactWrapper(annotation_.LineAnnotation);
+export const CalloutAnnotation = /* @__PURE__ */ reactWrapper(annotation_.CalloutAnnotation);
+export const BoxZoom = /* @__PURE__ */ reactWrapper(boxzoom_.BoxZoom);
+export const Brush = /* @__PURE__ */ reactWrapper(brush_.Brush);
+export const PanZoom = /* @__PURE__ */ reactWrapper(panzoom_.PanZoom);
+export const PointerListener = /* @__PURE__ */ reactWrapper(pointer_.PointerListener);

package/dist/registry.d.ts

@@ -0,0 +1,2 @@
+import type { ElementRegistry } from './serialize.ts';
+export declare const registry: ElementRegistry;

package/dist/registry.js

@@ -0,0 +1,51 @@
+/**
+ * Every element class the library ships, by the name it is written under in JSON (see serialize.ts). This module names
+ * every class, so importing it brings them all into a bundle: it is for tools and configuration-driven pages, and a page
+ * that builds its charts in code never needs it. To add classes of your own: `{ ...registry, MyScale }`.
+ */
+import { CalloutAnnotation, LineAnnotation } from './annotation.js';
+import { Axis } from './axis.js';
+import { BarLinePath, BarPath } from './bars.js';
+import { BoxPath } from './boxplot.js';
+import { BoxStats } from './stats.js';
+import { Chart } from './chart.js';
+import { ErrorBand, ErrorBars } from './errors.js';
+import { LinearCurve } from './curve.js';
+import { ArcCurve, BasisCurve, BumpCurve, CardinalCurve, CatmullRomCurve, MonotoneCurve, NaturalCurve, QuadraticCurve } from './curves.js';
+import { CompositeDataSource, FlatDataSource, ObjectDataSource, SyntheticDataSource } from './sources.js';
+import { Decimator, LttbKernel, M4Kernel, MinMaxKernel, StrideKernel } from './decimation.js';
+import { ChartTitle, ChartTooltip } from './furniture.js';
+import { Cursor } from './cursor.js';
+import { Crosshair } from './crosshair.js';
+import { ColorKey, SizeKey } from './key.js';
+import { Legend } from './legend.js';
+import { ColorAxis, SizeAxis } from './mapped.js';
+import { LinearTrend, LoessTrend, PolynomialTrend, SinusoidalTrend } from './trend.js';
+import { HeatMap } from './heatmap.js';
+import { CircleMarker, CrossMarker, DotMarker, PlusMarker, SquareMarker } from './marker.js';
+import { BoxZoom } from './boxzoom.js';
+import { Density } from './density.js';
+import { Brush } from './brush.js';
+import { PanZoom } from './panzoom.js';
+import { ChartSummary } from './summary.js';
+import { CartesianPlane } from './plane.js';
+import { PointerListener } from './pointer.js';
+import { PolarPlane, RadarPlane } from './radial.js';
+import { AreaPath, LinePath } from './renderer.js';
+import { BandScale, LinearScale, LogScale, SqrtScale } from './scales.js';
+import { DomainSeries, XYSeries } from './series.js';
+import { Stack } from './stack.js';
+import { StepCurve } from './steps.js';
+import { IntlTimeScale } from './time-intl.js';
+import { TemporalTimeScale } from './time-temporal.js';
+export const registry = {
+    Chart, ChartTitle, ChartTooltip, ChartSummary, Cursor, Crosshair, Legend,
+    CartesianPlane, PolarPlane, RadarPlane,
+    Axis, ColorAxis, SizeAxis, ColorKey, SizeKey,
+    LinearScale, LogScale, SqrtScale, BandScale, IntlTimeScale, TemporalTimeScale,
+    DomainSeries, XYSeries, Stack,
+    FlatDataSource, ObjectDataSource, CompositeDataSource, SyntheticDataSource,
+    Decimator, MinMaxKernel, M4Kernel, LttbKernel, StrideKernel,
+    LinePath, AreaPath, LinearCurve, MonotoneCurve, NaturalCurve, CardinalCurve, CatmullRomCurve, BasisCurve, BumpCurve, QuadraticCurve, ArcCurve, StepCurve, BarPath, BarLinePath, BoxPath, BoxStats, Density, HeatMap, LinearTrend, PolynomialTrend, SinusoidalTrend, LoessTrend, ErrorBars, ErrorBand, DotMarker, CrossMarker, PlusMarker, CircleMarker, SquareMarker,
+    LineAnnotation, CalloutAnnotation, PanZoom, BoxZoom, Brush, PointerListener,
+};

package/dist/renderer.d.ts

@@ -0,0 +1,191 @@
+import type { PointBuffer } from './data.ts';
+import type { Extent } from './geometry.ts';
+import type { HitMode } from './hit.ts';
+import { Curve } from './curve.ts';
+import { type AnyElement, type BaseAttributes, ChartElement } from './element.ts';
+import { type ChartEvent } from './events.ts';
+import type { Bindings, MappedDimension } from './mapped.ts';
+import type { PlatformNode } from './platform.ts';
+import type { Series } from './series.ts';
+import type { Surface } from './surface.ts';
+/** The attributes any renderer can bind. Colours are CSS colour strings; widths and opacity are numbers. */
+export interface StyleBindable {
+    stroke: string;
+    fill: string;
+    strokeWidth: number;
+    opacity: number;
+}
+export interface SeriesRendererAttributes<Bindable extends object = StyleBindable> extends BaseAttributes {
+    /** Outline colour (a CSS colour). Default: from the theme. */
+    stroke?: string;
+    /** Outline width in pixels. Default: from the theme. */
+    strokeWidth?: number;
+    /** Fill colour (a CSS colour; 'none' for no fill). Default: from the theme. */
+    fill?: string;
+    /** Opacity from 0 to 1. Default 1. */
+    opacity?: number;
+    /**
+     * Attributes fed from data instead of fixed. The constant above stays as the fallback, so
+     * `{ strokeWidth: 0.5, bind: { stroke: { axis: heat, channel: 'p' } } }` mixes the two freely.
+     * Binding an attribute the renderer cannot vary is a compile error; so is a dimension of the wrong type.
+     */
+    bind?: Bindings<Bindable>;
+    /**
+     * Most paths this renderer may create. Each stylistic binding (one that has to vary per path: a colour, a width,
+     * an opacity) is quantized to `floor(maxNodes ** (1 / k))` buckets for k such bindings, so the count of paths
+     * in use cannot exceed it. Geometric bindings (a cross's size, a bubble's radius) go into the path data and cost
+     * nothing. Attaching throws if that leaves fewer than 2 buckets. Default 1000.
+     */
+    maxNodes?: number;
+}
+/** The rows a renderer is asked about by `spread`: the series' values as they sit, which columns hold what, and where a stack puts each row. */
+export interface SpreadView {
+    readonly raw: Float64Array;
+    readonly count: number;
+    readonly stride: number;
+    readonly firstColumn: number;
+    readonly secondColumn: number;
+    /** The column of a channel in `raw`, or -1. */
+    channelColumn(name: string): number;
+    /** Where a stack plots each row's value, or null outside a stack. */
+    readonly top: Float64Array | null;
+}
+/** Extents a renderer asks of the series' two axes, in data units. */
+export interface Spread {
+    first?: Extent;
+    second?: Extent;
+}
+/** What a renderer ended up binding, after resolving refs. The series reads this to know which channels to request. */
+export interface ResolvedBinding {
+    readonly property: string;
+    readonly channel: string;
+    readonly axis: MappedDimension<unknown>;
+    /** True when the value varies per path (and so is quantized), false when it goes into the path data. */
+    readonly stylistic: boolean;
+}
+/** Closed outlines in plot pixels, `perShape` points each (a `NaN` shape is left out): what a renderer that draws shapes can say it drew. */
+export interface PolygonSet {
+    readonly data: Float64Array;
+    readonly perShape: number;
+    readonly count: number;
+}
+/**
+ * The line a renderer actually draws, when it is not the straight one through the series' points (steps, curves): the
+ * path of placed points that a pointer is measured against, so that a hit or a reading is on what is on the screen.
+ */
+export interface Trace {
+    /** The path in plot pixels, each run of it (a stretch between gaps) ended by a NaN point. */
+    readonly line: PointBuffer;
+    /** For each vertex of `line`, the index of the series' own point it belongs to, which is what a hit on it reports; -1 at the NaN ending a run. */
+    readonly owner: Int32Array;
+    /** For a filled shape, the path it closes back along (its baseline), run for run with `line`, and null for a line. */
+    readonly base: PointBuffer | null;
+}
+/** Any series renderer. `any` because renderers are invariant in their attributes and children, so no concrete renderer type accepts every one. */
+export type AnySeriesRenderer = SeriesRenderer<any, any>;
+/** Draws a series' projected points into its own surface. */
+export declare abstract class SeriesRenderer<A extends SeriesRendererAttributes<object> = SeriesRendererAttributes, Children extends readonly AnyElement[] = []> extends ChartElement<Series, Children, A> {
+    static attrTypes: {
+        fill: 1;
+        maxNodes: 2;
+        stroke: 1;
+        strokeWidth: 2;
+        id: 1;
+        meta: {
+            title: 1;
+            description: 1;
+            role: 1;
+        };
+    };
+    /** Create or update this renderer's nodes from the placed points. Runs on every PAINT, so it must be idempotent. */
+    protected abstract draw(points: Readonly<PointBuffer>): void;
+    /**
+     * The one colour that stands for what this draws, for a key or a tooltip to show beside the series' name: its line, its
+     * fill. Null when it has none (the colour is bound to data, so there is not one).
+     */
+    get swatch(): string | null;
+    /**
+     * Draw a sample of what this draws into `parent` (a node of `surface`, the caller's), in a box `width` by `height` from
+     * its own top left corner: a short line for a line, a box for an area or bars, one marker for markers. It takes the look
+     * the renderer would draw with (theme, attributes, dashes), so a legend or a tooltip shows what is on the plot. Several
+     * renderers on a series draw their samples one over another. Nodes are keyed `key…` in `surface`. Default: a box of the
+     * `swatch` colour, or nothing for a renderer that has none.
+     */
+    sample(surface: Surface, parent: PlatformNode, key: string, width: number, height: number): void;
+    /** Values this renderer needs the value axis to reach whatever the data says: the baseline bars grow from. Default none. */
+    get includes(): readonly number[];
+    /**
+     * Pixels this draws beyond the places of its points (a marker's radius), which the axes leave room for so that a mark
+     * on the end of the data is not cut by the edge of the plot. Default 0.
+     */
+    get reach(): number;
+    /** Half the width of what this draws along the domain, as a fraction of the gap between neighbouring points (bars), which the domain axis leaves room for. Default 0. */
+    get spans(): number;
+    /** What a pointer hit on the series should measure by default, if this renderer knows: bars say 'shape'. Default no opinion. */
+    get hitMode(): HitMode | undefined;
+    /** The shapes this draws, one for each point of the series in the same order, for a 'shape' hit. Default none. */
+    shapes?(): PolygonSet | null;
+    /** The path this draws as a line (or the top of a shape), if it is not the straight one through the points. Hits and readings follow it. Default none. */
+    trace?(): Trace | null;
+    /**
+     * Channels of the data this needs as plain numbers beside each point (error bars: how far each value may be out), with no mapped
+     * axis to turn them into anything. The series requests them with the bound ones; in `points` they follow the two coordinates,
+     * raw, in the order of `Series.channels`. Default none.
+     */
+    get channelNames(): readonly string[];
+    /**
+     * What this draws beyond the values on each axis, over the rows now in view (a stack's rows are at their stacked places):
+     * the extents the series adds to its axes, so that error bars are not cut off by the plot. Default none.
+     */
+    spread?(view: SpreadView): Spread | null;
+    /** The same over all the data, for the range zooming is held to. It may be generous. Default none. */
+    limit?(series: Series): Spread | null;
+    /** Nothing is bound until bindings are written; a renderer that has some will report them here. */
+    get bindings(): readonly ResolvedBinding[];
+    /** Buckets per stylistic binding, from `maxNodes`. 0 when nothing is stylistically bound. */
+    get stepsPerBinding(): number;
+    onEvent(ev: ChartEvent): void;
+}
+/** A box in the look of a filled shape: what an area and a bar are in a legend. */
+export declare function paintBox(s: Surface, parent: PlatformNode, key: string, width: number, height: number, look: {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+}): void;
+export interface LinePathAttributes extends SeriesRendererAttributes {
+}
+/**
+ * One path through the points, in the way its `Curve` says: straight lines (`LinearCurve`), a spline, steps. A gap in the
+ * data lifts the pen, or is crossed if the series says its `gaps` are 'connect'.
+ */
+export declare class LinePath extends SeriesRenderer<LinePathAttributes, [curve: Curve]> {
+    /** How the points are joined. */
+    get curve(): Curve;
+    /** The series' palette colour is the default; a dash pattern is style only (`style: { seriesLine: { dash } }`). */
+    protected look(): import("./theme.ts").LineProps;
+    get swatch(): string;
+    trace(): Trace | null;
+    sample(s: Surface, parent: PlatformNode, key: string, width: number, height: number): void;
+    protected draw(): void;
+}
+export interface AreaPathAttributes extends SeriesRendererAttributes {
+    /** The value the area is filled from, kept inside the value axis' range. Default 0. */
+    baseline?: number;
+}
+/**
+ * The region between a line and a baseline, the line drawn in the way its `Curve` says. It is the data forward and the
+ * baseline backward, closed: the baseline is placed by the plane exactly as the data is, so on a rectangle this is the
+ * usual area under a line, and on a PolarPlane it is the ring or wedge between the curve and the baseline circle, with
+ * nothing here to say so. A gap in the data splits it into separate shapes. Outlines are off by default; give a `stroke`
+ * to draw one.
+ */
+export declare class AreaPath extends SeriesRenderer<AreaPathAttributes, [curve: Curve]> {
+    /** How the points are joined. */
+    get curve(): Curve;
+    protected look(): import("./theme.ts").ShapeProps;
+    get swatch(): string;
+    trace(): Trace | null;
+    sample(s: Surface, parent: PlatformNode, key: string, width: number, height: number): void;
+    protected draw(): void;
+}