stream-charts 1.2.0 → 2.0.0

package/changes.md

@@ -1,5 +1,45 @@
 # change history
 
+## version 2.0.0 (data sources, canvas rendering, outlier plot)
+
+A redesign of how charts get their data and how they're drawn. Code written for 1.x needs updating; see "migrating from 1.x" in the [README](README.md).
+
+**Breaking changes**
+1. Charts read their data from an application-owned *data source* (`TimeSeriesDataSource`, `IteratesDataSource`, `OrdinalDataSource`, `OutlierDataSource`), handed to the chart through its new `dataSource` property. The data source subscribes to a *generator* (a function that creates the RxJS observable) when started, and unsubscribes when stopped. The `<Chart>`'s `initialData`, `seriesObservable`, `shouldSubscribe`, `onSubscribe`, and `onUpdateData` properties are gone: the initial data and `onUpdateData` are now data-source options, and running is controlled with `dataSource.start()` and `dataSource.stop()`.
+2. `dropDataAfter` moved from the plots to the data sources (and can be changed with `setDropDataAfter`).
+3. Charts are drawn on a single `<canvas>` rather than SVG elements. The `svgStyle` property still styles the chart's container.
+4. `Datum` is now `{x, y}` rather than `{time, value}` (create one with `datumOf(time, value)`), and `seriesFromTuples` is now `timeSeriesFromTuples`. Series data is held in a `FastShiftArray`, so dropping old data is cheap.
+5. `TrackerLabelLocation.WithMouse` was removed (`ByAxis` is the default, and `Nowhere` hides the labels).
+6. `zoomKeyModifiersRequired` now defaults to `true` (hold shift or ctrl while scrolling to zoom).
+7. The `useDataObservable` and `useInitialData` hooks were replaced by `useDataSource` and `useDataSourceRunning`.
+8. The public API is everything exported from the package root (`import {...} from "stream-charts"`); anything else is internal. Several 1.x exports were renamed or removed.
+
+**New**
+1. Data keeps streaming while a chart is unmounted (for example, when the user navigates to another page), and a restarted data source carries on from its latest data rather than starting over.
+2. Added the `<OutlierPlot>`, which plots a series with a confidence band for each measure (for example 1σ, 2σ, 3σ), and marks the points outside a band. Includes the `<OutlierPlotTooltipContent>`, which accepts custom content through `useOutlierTooltip`.
+3. Added the `<EmptyAxis>`, a plain line for a side of the plot that has no axis.
+4. Continuous y-axes can auto-scale (grow to fit the data on screen) in the scatter, bar, and outlier plots (`autoScale`, `autoScaleMin`, `autoScaleMax`, `autoScalePadding`, `autoScaledDomain`, `onAutoScale`).
+5. The scatter plot can draw markers at each point (`markerRadius`, `hideMarkersWhileRunning`).
+6. The Poincaré plot can colorize its lines by age (`colorizeLines`, `lineStartColor`, `lineEndColor`, `lineColorSteps`).
+7. All plots can highlight the axes of the hovered series (`highlightAxesOnMouseOver`), and hand back a `resetZoom` function (`onZoomReset`) for resetting the zoom along with the axes.
+8. The bar and Poincaré plots' zoom can survive remounting (`zoomState`, `onZoomStateChange`).
+9. The chart takes a `dataUpdatePeriod`, which gives smoother scrolling when the data arrives at a known, regular period.
+10. Custom tooltip content can be built on the new `<TooltipContent>` component. The raster, bar, and Poincaré tooltips now include sparklines.
+11. Series filters are screened for regular expressions that risk catastrophic backtracking (`regexFilter`, `literalFilter`, `isSafeRegex`).
+12. A plot on the wrong kind of axis (for example, a bar plot whose x-axis is a `<ContinuousAxis>`) reports which plot, which axis, and which axis component it needs, rather than naming the old axis types. The Poincaré plot now checks its axes too. See "which axes each plot takes" in the [README](README.md).
+13. The bar plot zooms in the same direction as the other plots for the same wheel or trackpad gesture (it used to zoom the opposite way).
+14. `<ScatterPlotTooltipContent>` and `<RasterPlotTooltipContent>` take an `intervalFormatter` for the mean interval between points (or spikes), a duration, which used to be formatted by the `xValueFormatter` (or `xFormatter`), and still is, by default.
+15. A bottom x-axis' label is drawn above the chart's bottom edge, so that its descenders (as in `(ms)` or `f[n](x)`) are no longer cut off.
+
+**Packaging and documentation**
+1. Dependencies are now declared correctly (in 1.x they were all listed only as development dependencies, so none were installed with the package). React 19, RxJS 7, and d3 7 are peer dependencies, so the library shares the application's copies (`npm install stream-charts react react-dom rxjs d3`). The small utilities the library uses internally (`result-fn`, `fast-shift-array`, `safe-regex`), and d3's type definitions, are installed with the package.
+2. Built with TypeScript 6 and tested with Jest 30.
+3. Rewrote the README for the new API, with a quick start, a migration guide, and links to the example project's guides and tutorials. The API docs now cover the public API only.
+
+## version 1.2.1 (doc update)
+
+Added videos of the charts to the documentation.
+
 ## version 1.2.0 (legend)
 
 Added a legend that can be external to the chart or internal (under the SVG element). When mousing over a legend item, the corresponding series is highlighted. And when mousing over a series, the corresponding legend item is highlighted. 

package/dist/app/charts/Chart.d.ts

@@ -1,40 +1,37 @@
-import { JSX } from 'react';
-import { Margin } from "./styling/margins";
-import { SvgStyle } from "./styling/svgStyle";
-import { SeriesStyle } from "./axes/axes";
-import { Observable, Subscription } from "rxjs";
-import { BaseSeries } from "./series/baseSeries";
-import { ChartData } from "./observables/ChartData";
+import { type JSX } from 'react';
+import { type Margin } from "./styling/margins";
+import type { SvgStyle } from "./styling/svgStyle";
+import type { BaseAxis, SeriesStyle } from "./axes/axes";
+import type { ChartData } from "./observables/ChartData";
 import { AxisInterval } from "./axes/AxisInterval";
+import type { BaseAxisRange } from "./axes/BaseAxisRange";
+import type { StreamingDataSource } from "./datasources/StreamingDataSource";
 /**
- * @param chartId A unique identifier for the chart. This is used to identify the chart in the DOM.
+ * @param chartId A unique identifier for the chart. This is used to namespace draw-handles registered
+ * with the chart's canvas context.
  * @param width The width of the chart container
  * @param height The height of the chart container
  * @param margin The margin between the edges of the chart container and the axes
- * @param color The base/default color of the chart lines. This can be overridden by the {@link Props.svgStyle} property.
- * @param backgroundColor The base/default background color. This can be overridden by the {@link Props.svgStyle} property.
- * @param svgStyle Overrides for the SVG style
+ * @param color The base/default color of the chart lines. This can be overridden by the {@link ChartProps.svgStyle} property.
+ * @param backgroundColor The base/default background color. This can be overridden by the {@link ChartProps.svgStyle} property.
+ * @param svgStyle Overrides for the chart container's CSS style
  * @param seriesStyles Map holding the series name to the series style associated with that series.
- * @param initialData Initial (static) data to plot before subscribing to the {@link ChartData} observable.
- * @param asChartData Optional conversion function that converts an array of base-series with datum type D to a
- * descendent of a {@link ChartData} object
  * @param seriesFilter Regular expression that filters which series to display on the plot. Can be update while streaming
- * @param seriesObservable {@link ChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
+ * @param dataSource The application-owned {@link StreamingDataSource} that holds (and ingests) the chart's data
  * @param windowingTime The time-window (in milliseconds) to buffer the incoming data before updating the chart. This is
  * a lever to reduce the lag between real-time and chart-time when a large amount of data is being
- * sourced by the observable. Smaller time-windows result in smoother scrolling, but more updates, and
+ * ingested by the data source. Smaller time-windows result in smoother scrolling, but more updates, and
  * possibly a larger lag.
- * @param shouldSubscribe When switching to `true` from `false`, subscribes to the {@link seriesObservable}. When switching
- * to `false` from `true`, unsubscribes from the {@link seriesObservable}.
- * @param onSubscribe Callback when the chart subscribes to the {@link ChartData} observable
+ * @param dataUpdatePeriod The period (ms) at which the data source's generator emits new data, when known
  * @param onUpdateAxesBounds Callback when the time range changes. This is generally used by plots where the
  * x-axis starts to scroll as the data streams in past the end of the current time
  * @param onUpdateChartTime Callback for updating the current chart time. This is generally used by plots
+ * whose axes don't represent time (e.g. the Poincaré plot)
  * @template CD refers to the chart-data that is used by the Observable that has the stream of data.
  * @template D refers to the datum in the data-series
  * @template S refers to the type for the series style
  */
-export interface Props<CD, D, S extends SeriesStyle> {
+export interface Props<CD extends ChartData, D, S extends SeriesStyle> {
     chartId: number;
     /**
      * The width of the chart container
@@ -49,56 +46,48 @@ export interface Props<CD, D, S extends SeriesStyle> {
      */
     margin?: Partial<Margin>;
     /**
-     * The base/default color of the chart lines. This can be overridden by the {@link Props.svgStyle} property.
+     * The base/default color of the chart lines. This can be overridden by the {@link ChartProps.svgStyle} property.
      */
     color?: string;
     /**
-     * The base/default background color. This can be overridden by the {@link Props.svgStyle} property.
+     * The base/default background color. This can be overridden by the {@link ChartProps.svgStyle} property.
      */
     backgroundColor?: string;
     /**
-     * Overrides for the SVG style
+     * Overrides for the chart container's CSS style
      */
     svgStyle?: Partial<SvgStyle>;
     /**
      * Map holding the series name to the series style associated with that series.
      */
     seriesStyles?: Map<string, S>;
-    /**
-     * Initial (static) data to plot before subscribing to the {@link ChartData} observable.
-     */
-    initialData: Array<BaseSeries<D>>;
-    /**
-     * Optional conversion function that converts an array of base-series with datum type D to a
-     * descendent of a {@link ChartData} object
-     * @param initialData The initial array of series
-     */
-    asChartData?: (initialData: Array<BaseSeries<D>>) => CD;
     /**
      * Regular expression that filters which series to display on the plot. Can be update while streaming
      */
     seriesFilter?: RegExp;
     /**
-     * {@link ChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
+     * The application-owned source of the chart's data (see {@link StreamingDataSource}). The chart
+     * and its plots read their series from the data source, and redraw as it ingests new data --
+     * they never subscribe to the data stream themselves. The application starts and stops the
+     * data source (e.g. Run/Pause), and the data source keeps ingesting while the chart is
+     * unmounted (e.g. the user navigated to another page), so the chart picks up where it left
+     * off when it remounts.
      */
-    seriesObservable?: Observable<CD>;
+    dataSource: StreamingDataSource<CD, D>;
     /**
      * The time-window (in milliseconds) to buffer the incoming data before updating the chart. This is
      * a lever to reduce the lag between real-time and chart-time when a large amount of data is being
-     * sourced by the observable. Smaller time-windows result in smoother scrolling, but more updates, and
+     * ingested by the data source. Smaller time-windows result in smoother scrolling, but more updates, and
      * possibly a larger lag.
      */
     windowingTime?: number;
     /**
-     * When switching to `true` from `false`, subscribes to the {@link seriesObservable}. When switching
-     * to `false` from `true`, unsubscribes from the {@link seriesObservable}.
+     * The period (ms) at which the data source's generator emits new data, when known. When
+     * provided, buffering switches from wall-clock-based to a fixed tick count derived from
+     * `windowingTime / dataUpdatePeriod`, avoiding a jittery scroll that can otherwise result once
+     * the axis auto-scrolls (see the view drivers in `subscriptions/viewDrivers.ts`).
      */
-    shouldSubscribe?: boolean;
-    /**
-     * Callback when the chart subscribes to the {@link ChartData} observable
-     * @param subscription The RxJS subscription
-     */
-    onSubscribe?: (subscription: Subscription) => void;
+    dataUpdatePeriod?: number;
     /**
      * Callback when the time range changes. This is generally used by plots where the
      * x-axis starts to scroll as the data streams in past the end of the current time
@@ -115,103 +104,10 @@ export interface Props<CD, D, S extends SeriesStyle> {
      * @param time The current chart time
      */
     onUpdateChartTime?: (time: number) => void;
-    /**
-     * Callback function that is called when new data arrives to the chart.
-     * @param seriesName The name of the series for which new data arrived
-     * @param data The new data that arrived in the windowing tine
-     * @see UseChartValues.windowingTime
-     */
-    onUpdateData?: (seriesName: string, data: Array<D>) => void;
     /**
      * The child components of the chart (i.e. the axis, plot, tracker, tooltip)
      */
     children: JSX.Element | Array<JSX.Element>;
 }
-/**
- * The chart container that holds the axes, plot, tracker, and tooltip. The chart manages the
- * subscription, sets up the {@link useChart} hook via the {@link ChartProvider}.
- * @param props The properties of the chart
- * @template CD Chart data
- * @template D The type of the datum type held in a series
- * @template S The type of the series style
- * @template TM The type of the tooltip metadata (the data about the series). If not specified,
- * defaults to an empty object
- * @example
- *
-
-<Chart
-    width={useGridCellWidth()}
-    height={useGridCellHeight()}
-    margin={{...defaultMargin, top: 60, right: 75, left: 70}}
-    color={theme.color}
-    backgroundColor={theme.backgroundColor}
-    seriesStyles={new Map([
-        ['neuron1', {
-            ...defaultLineStyle,
-            color: 'orange',
-            lineWidth: 2,
-            highlightColor: 'orange'
-        }],
-        ['neuron6', {
-            ...defaultLineStyle,
-            color: theme.name === 'light' ? 'blue' : 'gray',
-            lineWidth: 3,
-            highlightColor: theme.name === 'light' ? 'blue' : 'gray',
-            highlightWidth: 5
-        }],
-    ])}
-    initialData={initialDataRef.current}
-    seriesFilter={filter}
-    seriesObservable={observableRef.current}
-    shouldSubscribe={running}
-    onUpdateTime={handleChartTimeUpdate}
-    windowingTime={150}
->
-    <ContinuousAxis
-        axisId="x-axis-1"
-        location={AxisLocation.Bottom}
-        domain={[0, 5000]}
-        label="t (ms)"
-    />
-    <CategoryAxis
-        axisId="y-axis-1"
-        location={AxisLocation.Left}
-        categories={initialDataRef.current.map(series => series.name)}
-        label="neuron"
-    />
-    <CategoryAxis
-        axisId="y-axis-2"
-        location={AxisLocation.Right}
-        categories={initialDataRef.current.map(series => series.name)}
-        label="neuron"
-    />
-    <Tracker
-        visible={visibility.tracker}
-        labelLocation={TrackerLabelLocation.WithMouse}
-        style={{color: theme.color}}
-        font={{color: theme.color}}
-    />
-    <Tooltip
-        visible={visibility.tooltip}
-        style={{
-            fontColor: theme.color,
-            backgroundColor: theme.backgroundColor,
-            borderColor: theme.color,
-            backgroundOpacity: 0.9,
-        }}
-    >
-        <RasterPlotTooltipContent
-            xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
-            yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
-        />
-    </Tooltip>
-    <RasterPlot
-        spikeMargin={1}
-        dropDataAfter={5000}
-        panEnabled={true}
-        zoomEnabled={true}
-        zoomKeyModifiersRequired={true}
-    />
-</Chart>
-*/
-export declare function Chart<CD extends ChartData, D, S extends SeriesStyle, TM>(props: Props<CD, D, S>): JSX.Element;
+export declare function Chart<CD extends ChartData, D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis>(props: Props<CD, D, S>): JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/app/charts/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/app/charts/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,GAAG,EAAU,MAAM,OAAO,CAAA;AACvC,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAGvD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAQxD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AAK3E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,WAAW,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,WAAW;IACjE,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAKrB;;;;;;;OAOG;IACH,UAAU,EAAE,mBAAmB,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA;IACtC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,IAAI,CAAA;IAChE;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;CAC9C;AAuGD,wBAAgB,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,aAAa,EAAE,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyF3J"}

package/dist/app/charts/Chart.js

@@ -1,22 +1,32 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
-import { plotDimensionsFrom } from "./styling/margins";
-import { initialSvgStyle } from "./styling/svgStyle";
-import ChartProvider from "./hooks/useChart";
-import PlotDimensionsProvider, { defaultMargin } from "./hooks/usePlotDimensions";
-import * as d3 from "d3";
-import { createPlotContainer } from "./plots/plot";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { noop } from "./utils";
-import AxesProvider from "./hooks/useAxes";
-import MouseProvider from "./hooks/useMouse";
-import TooltipProvider from "./hooks/useTooltip";
-import DataObservableProvider from './hooks/useDataObservable';
-import InitialDataProvider from "./hooks/useInitialData";
+import { defaultMargin } from "./hooks/defaultPlotDimensions";
+import PlotDimensionsProvider from "./hooks/PlotDimensionsProvider";
+import CanvasSurfaceProvider from "./hooks/CanvasSurfaceProvider";
+import InteractionProvider from "./hooks/InteractionProvider";
+import ChartProvider from "./hooks/ChartProvider";
+import AxesProvider from "./hooks/AxesProvider";
+import { isSafeRegex } from "./filters/regexFilter";
+import { ChartDataContext } from "./hooks/useDataSource";
 const defaultBackground = '#202020';
 /**
- * The chart container that holds the axes, plot, tracker, and tooltip. The chart manages the
- * subscription, sets up the {@link useChart} hook via the {@link ChartProvider}.
+ * The chart container that holds the axes, plot, tracker, and tooltip. The chart reads its data
+ * from the application-owned data source (its `dataSource` prop), and sets up the
+ * {@link useChart} hook via the {@link ChartProvider}.
+ *
+ * Internally, the chart is backed by a single `<canvas>` element rather than an SVG element tree.
+ * The canvas itself is created and sized by {@link CanvasSurfaceProvider}, which derives its size
+ * from {@link usePlotDimensions} (the single source of truth for the chart's dimensions) rather
+ * than from this component's `width`/`height` props directly -- this keeps the canvas correctly
+ * sized even if dimensions are ever updated via `usePlotDimensions().updateDimensions(...)`
+ * independent of a prop change. Axes, plots, and the tracker don't create/mutate their own DOM
+ * nodes -- they register a draw function with the {@link CanvasContext} (exposed via
+ * `useChart().canvasContext`, itself sourced from {@link CanvasSurfaceProvider} via
+ * `useCanvasSurface()`), and the canvas context clears and repaints all registered draw functions
+ * whenever a redraw is requested.
  * @param props The properties of the chart
+ * @return The chart, with its children inside the chart's context providers
  * @template CD Chart data
  * @template D The type of the datum type held in a series
  * @template S The type of the series style
@@ -33,24 +43,22 @@ const defaultBackground = '#202020';
     backgroundColor={theme.backgroundColor}
     seriesStyles={new Map([
         ['neuron1', {
-            ...defaultLineStyle,
+            ...defaultLineStyle(),
             color: 'orange',
             lineWidth: 2,
             highlightColor: 'orange'
         }],
         ['neuron6', {
-            ...defaultLineStyle,
+            ...defaultLineStyle(),
             color: theme.name === 'light' ? 'blue' : 'gray',
             lineWidth: 3,
             highlightColor: theme.name === 'light' ? 'blue' : 'gray',
             highlightWidth: 5
         }],
     ])}
-    initialData={initialDataRef.current}
+    dataSource={dataSource}
     seriesFilter={filter}
-    seriesObservable={observableRef.current}
-    shouldSubscribe={running}
-    onUpdateTime={handleChartTimeUpdate}
+    onUpdateAxesBounds={handleChartTimeUpdate}
     windowingTime={150}
 >
     <ContinuousAxis
@@ -59,16 +67,16 @@ const defaultBackground = '#202020';
         domain={[0, 5000]}
         label="t (ms)"
     />
-    <CategoryAxis
+    <OrdinalAxis
         axisId="y-axis-1"
         location={AxisLocation.Left}
-        categories={initialDataRef.current.map(series => series.name)}
+        categories={dataSource.seriesList().map(series => series.name)}
         label="neuron"
     />
-    <CategoryAxis
+    <OrdinalAxis
         axisId="y-axis-2"
         location={AxisLocation.Right}
-        categories={initialDataRef.current.map(series => series.name)}
+        categories={dataSource.seriesList().map(series => series.name)}
         label="neuron"
     />
     <Tracker
@@ -93,52 +101,53 @@ const defaultBackground = '#202020';
     </Tooltip>
     <RasterPlot
         spikeMargin={1}
-        dropDataAfter={5000}
         panEnabled={true}
         zoomEnabled={true}
         zoomKeyModifiersRequired={true}
     />
 </Chart>
 */
+// the defaults (constants, so that their identity doesn't change from one render to the next)
+const NO_SERIES_STYLES = new Map();
+const MATCH_EVERYTHING = /./;
 export function Chart(props) {
-    const { chartId, width, height, color = '#d2933f', backgroundColor = defaultBackground, seriesStyles = new Map(), initialData, asChartData, seriesFilter = /./, seriesObservable, windowingTime = 100, shouldSubscribe = true, onSubscribe = noop, onUpdateAxesBounds = noop, onUpdateChartTime = noop, onUpdateData = noop, children, } = props;
-    // override the defaults with the parent's properties, leaving any unset values as the default value
-    const margin = Object.assign(Object.assign({}, defaultMargin), props.margin);
-    const svgStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, initialSvgStyle), props.svgStyle), { width: props.width, height: props.height })), [props.height, props.svgStyle, props.width]);
-    // hold a reference to the current width and the plot dimensions
-    const plotDimRef = useRef(plotDimensionsFrom(width, height, margin));
-    // the container that holds the d3 svg element
-    const mainGRef = useRef(null);
-    const containerRef = useRef(null);
-    const hoveredSeriesRef = useRef(null);
-    // creates the main <g> element for the chart if it doesn't already exist, otherwise
-    // updates the svg element with the updated dimensions or style properties
-    useEffect(() => {
-        if (containerRef.current) {
-            // create the main SVG element if it doesn't already exist
-            if (!mainGRef.current) {
-                mainGRef.current = createPlotContainer(chartId, containerRef.current, plotDimRef.current, color);
-            }
-            // build up the svg style from the defaults and any svg style object
-            // passed in as properties
-            const style = Object.getOwnPropertyNames(svgStyle)
-                .map(name => `${name}: ${svgStyle[name]}; `)
-                .join("");
-            // when the chart "backgroundColor" property is set (i.e. not the default value),
-            // then we need add it to the styles, overwriting any color that may have been
-            // set in the svg style object
-            const background = backgroundColor !== defaultBackground ?
-                `background-color: ${backgroundColor}; ` :
-                '';
-            // update the dimension and style
-            d3.select(containerRef.current)
-                .attr('width', width)
-                .attr('height', height)
-                .attr('style', style + background + ` color: ${color}`);
-        }
-    }, [color, backgroundColor, height, svgStyle, width, chartId]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: containerRef }), _jsx(PlotDimensionsProvider, { containerDimensions: { width, height }, margin: margin, children: _jsx(AxesProvider, { onUpdateAxesInterval: onUpdateAxesBounds, children: _jsx(MouseProvider, { children: _jsx(TooltipProvider, { children: _jsx(InitialDataProvider, { initialData: initialData, asChartData: asChartData, children: _jsx(DataObservableProvider, { seriesObservable: seriesObservable, windowingTime: windowingTime, shouldSubscribe: shouldSubscribe, onSubscribe: onSubscribe, onUpdateData: onUpdateData, onUpdateChartTime: onUpdateChartTime, children: _jsx(ChartProvider, { chartId: chartId, container: containerRef.current, mainG: mainGRef.current, color: color, backgroundColor: backgroundColor, svgStyle: svgStyle, seriesStyles: seriesStyles, seriesFilter: seriesFilter, hoveredSeriesRef: hoveredSeriesRef, children: 
-                                        // the chart elements are the children
-                                        children }) }) }) }) }) }) })] }));
+    const { chartId, width, height, color = '#d2933f', backgroundColor = defaultBackground, seriesStyles = NO_SERIES_STYLES, seriesFilter = MATCH_EVERYTHING, dataSource, windowingTime = 100, dataUpdatePeriod, onUpdateAxesBounds = noop, onUpdateChartTime = noop, children, } = props;
+    // the series the data source held when it was handed to the chart. Memoized on the data source
+    // ALONE: a new data source means new initial data, and the plots reset themselves when the
+    // initial data changes -- so it must not change when anything else does (e.g. a new
+    // `onUpdateChartTime` callback on every render of the chart's parent, which would otherwise
+    // reset the plots on every render)
+    const initialData = useMemo(() => dataSource.seriesList(), [dataSource]);
+    // the chart's data: the data source, its initial data, and the streaming settings
+    const chartData = useMemo(() => ({
+        dataSource: dataSource,
+        initialData,
+        windowingTime,
+        dataUpdatePeriod,
+        onUpdateChartTime
+    }), [dataSource, initialData, windowingTime, dataUpdatePeriod, onUpdateChartTime]);
+    // override the defaults with the parent's properties, leaving any unset values as the default
+    // value (memoized on the margin's values, so that a new `margin` object with the same values
+    // doesn't change the plot dimensions' context)
+    const { top, bottom, left, right } = { ...defaultMargin, ...props.margin };
+    const margin = useMemo(() => ({ top, bottom, left, right }), [top, bottom, left, right]);
+    const containerDimensions = useMemo(() => ({ width, height }), [width, height]);
+    // `seriesFilter` is tested against every series name on every redraw frame by each plot
+    // component (not just once), so an unvetted pattern -- e.g. one built directly from
+    // free-text user input without going through the `regexFilter` helper, which already screens
+    // for this -- could freeze the whole render loop with catastrophic backtracking. This is the
+    // one place every `seriesFilter`, however it was constructed, necessarily passes through
+    // before reaching a plot, so it's checked here too, falling back to the safe match-everything
+    // default rather than ever handing plots something that could hang them.
+    const safeSeriesFilter = useMemo(() => {
+        if (isSafeRegex(seriesFilter))
+            return seriesFilter;
+        console.warn(`seriesFilter regex risks catastrophic backtracking and was ignored; ` +
+            `falling back to the default (match-everything) filter; pattern: ${seriesFilter}`);
+        return MATCH_EVERYTHING;
+    }, [seriesFilter]);
+    return (_jsx(PlotDimensionsProvider, { containerDimensions: containerDimensions, margin: margin, children: _jsx(CanvasSurfaceProvider, { chartId: chartId, color: color, backgroundColor: backgroundColor, svgStyle: props.svgStyle, children: _jsx(AxesProvider, { onUpdateAxesInterval: onUpdateAxesBounds, children: _jsx(InteractionProvider, { children: _jsx(ChartDataContext.Provider, { value: chartData, children: _jsx(ChartProvider, { chartId: chartId, color: color, backgroundColor: backgroundColor, seriesStyles: seriesStyles, seriesFilter: safeSeriesFilter, children: 
+                            // the chart elements are the children
+                            children }) }) }) }) }) }));
 }
 //# sourceMappingURL=Chart.js.map

package/dist/app/charts/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../src/app/charts/Chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../src/app/charts/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/app/charts/axes/AxesState.d.ts

@@ -1,14 +1,18 @@
-import { BaseAxis } from "./axes";
+import type { BaseAxis } from "./axes";
 import { Optional } from "result-fn";
 /**
- * Holds the information to allow mapping axes names to the underlying axes objects.
- * These objects hold the axis ID, its location on the chart (i.e. left, right, bottom, upper)
- * and the underlying d3 selection objects for managing the axes. Axis objects that extend
- * the `BaseAxis` class may have additional properties.
+ * Holds the information to allow mapping axes IDs to the underlying axes objects (of either the
+ * x-axes or the y-axes). These objects hold the axis ID, its location on the chart (i.e. left,
+ * right, bottom, top), its type, and (for the axis types that extend `BaseAxis`) its scale and the
+ * functions for updating and drawing it.
  * @typeParam A The type of the axes (must extend `BaseAxis`)
  */
 export declare class AxesState<A extends BaseAxis> {
     readonly axes: Map<string, A>;
+    /**
+     * Use {@link from} or {@link empty} to create an axes state
+     * @param axes Mapping of the axes IDs to the axes
+     */
     private constructor();
     /**
      * Creates a new axes state from the specified map of axes.
@@ -26,12 +30,8 @@ export declare class AxesState<A extends BaseAxis> {
      */
     isEmpty(): boolean;
     /**
-     * Creates a deep copy of the current axes state.
-     * @return A deep copy of the current axes state.
-     */
-    copy(): AxesState<A>;
-    /**
-     * Adds an axis to the current axis state and returns a new axis state. This is an internal state
+     * Adds an axis to this axes state's map of axes (in place), and returns a new axes state holding
+     * that same map (a new object, so that React sees the change). This is an internal state
      * management function. This should generally not be used. Instead, use the {@link UseAxesValues.addXAxis}
      * and {@link UseAxesValues.addYAxis} functions to add axes.
      * @param axis The axis to add
@@ -42,23 +42,31 @@ export declare class AxesState<A extends BaseAxis> {
      */
     addAxis(axis: A, id: string): AxesState<A>;
     /**
-     * Attempts to retrieve the x-axis for the specified ID
-     * @param axisId The unique ID of the axis
-     * @return The axis, or undefined if no axis with the specified ID is found
+     * Attempts to retrieve the axis for the specified ID.
+     * @param axisId The unique ID of the axis, or `""` to request the default axis (the
+     * convention used throughout this library wherever a series has no explicit axis
+     * assignment -- see e.g. each plot component's own `axesFor` helper).
+     * @return The axis matching `axisId`; the default axis (see {@link defaultAxis}) if
+     * `axisId` is `""` and at least one axis exists; otherwise an empty `Optional`. A non-empty
+     * `axisId` that doesn't match any axis is deliberately treated as "not found" rather than
+     * silently substituting an unrelated axis -- that used to happen for *any* unmatched ID,
+     * which masked stale/mistyped axis IDs as if they'd resolved correctly.
      */
     axisFor(axisId: string): Optional<A>;
     /**
-     * Returns the default axis
-     * @return The default axis
+     * Returns the default axis: the first axis added
+     * @return The default axis, or an empty `Optional` when there are no axes
      * @see axisDefaultId
      */
     defaultAxis(): Optional<A>;
     /**
-     * @return An array holding all existing the x-axis IDs
+     * @return An array holding the IDs of all the axes
      */
     axisIds(): Array<string>;
     /**
-     * @return The default name of the x-axis (in case only on default axis was added)
+     * @return The ID of the default axis (the first axis added), or an empty `Optional` when there
+     * are no axes
      */
     axisDefaultId(): Optional<string>;
 }
+//# sourceMappingURL=AxesState.d.ts.map

package/dist/app/charts/axes/AxesState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxesState.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/axes/AxesState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AAEnC;;;;;;GAMG;AACH,qBAAa,SAAS,CAAC,CAAC,SAAS,QAAQ;IACrC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE7B;;;OAGG;IACH,OAAO;IAIP;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;IAInE;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC;IAIhD;;OAEG;IACH,OAAO,IAAI,OAAO;IAIlB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAK1C;;;;;;;;;;OAUG;IACH,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC;IAQpC;;;;OAIG;IACH,WAAW,IAAI,QAAQ,CAAC,CAAC,CAAC;IAO1B;;OAEG;IACH,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC;IAIxB;;;OAGG;IACH,aAAa,IAAI,QAAQ,CAAC,MAAM,CAAC;CAMpC"}