stream-charts 1.2.1 → 2.0.0

package/dist/app/charts/plots/BarPlot.js

@@ -1,57 +1,61 @@
-import { setClipPathG } from "./plot";
+import { clipToArea } from "./plot";
+import { useCanvasZoomPan } from "./useCanvasZoomPan";
 import * as d3 from "d3";
 import { noop } from "../utils";
 import { useChart } from "../hooks/useChart";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { axesForSeriesGen, ordinalAxisIntervals, ordinalAxisRanges, ordinalAxisZoomHandler, ordinalPanHandler } from "../axes/axes";
-import { subscriptionOrdinalXFor } from "../subscriptions/subscriptions";
-import { useDataObservable } from "../hooks/useDataObservable";
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef } from "react";
+import { seriesAt, canvasLocalPoint } from "./hitTesting";
+import { axesForSeriesGen, AxisType, checkAxisType, ordinalAxisIntervals, ordinalAxisRanges, ordinalAxisZoomHandler, ordinalPanHandler } from "../axes/axes";
+import { ordinalViewDriverFor } from "../subscriptions/viewDrivers";
+import { useDataSource, useDataSourceRunning, useInitialData, useStreamingSettings } from "../hooks/useDataSource";
+import { initialOrdinalStats } from "../datasources/ordinalDataSource";
 import { usePlotDimensions } from "../hooks/usePlotDimensions";
-import { useInitialData } from "../hooks/useInitialData";
-import { copyValueStatsForSeries } from "../observables/ordinals";
-import { calculateOrdinalStats } from "../series/ordinalSeries";
-import { applyFillStylesTo, applyStrokeStylesTo, STROKE_COLOR, STROKE_OPACITY, STROKE_WIDTH } from "../styling/svgStyle";
+import { applyFillStyle, applyStrokeStyle } from "../styling/canvasStyle";
 import { defaultBarSeriesStyle } from "../styling/barPlotStyle";
-import { AxisInterval } from "../axes/AxisInterval";
 import { Optional } from "result-fn";
-const STREAM_CHARTS_BAR_CHART_ID = 'stream-charts-bar-chart';
-// elements of the bar-chart
-const BAR_CHART_CLASS_IDS = {
-    currentValue: STREAM_CHARTS_BAR_CHART_ID + '-value-lines',
-    meanValue: STREAM_CHARTS_BAR_CHART_ID + '-mean-value-lines',
-    minMax: STREAM_CHARTS_BAR_CHART_ID + '-min-max-bars',
-    windowedMeanValue: STREAM_CHARTS_BAR_CHART_ID + '-windowed-mean-value-lines',
-    windowedMinMax: STREAM_CHARTS_BAR_CHART_ID + '-windowed-mean-bars'
-};
-const classIdFor = (id) => '.' + id;
-// constants identifying the bar-chart elements for which mouse-over/mouse-leave events are defined
-const TOOLTIP_PROVIDER_ID = STREAM_CHARTS_BAR_CHART_ID + '-tooltip-provider';
-export const BAR_CHART_TOOLTIP_PROVIDER_IDS = {
-    currentValue: TOOLTIP_PROVIDER_ID + '-current-value',
-    meanValue: TOOLTIP_PROVIDER_ID + '-mean-value',
-    minMax: TOOLTIP_PROVIDER_ID + '-min-max',
-    windowedMeanValue: TOOLTIP_PROVIDER_ID + '-windowed-min-max',
-    windowedMinMax: TOOLTIP_PROVIDER_ID + '-windowed-mean'
+import { BAR_CHART_TOOLTIP_PROVIDER_IDS } from "./constants";
+import { AxisInterval } from "../axes/AxisInterval";
+import { extentOf, extentWith } from "../axes/autoScale";
+import { growAutoScaledYAxes, useAutoScaleRestart } from "./autoScaleYAxes";
+/**
+ * Maps the short element-type keys used internally for hit-testing geometry (`minMax`,
+ * `windowedMinMax`, `meanValue`, `windowedMeanValue`, `currentValue`) to the actual provider IDs
+ * (`BAR_CHART_TOOLTIP_PROVIDER_IDS`) that `mouseOverHandlerFor`/`mouseLeaveHandlerFor` expect.
+ */
+const PROVIDER_ID_FOR_ELEMENT_TYPE = {
+    minMax: BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax,
+    windowedMinMax: BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax,
+    meanValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue,
+    windowedMeanValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue,
+    currentValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue,
 };
 /**
- * Renders a streaming bar plot for the series in the initial data and those sourced by the
- * observable specified as a property in the {@link Chart}. This component uses the {@link useChart}
+ * Renders a streaming bar plot for the series held by the {@link StreamingDataSource} handed to the
+ * {@link Chart} (its `dataSource` prop) -- along with each series' lifetime and windowed stats,
+ * which an {@link OrdinalDataSource} keeps. This component uses the {@link useChart}
  * hook, and therefore must be a child of the {@link Chart} to be plugged in to the
  * chart ecosystem (axes, tracker, tooltip).
  *
+ * Internally, this no longer creates/updates SVG `<rect>`/`<line>` elements. Instead, it registers
+ * a single draw function with the chart's {@link CanvasContext} that redraws every series' bars
+ * and lines from scratch each time the canvas repaints. Mouse hover (for the tooltip and the
+ * value-line/windowed-mean-line highlight) is handled by hit-testing the mouse position against
+ * the last-drawn geometry, keyed per `${seriesName}::${elementType}` so the five overlaid visual
+ * elements (min-max bar, windowed min-max bar, mean line, windowed mean line, value line) can be
+ * hit-tested and highlighted independently, matching the old per-element SVG mouseover behavior.
+ *
  * For a relatively complete example of how to use this plot component, see the
  * <a href="https://github.com/robphilipp/stream-charts-examples">`StreamingBarChart` example</a>
  *
  * @param props The properties associated with the bar plot
+ * @return `null` (the plot draws onto the chart's canvas)
  * @example
  * ```typescript
  * <BarPlot
  *     barMargin={1}
- *     dropDataAfter={5000}
  *     panEnabled={true}
  *     zoomEnabled={true}
  *     zoomKeyModifiersRequired={true}
- *     withCadenceOf={50}
  *
  *     showMinMaxBars={true}
  *     showValueLines={true}
@@ -62,135 +66,89 @@ export const BAR_CHART_TOOLTIP_PROVIDER_IDS = {
  * ```
  */
 export function BarPlot(props) {
-    const { chartId, container, mainG, axes, seriesStyles, seriesFilter, mouse } = useChart();
-    const { xAxesState, yAxesState, setAxisAssignments, setAxisIntervalFor, setOriginalAxisIntervalFor, axesRanges } = axes;
+    var _a;
+    const { chartId, canvasContext, axes, seriesStyles, seriesFilter, mouse } = useChart();
+    const { xAxesState, yAxesState, setAxisAssignments, setAxisIntervalFor, setOriginalAxisIntervalFor, axesRanges, axisRangeFor, updateAxisRanges, } = axes;
     const { mouseOverHandlerFor, mouseLeaveHandlerFor } = mouse;
     const { plotDimensions, margin } = usePlotDimensions();
-    const { seriesObservable, windowingTime = 100, shouldSubscribe, onSubscribe = noop, onUpdateData, onUpdateChartTime = noop } = useDataObservable();
+    const { windowingTime = 100, onUpdateChartTime = noop } = useStreamingSettings();
+    // the application-owned source of the data, and whether it's running (streaming)
+    const dataSource = useDataSource();
+    const running = useDataSourceRunning(dataSource);
     const { initialData } = useInitialData();
-    const { axisAssignments = new Map(), dropDataAfter = Infinity, panEnabled = false, zoomEnabled = false, zoomKeyModifiersRequired = true, showMinMaxBars = true, showWindowedMinMaxBars = true, showValueLines = true, showMeanValueLines = true, showWindowedMeanValueLines = true, barMargin = 2, barSeriesStyle = defaultBarSeriesStyle() } = props;
+    const { axisAssignments = new Map(), panEnabled = false, zoomEnabled = false, zoomKeyModifiersRequired = true, showMinMaxBars = true, showWindowedMinMaxBars = true, showValueLines = true, showMeanValueLines = true, showWindowedMeanValueLines = true, barMargin = 2, barSeriesStyle = defaultBarSeriesStyle(), highlightAxesOnMouseOver = false, zoomState = undefined, onZoomStateChange = noop, onZoomReset = noop, } = props;
     // why do "dataRef" and "seriesRef" both hold on to the same underlying data? for performance.
     //
     // the "dataRef" and "seriesRef" both point to the same underlying data, a collection
-    // of series. The series in "dataRef" are bound to the DOM elements through d3. The "seriesRef" series
-    // are the ones that are updated as new data is streamed in.
+    // of series (held, and updated as new data is streamed in, by the data source). The series in
+    // "dataRef" are read by the canvas draw function, and the "seriesRef" map is for looking a
+    // series up by its name.
     //
     // the "dataRef" object holds on to a copy of the initial data (which is an array of
     // time-series, e.i. an array of BaseSeries<OrdinalDatum> objects). The slice just creates a copy of
     // the array, but the references to the BaseSeries objects are the same and still point to the same
     // data as the "initialData" array.
     //
-    // the "seriesRef" object is a reference to a map (series_name -> BaseSeries<OrdinalDatum>) which is
-    // used to update the data in the series. When new data enters, it is appended to one or more series.
+    // the "seriesRef" object is a reference to a map (series_name -> BaseSeries<OrdinalDatum>), used
+    // to find the series under the mouse (for the tooltip).
     //
-    // the series in the "dataRef" object are the ones bound to the DOM elements in d3, and so as these
-    // are updated, d3 will update the DOM elements (the elements in this plot).
+    // the series in the "dataRef" object are the ones read by the next redraw, so as these are
+    // updated, the next canvas repaint picks up the new data.
     const dataRef = useRef(initialData.slice());
     const seriesRef = useRef(new Map(initialData.map(series => [series.name, series])));
-    const statsRef = useRef(initialOrdinalStats(dataRef.current));
+    // the lifetime and windowed stats for each series -- kept by the data source (when it's an
+    // ordinal data source), so they keep accumulating while this plot is unmounted
+    const statsRef = useRef(statsFrom(dataSource, initialData));
     // map(axis_id -> current_time) -- maps the axis ID to the current time for that axis
     const currentTimeRef = useRef(0);
-    const subscriptionRef = useRef(undefined);
-    const isSubscriptionClosed = () => subscriptionRef.current === undefined || subscriptionRef.current.closed;
-    const allowTooltipRef = useRef(isSubscriptionClosed());
-    useEffect(() => {
-        currentTimeRef.current = 0;
-    }, [xAxesState]);
-    // set the axis assignments needed if a tooltip is being used
-    useEffect(() => {
-        setAxisAssignments(axisAssignments);
-    }, [axisAssignments, setAxisAssignments]);
-    // calculates the distinct series IDs that cover all the series in the plot
-    const axesForSeries = useMemo(() => axesForSeriesGen(initialData, axisAssignments, xAxesState), [initialData, axisAssignments, xAxesState]);
-    // updates the timing using the onUpdateTime and updatePlot references. This and the references
-    // defined above allow the axes' times to be updated properly by avoid stale reference to these
-    // functions.
-    const updateTimingAndPlot = useCallback((ranges) => {
-        if (mainG !== null) {
-            updatePlotRef.current(ranges, mainG);
-            onUpdateChartTime(currentTimeRef.current);
-            updatePlotRef.current(ranges, mainG);
-        }
-    }, [mainG, onUpdateChartTime]);
-    // todo find better way
-    // when the initial data changes, then reset the plot. note that the initial data doesn't change
-    // during the normal course of updates from the observable, only when the plot is restarted.
-    useEffect(() => {
-        dataRef.current = initialData.slice();
-        seriesRef.current = new Map(initialData.map(series => [series.name, series]));
-        currentTimeRef.current = 0;
-        statsRef.current = initialOrdinalStats(dataRef.current);
-    }, 
-    // ** not happy about this **
-    // only want this effect to run when the initial data is changed, which mean all the
-    // other dependencies are recalculated anyway.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [initialData]);
-    /**
-     * Adjusts the time-range and updates the plot when the plot is dragged to the left or right
-     * @param deltaX The amount that the plot is dragged
-     * @param plotDimensions The dimensions of the plot
-     * @param series An array of series names
-     * @param ranges A map holding the axis ID and its associated time range
-     */
-    const onPan = useCallback((x, plotDimensions, series, ranges) => ordinalPanHandler(axesForSeries, margin, setAxisIntervalFor, xAxesState)(x, plotDimensions, series, ranges), [axesForSeries, margin, setAxisIntervalFor, xAxesState]);
-    /**
-     * Called when the user uses the scroll wheel (or scroll gesture) to zoom in or out. Zooms in/out
-     * at the location of the mouse when the scroll wheel or gesture was applied.
-     * @param transform The d3 zoom transformation information
-     * @param x The x-position of the mouse when the scroll wheel or gesture is used
-     * @param plotDimensions The dimensions of the plot
-     * @param series An array of series names
-     * @param ranges A map holding the axis ID and its associated time-range
-     */
-    const onZoom = useCallback((transform, x, plotDimensions, ranges) => ordinalAxisZoomHandler(axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState)(transform, x, plotDimensions, ranges), [axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState]);
+    // tooltips are only shown while the data source is paused (and not while panning)
+    const allowTooltipRef = useRef(!((_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.running) !== null && _a !== void 0 ? _a : false));
+    // the last-drawn geometry for each `${seriesName}::${elementType}`, in canvas coordinates,
+    // used for hit-testing mouse hover on `mousemove` (see the effect below that wires up the
+    // listener)
+    const geometryRef = useRef(new Map());
+    // which specific element (series + type) the mouse was over on the previous `mousemove`, so
+    // we know when to fire a "leave" before firing an "over" for a different element -- unlike
+    // Scatter/Raster, BarPlot doesn't use the shared `hoveredSeriesName` chart state, since here
+    // hover is scoped to one of five element *types* per series, not the series as a whole
+    const lastHoveredRef = useRef(undefined);
     /**
-     * @param ordinalRanges
-     * @param mainGElem
+     * (Re-)registers this plot's draw function with the canvas context and requests a redraw.
+     * Replaces the old version, which directly mutated SVG `<rect>`/`<line>` elements bound via
+     * d3's enter/update/exit join. Canvas has no persistent elements to join against, so the draw
+     * function just redraws every element from current data/scale state each time it's invoked.
+     *
+     * Pan/zoom behavior setup lives in a separate effect (see below), not here -- this function
+     * runs on every data tick (each `windowingTime` interval), and recreating/reattaching a
+     * `d3.drag()`/`d3.zoom()` behavior that often is pure overhead unrelated to drawing the new
+     * data.
+     * @param cc The canvas context to register the draw function with
      */
-    const updatePlot = useCallback((ordinalRanges, mainGElem) => {
-        if (container) {
-            // select the svg element bind the data to them
-            const svg = d3.select(container);
-            // set up panning
-            if (panEnabled) {
-                const drag = d3.drag()
-                    .on("start", () => {
-                    d3.select(container).style("cursor", "move");
-                    allowTooltipRef.current = false;
-                })
-                    .on("drag", (event) => {
-                    const names = dataRef.current.map(series => series.name);
-                    onPan(event.dx, plotDimensions, names, ordinalRanges);
-                    // need to update the plot with the new time-ranges
-                    updatePlotRef.current(ordinalRanges, mainGElem);
-                })
-                    .on("end", () => {
-                    d3.select(container).style("cursor", "auto");
-                    allowTooltipRef.current = isSubscriptionClosed();
-                });
-                svg.call(drag);
-            }
-            // set up for zooming
-            if (zoomEnabled) {
-                const zoom = d3.zoom()
-                    .filter((event) => !zoomKeyModifiersRequired || event.shiftKey || event.ctrlKey)
-                    .scaleExtent([1, 10])
-                    .translateExtent([[margin.left, margin.top], [plotDimensions.width, plotDimensions.height]])
-                    .on("zoom", (event) => {
-                    onZoom(event.transform, event.sourceEvent.offsetX - margin.left, plotDimensions, ordinalRanges);
-                    updatePlotRef.current(ordinalRanges, mainGElem);
-                });
-                svg.call(zoom);
-            }
+    const updatePlot = useCallback((cc) => {
+        const draw = (context) => {
+            const { context2D } = context;
+            context2D.save();
+            clipToArea(context, plotDimensions, { x: margin.left, y: margin.top });
+            context2D.translate(margin.left, margin.top);
+            const newGeometry = new Map();
+            const hovered = lastHoveredRef.current;
             // enter, update, delete the bar data
             dataRef.current.forEach(series => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f;
                 const [xAxis, yAxis] = axesFor(series.name, axisAssignments, axisId => xAxesState.axisFor(axisId).getOrUndefined(), axisId => yAxesState.axisFor(axisId).getOrUndefined());
+                if (xAxis === undefined || yAxis === undefined)
+                    return;
                 // grab the series styles, or the defaults if none exist
-                const { margin: categoryMargin = barMargin, valueLine: valueLineStyle, meanValueLine: meanValueLineStyle, windowedMeanValueLine: windowedMeanLineStyle, minMaxBar: minMaxBarStyle, windowedMinMaxBar: windowedBarStyle } = seriesStyles.get(series.name) || Object.assign(Object.assign({}, barSeriesStyle), { highlightColor: barSeriesStyle.color });
+                const { margin: categoryMargin = barMargin, valueLine: valueLineStyle, meanValueLine: meanValueLineStyle, windowedMeanValueLine: windowedMeanLineStyle, minMaxBar: minMaxBarStyle, windowedMinMaxBar: windowedBarStyle } = seriesStyles.get(series.name) || {
+                    ...barSeriesStyle,
+                    highlightColor: barSeriesStyle.color
+                };
                 // only show the data for which the regex filter matches
-                const plotData = series.name.match(seriesFilter) ? [series.data[series.data.length - 1]] : [];
+                const plotData = series.name.match(seriesFilter) && series.data.length > 0 ?
+                    [series.data[series.data.length - 1]] :
+                    [];
+                if (plotData.length === 0)
+                    return;
                 // grab the functions for determining the lower and upper bounds of the category
                 const { lower, upper } = xAxisCategoryBoundsFn(xAxis.scale.bandwidth(), valueLineStyle.regular.width, categoryMargin);
                 // grab the value (index) associated with the series name (this is a category axis)
@@ -198,141 +156,330 @@ export function BarPlot(props) {
                 //
                 // min/max bar rectangle
                 const totalBar = barDimensions(minMaxBarStyle.widthFraction, lower(x), upper(x), ((_a = statsRef.current.valueStatsForSeries.get(series.name)) === null || _a === void 0 ? void 0 : _a.min.value) || 0, ((_b = statsRef.current.valueStatsForSeries.get(series.name)) === null || _b === void 0 ? void 0 : _b.max.value) || 0, yAxis);
-                svg
-                    .select(`#${series.name}-${chartId}-bar`)
-                    .selectAll(classIdFor(BAR_CHART_CLASS_IDS.minMax))
-                    .data(plotData)
-                    .join(enter => barFor(enter.append('rect').attr('class', BAR_CHART_CLASS_IDS.minMax), totalBar, barStyleFor(showMinMaxBars, minMaxBarStyle)), update => barFor(update, totalBar, barStyleFor(showMinMaxBars, minMaxBarStyle)), exit => exit.remove())
-                    .on("mouseover", (event) => handleMouseOverBar(container, yAxis, series, statsRef.current, event, margin, seriesStyles, barSeriesStyle, allowTooltipRef.current && showMinMaxBars, mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax), BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax))
-                    .on("mouseleave", event => handleMouseLeaveSeries(series.name, event.currentTarget, seriesStyles, barSeriesStyle, mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax), BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax));
+                drawBar(context2D, totalBar, barStyleFor(showMinMaxBars, minMaxBarStyle));
+                newGeometry.set(`${series.name}::minMax`, {
+                    points: [],
+                    rects: [{
+                            x: totalBar.upperX + margin.left,
+                            y: totalBar.upperY + margin.top,
+                            width: totalBar.width,
+                            height: totalBar.height
+                        }],
+                    hitRadius: 0
+                });
                 //
-                // windowed-mean line when the windowed stats are defined for the series
+                // windowed-mean line and windowed min/max bar, when the windowed stats are defined for the series
                 const seriesWindowedStats = statsRef.current.windowedValueStatsForSeries.get(series.name);
                 if (seriesWindowedStats !== undefined) {
                     const windowedBar = barDimensions(windowedBarStyle.widthFraction, lower(x), upper(x), seriesWindowedStats.min.value, seriesWindowedStats.max.value, yAxis);
-                    svg
-                        .select(`#${series.name}-${chartId}-bar`)
-                        .selectAll(classIdFor(BAR_CHART_CLASS_IDS.windowedMinMax))
-                        .data(plotData)
-                        .join(enter => barFor(enter.append('rect').attr('class', BAR_CHART_CLASS_IDS.windowedMinMax), windowedBar, barStyleFor(showWindowedMinMaxBars, windowedBarStyle)), update => barFor(update, windowedBar, barStyleFor(showWindowedMinMaxBars, windowedBarStyle)), exit => exit.remove())
-                        .on("mouseover", (event) => handleMouseOverBar(container, yAxis, series, statsRef.current, event, margin, seriesStyles, barSeriesStyle, allowTooltipRef.current && showWindowedMinMaxBars, mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax), BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax))
-                        .on("mouseleave", event => handleMouseLeaveSeries(series.name, event.currentTarget, seriesStyles, barSeriesStyle, mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax), BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax));
+                    drawBar(context2D, windowedBar, barStyleFor(showWindowedMinMaxBars, windowedBarStyle));
+                    newGeometry.set(`${series.name}::windowedMinMax`, {
+                        points: [],
+                        rects: [{
+                                x: windowedBar.upperX + margin.left,
+                                y: windowedBar.upperY + margin.top,
+                                width: windowedBar.width,
+                                height: windowedBar.height
+                            }],
+                        hitRadius: 0
+                    });
                     //
                     // mean line
-                    const meanLineY = yAxis.scale(((_c = statsRef.current.valueStatsForSeries.get(series.name)) === null || _c === void 0 ? void 0 : _c.mean) || 0);
-                    svg
-                        .select(`#${series.name}-${chartId}-bar`)
-                        .selectAll(classIdFor(BAR_CHART_CLASS_IDS.meanValue))
-                        .data(showMeanValueLines ? plotData : [])
-                        .join(enter => lineFor(enter.append('line').attr('class', BAR_CHART_CLASS_IDS.meanValue), {
-                        x1: () => lower(x), y1: () => meanLineY,
-                        x2: () => upper(x), y2: () => meanLineY
-                    }, meanValueLineStyle.regular), update => lineFor(update, {
-                        x1: () => lower(x), y1: () => meanLineY,
-                        x2: () => upper(x), y2: () => meanLineY
-                    }, meanValueLineStyle.regular), exit => exit.remove())
-                        .on("mouseover", (event) => handleMouseOverBar(container, yAxis, series, statsRef.current, event, margin, seriesStyles, barSeriesStyle, allowTooltipRef.current && showMeanValueLines, mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue))
-                        .on("mouseleave", event => handleMouseLeaveSeries(series.name, event.currentTarget, seriesStyles, barSeriesStyle, mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue));
-                    const windowedMeanLineY = yAxis.scale(isNaN(seriesWindowedStats.mean) ? 0 : seriesWindowedStats.mean);
-                    svg
-                        .select(`#${series.name}-${chartId}-bar`)
-                        .selectAll(classIdFor(BAR_CHART_CLASS_IDS.windowedMeanValue))
-                        .data(showWindowedMeanValueLines ? plotData : [])
-                        .join(enter => lineFor(enter.append('line').attr('class', BAR_CHART_CLASS_IDS.windowedMeanValue), {
-                        x1: () => lower(x), y1: () => windowedMeanLineY,
-                        x2: () => upper(x), y2: () => windowedMeanLineY
-                    }, windowedMeanLineStyle.regular), update => lineFor(update, {
-                        x1: () => lower(x), y1: () => windowedMeanLineY,
-                        x2: () => upper(x), y2: () => windowedMeanLineY
-                    }, windowedMeanLineStyle.regular), exit => exit.remove())
-                        .on("mouseover", (event) => handleMouseOverBar(container, yAxis, series, statsRef.current, event, margin, seriesStyles, barSeriesStyle, allowTooltipRef.current && showWindowedMeanValueLines, mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue))
-                        .on("mouseleave", event => handleMouseLeaveSeries(series.name, event.currentTarget, seriesStyles, barSeriesStyle, mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue));
+                    if (showMeanValueLines) {
+                        const meanLineY = yAxis.scale(((_c = statsRef.current.valueStatsForSeries.get(series.name)) === null || _c === void 0 ? void 0 : _c.mean) || 0);
+                        drawLine(context2D, lower(x), meanLineY, upper(x), meanLineY, meanValueLineStyle.regular);
+                        newGeometry.set(`${series.name}::meanValue`, {
+                            points: [],
+                            segments: [[
+                                    [lower(x) + margin.left, meanLineY + margin.top],
+                                    [upper(x) + margin.left, meanLineY + margin.top]
+                                ]],
+                            hitRadius: Math.max(4, (_d = meanValueLineStyle.regular.width) !== null && _d !== void 0 ? _d : 1)
+                        });
+                    }
+                    //
+                    // windowed-mean line
+                    if (showWindowedMeanValueLines) {
+                        const windowedMeanLineY = yAxis.scale(isNaN(seriesWindowedStats.mean) ? 0 : seriesWindowedStats.mean);
+                        const isHovered = (hovered === null || hovered === void 0 ? void 0 : hovered.seriesName) === series.name && hovered.elementType === 'windowedMeanValue';
+                        const style = isHovered ? windowedMeanLineStyle.highlight : windowedMeanLineStyle.regular;
+                        drawLine(context2D, lower(x), windowedMeanLineY, upper(x), windowedMeanLineY, style);
+                        newGeometry.set(`${series.name}::windowedMeanValue`, {
+                            points: [],
+                            segments: [[
+                                    [lower(x) + margin.left, windowedMeanLineY + margin.top],
+                                    [upper(x) + margin.left, windowedMeanLineY + margin.top]
+                                ]],
+                            hitRadius: Math.max(4, (_e = style.width) !== null && _e !== void 0 ? _e : 1)
+                        });
+                    }
                 }
                 //
-                // value lines
-                svg
-                    .select(`#${series.name}-${chartId}-bar`)
-                    .selectAll(classIdFor(BAR_CHART_CLASS_IDS.currentValue))
-                    .data(showValueLines ? plotData : [])
-                    .join(enter => lineFor(enter.append('line').attr('class', BAR_CHART_CLASS_IDS.currentValue), {
-                    x1: () => lower(x), y1: datum => yAxis.scale(datum.value),
-                    x2: () => upper(x), y2: datum => yAxis.scale(datum.value)
-                }, valueLineStyle.regular), update => lineFor(update, {
-                    x1: () => lower(x), y1: datum => yAxis.scale(datum.value),
-                    x2: () => upper(x), y2: datum => yAxis.scale(datum.value)
-                }, valueLineStyle.regular), exit => exit.remove())
-                    .on("mouseover", (event) => handleMouseOverBar(container, yAxis, series, statsRef.current, event, margin, seriesStyles, barSeriesStyle, allowTooltipRef.current && showValueLines, mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue))
-                    .on("mouseleave", event => handleMouseLeaveSeries(series.name, event.currentTarget, seriesStyles, barSeriesStyle, mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue), BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue));
+                // value line
+                if (showValueLines) {
+                    const datum = plotData[0];
+                    const valueLineY = yAxis.scale(datum.value);
+                    const isHovered = (hovered === null || hovered === void 0 ? void 0 : hovered.seriesName) === series.name && hovered.elementType === 'currentValue';
+                    const style = isHovered ? valueLineStyle.highlight : valueLineStyle.regular;
+                    drawLine(context2D, lower(x), valueLineY, upper(x), valueLineY, style);
+                    newGeometry.set(`${series.name}::currentValue`, {
+                        points: [],
+                        segments: [[
+                                [lower(x) + margin.left, valueLineY + margin.top],
+                                [upper(x) + margin.left, valueLineY + margin.top]
+                            ]],
+                        hitRadius: Math.max(4, (_f = style.width) !== null && _f !== void 0 ? _f : 1)
+                    });
+                }
             });
-        }
+            geometryRef.current = newGeometry;
+            context2D.restore();
+        };
+        /**
+         * Grows the auto-scaling y-axes (see `ContinuousAxis`'s `autoScale` prop) to fit what's
+         * shown of the series whose categories are on screen (within the x-axis' current,
+         * possibly zoomed, window): the min/max bars, the windowed min/max bars, the mean and
+         * windowed-mean lines, and the value lines -- each only when it's shown. Registered to
+         * run before the axes draw (they're at z-index 0), so the axes and the bars are drawn
+         * with the grown domain in the same frame.
+         */
+        const autoScaleYAxes = () => {
+            const extents = new Map();
+            dataRef.current.forEach(series => {
+                if (!series.name.match(seriesFilter) || series.data.length === 0)
+                    return;
+                const [xAxis, yAxis] = axesFor(series.name, axisAssignments, axisId => xAxesState.axisFor(axisId).getOrUndefined(), axisId => yAxesState.axisFor(axisId).getOrUndefined());
+                if (xAxis === undefined || (yAxis === null || yAxis === void 0 ? void 0 : yAxis.autoScale) === undefined)
+                    return;
+                // only the categories (at least partly) on screen
+                const x = xAxis.scale(series.name);
+                if (x === undefined || x + xAxis.scale.bandwidth() <= 0 || x >= plotDimensions.width)
+                    return;
+                // what's shown of the series (mirrors the draw function above)
+                const values = [];
+                const stats = statsRef.current.valueStatsForSeries.get(series.name);
+                if (showMinMaxBars && stats !== undefined)
+                    values.push(stats.min.value, stats.max.value);
+                const windowedStats = statsRef.current.windowedValueStatsForSeries.get(series.name);
+                if (windowedStats !== undefined) {
+                    if (showWindowedMinMaxBars)
+                        values.push(windowedStats.min.value, windowedStats.max.value);
+                    if (showMeanValueLines && stats !== undefined)
+                        values.push(stats.mean);
+                    if (showWindowedMeanValueLines)
+                        values.push(windowedStats.mean);
+                }
+                if (showValueLines)
+                    values.push(series.data[series.data.length - 1].value);
+                const seriesExtent = extentOf(values, yAxis.scale);
+                if (seriesExtent === undefined)
+                    return;
+                const extent = extents.get(yAxis.axisId);
+                extents.set(yAxis.axisId, extent === undefined ? seriesExtent : extentWith(extentWith(extent, seriesExtent[0]), seriesExtent[1]));
+            });
+            // (the y-axes are continuous axes, even though this plot's axes context is typed
+            // for its ordinal x-axes)
+            growAutoScaledYAxes(extents, {
+                yAxes: yAxesState.axes,
+                axisRangeFor,
+                updateAxisRanges: updateAxisRanges,
+            });
+        };
+        cc.register(`bar-plot-autoscale-${chartId}`, autoScaleYAxes, -10);
+        cc.register(`bar-plot-${chartId}`, draw, 10);
+        cc.requestRedraw();
     }, [
-        container,
-        panEnabled, zoomEnabled,
-        onPan, onZoom,
-        plotDimensions, margin, zoomKeyModifiersRequired,
-        axisAssignments, xAxesState, yAxesState,
-        barMargin, seriesStyles, barSeriesStyle,
-        seriesFilter,
-        chartId,
-        showValueLines,
-        showMinMaxBars,
-        mouseOverHandlerFor, mouseLeaveHandlerFor,
-        showMeanValueLines,
-        showWindowedMeanValueLines,
-        showWindowedMinMaxBars
+        chartId, plotDimensions, axisAssignments, xAxesState, yAxesState, barMargin, seriesStyles,
+        barSeriesStyle, seriesFilter, showValueLines, showMinMaxBars, showMeanValueLines,
+        showWindowedMeanValueLines, showWindowedMinMaxBars, axisRangeFor, updateAxisRanges,
+        margin.left, margin.top
     ]);
+    // new data, new scale: restarts the auto-scaling y-axes when the data source is replaced
+    useAutoScaleRestart(dataSource, {
+        yAxes: yAxesState.axes,
+        axisRangeFor,
+        updateAxisRanges: updateAxisRanges,
+    });
     // need to keep the function references for use by the subscription, which forms a closure
     // on them. without the references, the closures become stale, and resizing during streaming
     // doesn't work properly
-    const updatePlotRef = useRef(noop);
+    const updatePlotRef = useRef(updatePlot);
     useEffect(() => {
-        if (mainG != null && container != null) {
-            // when the update plot function doesn't yet exist, then create the container holding the plot
-            const clipPathId = setClipPathG(chartId, mainG, plotDimensions);
-            if (updatePlotRef.current === noop) {
-                mainG
-                    .selectAll('g')
-                    .attr("clip-path", `url(#${clipPathId})`)
-                    .data(dataRef.current)
-                    .enter()
-                    .append('g')
-                    .attr('class', 'spikes-series')
-                    .attr('id', series => `${series.name}-${chartId}-bar`)
-                    .attr('transform', `translate(${margin.left}, ${margin.top})`);
-            }
-            else {
-                mainG
-                    .selectAll('g')
-                    .attr("clip-path", `url(#${clipPathId})`);
-            }
-            updatePlotRef.current = updatePlot;
+        updatePlotRef.current = updatePlot;
+    }, [updatePlot]);
+    useEffect(() => {
+        currentTimeRef.current = 0;
+    }, [xAxesState]);
+    // set the axis assignments needed if a tooltip is being used
+    useEffect(() => {
+        setAxisAssignments(axisAssignments);
+    }, [axisAssignments, setAxisAssignments]);
+    // calculates the distinct series IDs that cover all the series in the plot
+    const axesForSeries = useMemo(() => axesForSeriesGen(initialData, axisAssignments, xAxesState), [initialData, axisAssignments, xAxesState]);
+    // redraws the plot for newly arrived data and reports the chart time, using the updatePlot
+    // reference (to avoid a stale updatePlot). Deliberately leaves the axes' ranges
+    // (`ordinalRangesRef`) alone: the ordinal axes don't scroll as data arrives, so only this plot's
+    // own zoom, pan, and resize handling changes them -- replacing them here (as a previous version
+    // did, with the y-axes' ranges) left the x-axis zoom/pan handlers with nothing to act on until
+    // something else happened to rebuild the map.
+    const updateTimingAndPlot = useCallback(() => {
+        if (canvasContext !== null) {
+            // (one redraw request is enough: `onUpdateChartTime` only reports the time to the
+            // application, and redraw requests are coalesced into one animation frame anyway)
+            updatePlotRef.current(canvasContext);
+            onUpdateChartTime(currentTimeRef.current);
         }
-    }, [chartId, container, mainG, margin, plotDimensions, updatePlot]);
-    // memoized function for subscribing to the chart-data observable
-    const subscribe = useCallback(() => {
-        if (seriesObservable === undefined || mainG === null)
-            return undefined;
-        return subscriptionOrdinalXFor(seriesObservable, onSubscribe, windowingTime, axisAssignments, yAxesState, onUpdateData, dropDataAfter, updateTimingAndPlot, 
-        // as new data flows into the subscription, the subscription
-        // updates this map directly (for performance)
-        seriesRef.current, statsRef, (currentTime) => currentTimeRef.current = currentTime, AxisInterval.from(0, plotDimensions.width));
-    }, [
-        axisAssignments, dropDataAfter, mainG,
-        onSubscribe, onUpdateData,
-        seriesObservable, updateTimingAndPlot, windowingTime, yAxesState,
-        plotDimensions.width
-    ]);
+    }, [canvasContext, onUpdateChartTime]);
+    // when the initial data changes, then reset the plot. note that the initial data doesn't change
+    // during the normal course of updates from the data source, only when the data source is replaced.
     useEffect(() => {
-        if (container && mainG) {
+        dataRef.current = initialData.slice();
+        seriesRef.current = new Map(initialData.map(series => [series.name, series]));
+        currentTimeRef.current = 0;
+        statsRef.current = statsFrom(dataSource, dataRef.current);
+    }, [initialData, dataSource]);
+    /**
+     * Adjusts the ordinal x-axes' ranges when the plot is dragged to the left or right (the caller
+     * redraws the plot)
+     * @param x The amount that the plot is dragged
+     * @param plotDimensions The dimensions of the plot
+     * @param series An array of series names
+     * @param ranges A map holding the axis ID and its associated range
+     */
+    const onPan = useCallback((x, plotDimensions, series, ranges) => ordinalPanHandler(axesForSeries, margin, setAxisIntervalFor, xAxesState)(x, plotDimensions, series, ranges), [axesForSeries, margin, setAxisIntervalFor, xAxesState]);
+    /**
+     * Called when the user uses the scroll wheel (or scroll gesture) to zoom in or out. Zooms in/out
+     * at the location of the mouse when the scroll wheel or gesture was applied.
+     * @param zoomFactor The *cumulative* zoom scale factor for this event -- d3-zoom's own
+     * `event.transform.k`, passed through unmodified. See {@link OrdinalAxisRange.scaledCumulative}
+     * for why the ordinal x-axis needs this cumulative factor (from which it derives the
+     * incremental step itself, and which it snaps back to `.original` at exactly 1).
+     * @param x The x-position of the mouse when the scroll wheel or gesture is used
+     * @param plotDimensions The dimensions of the plot
+     * @param ranges A map holding the axis ID and its associated range
+     */
+    const onZoom = useCallback((zoomFactor, x, plotDimensions, ranges) => ordinalAxisZoomHandler(axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState)(zoomFactor, x, plotDimensions, ranges), [axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState]);
+    // holds the current per-axis ordinal ranges, kept in sync by the effect below. Replaces
+    // threading `ordinalRanges` through as an explicit `updatePlot` parameter, so the pan/zoom
+    // handlers (now set up once, in a separate effect below, rather than inside `updatePlot`
+    // itself) can always read the current ranges without needing `updatePlot` to be recreated
+    // every time the ranges change.
+    const ordinalRangesRef = useRef(new Map());
+    // hands the current zoom/pan state (the ordinal x-axes' ranges, as fractions of their
+    // original extent, and d3-zoom's cumulative `k`) to the `onZoomStateChange` callback
+    const reportZoomState = useCallback((cc) => {
+        const ranges = {};
+        ordinalRangesRef.current.forEach((range, axisId) => {
+            const extent = range.original.measure();
+            if (xAxesState.axes.has(axisId) && extent > 0) {
+                ranges[axisId] = [
+                    (range.current.start - range.original.start) / extent,
+                    (range.current.end - range.original.start) / extent
+                ];
+            }
+        });
+        onZoomStateChange({ k: d3.zoomTransform(cc.canvas).k, ranges });
+    }, [onZoomStateChange, xAxesState.axes]);
+    // panning (dragging) and zooming (the mouse wheel) -- see `useCanvasZoomPan`. The ordinal zoom
+    // takes d3-zoom's cumulative scale (`k`), rather than the incremental factor, so that it can
+    // snap back to the original range exactly when fully zoomed out (see `OrdinalAxisRange.scale`)
+    const { setZoomScale } = useCanvasZoomPan(canvasContext, {
+        panEnabled,
+        zoomEnabled,
+        keyModifiersRequired: zoomKeyModifiersRequired,
+        scaleExtent: [1, 10],
+        // (an ordinal axis zooms in as d3-zoom's scale goes up, the opposite way to the other
+        // plots' continuous axes, so the wheel is inverted to zoom the same way as they do)
+        invertWheel: true,
+        translateExtent: [[margin.left, margin.top], [plotDimensions.width, plotDimensions.height]],
+        // (tooltips are suppressed while panning, so that one isn't left behind)
+        onPanStart: () => {
+            allowTooltipRef.current = false;
+        },
+        onPan: dx => {
+            if (canvasContext === null)
+                return;
+            onPan(dx, plotDimensions, dataRef.current.map(series => series.name), ordinalRangesRef.current);
+            updatePlotRef.current(canvasContext);
+        },
+        onPanEnd: () => {
+            var _a;
+            allowTooltipRef.current = !((_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.running) !== null && _a !== void 0 ? _a : false);
+            if (canvasContext !== null)
+                reportZoomState(canvasContext);
+        },
+        onZoom: ({ k, x }) => {
+            if (canvasContext === null)
+                return;
+            onZoom(k, x - margin.left, plotDimensions, ordinalRangesRef.current);
+            updatePlotRef.current(canvasContext);
+            reportZoomState(canvasContext);
+        },
+        onZoomReset,
+        // restores each axis's range to its original
+        resetView: () => {
+            ordinalRangesRef.current.forEach((range, axisId) => {
+                xAxesState.axisFor(axisId).ifPresent(axis => {
+                    ordinalRangesRef.current.set(axisId, range.update(range.original.start, range.original.end));
+                    setAxisIntervalFor(axisId, range.original);
+                    axis.update(axis.scale.domain(), range.original, range.original, plotDimensions, margin);
+                });
+            });
+            if (canvasContext !== null)
+                updatePlotRef.current(canvasContext);
+        },
+    });
+    // the zoom state to restore, captured once at mount (see the `zoomState` prop); cleared once
+    // it has been applied (see `restoreZoomState` below), so it's only ever applied once
+    const pendingZoomStateRef = useRef(zoomState);
+    // applies the pending zoom state (if any) to the ordinal x-axes' ranges and to d3-zoom's
+    // transform on the canvas -- a remounted plot has a brand-new canvas, whose d3-zoom transform
+    // starts at identity (k = 1). Both must be restored together: the ordinal zoom math derives
+    // its incremental step from d3's cumulative `k` relative to the range's current/original width
+    // ratio, and treats `k === 1` as "snap back to fully zoomed out" (see
+    // `OrdinalAxisRange.scaledCumulative`), so restoring the ranges without `k` would make the
+    // very next wheel tick jump. Waits (leaving the state pending) until every axis in the
+    // snapshot exists, since the axes register themselves with the chart asynchronously.
+    const restoreZoomState = useCallback(() => {
+        const pending = pendingZoomStateRef.current;
+        if (pending === undefined)
+            return;
+        const axisIds = Object.keys(pending.ranges);
+        const ready = axisIds.every(axisId => ordinalRangesRef.current.has(axisId) && xAxesState.axisFor(axisId).getOrUndefined() !== undefined);
+        if (!ready || plotDimensions.width <= 0)
+            return;
+        axisIds.forEach(axisId => {
+            const range = ordinalRangesRef.current.get(axisId);
+            const axis = xAxesState.axisFor(axisId).getOrUndefined();
+            if (range === undefined || axis === undefined)
+                return;
+            const [startFraction, endFraction] = pending.ranges[axisId];
+            const { start: originalStart } = range.original;
+            const extent = range.original.measure();
+            const current = AxisInterval.from(originalStart + startFraction * extent, originalStart + endFraction * extent);
+            ordinalRangesRef.current.set(axisId, range.update(current.start, current.end));
+            setAxisIntervalFor(axisId, current);
+            axis.update(axis.scale.domain(), current, range.original, plotDimensions, margin);
+        });
+        // (set directly, without dispatching a "zoom" event -- see `setZoomScale`)
+        setZoomScale(pending.k);
+        pendingZoomStateRef.current = undefined;
+    }, [margin, plotDimensions, setAxisIntervalFor, xAxesState, setZoomScale]);
+    useEffect(() => {
+        if (canvasContext) {
             const ordinalAxesRanges = axesRanges();
             // so this gets a bit complicated. the ordinal-ranges need to be updated whenever the ordinal-ranges
             // change. for example, when the window is resized, and then we need to update the
             // ordinal-range. however, we want to keep the ordinal-ranges to reflect their original scale so that
             // we can zoom properly (so the updates can't fuck with the scale).
             if (ordinalAxesRanges.size === 0) {
-                // when no time-ranges have yet been created, then create them and hold on to a mutable
-                // reference to them
-                updatePlot(ordinalAxisRanges(xAxesState.axes, AxisInterval.from(0, plotDimensions.width)), mainG);
+                // when no time-ranges have yet been created, then create them and populate the
+                // existing ref's map in place (rather than replacing it -- reassigning `.current`
+                // once it's already in play elsewhere, e.g. the zoom/pan handlers, isn't allowed
+                // by react-hooks/immutability)
+                ordinalRangesRef.current.clear();
+                ordinalAxisRanges(xAxesState.axes)
+                    .forEach((range, id) => ordinalRangesRef.current.set(id, range));
             }
             else {
                 // when the ordinal-ranges already exist, then we want to update the ordinal-ranges for each
@@ -350,64 +497,194 @@ export function BarPlot(props) {
                         rangesMap.set(id, range.update(start, end));
                     });
                 });
-                updatePlot(ordinalAxesRanges, mainG);
+                ordinalRangesRef.current.clear();
+                ordinalAxesRanges.forEach((range, id) => ordinalRangesRef.current.set(id, range));
             }
+            // restore a zoom state handed in from a previous instance (only does anything the
+            // first time the axes are all available -- see `restoreZoomState`)
+            restoreZoomState();
+            updatePlot(canvasContext);
         }
-    }, [axesRanges, container, mainG, plotDimensions.width, updatePlot, xAxesState.axes]);
-    // subscribe/unsubscribe to the observable chart data. when the `shouldSubscribe`
-    // is changed to `true` and we haven't subscribed yet, then subscribe. when the
-    // `shouldSubscribe` is `false` and we had subscribed, then unsubscribe. otherwise,
-    // do nothing.
+    }, [axesRanges, canvasContext, plotDimensions.width, updatePlot, xAxesState.axes, restoreZoomState]);
+    // wires up a single mousemove/mouseleave listener on the shared canvas to replace the old
+    // per-element SVG mouseover/mouseleave handlers. Hit-tests the mouse position against the
+    // last-drawn geometry (see `geometryRef`, populated by the draw function above), keyed per
+    // `${seriesName}::${elementType}` so the five overlaid elements resolve independently.
     useEffect(() => {
-        var _a;
-        if (shouldSubscribe && subscriptionRef.current === undefined) {
-            subscriptionRef.current = subscribe();
-            allowTooltipRef.current = false;
-        }
-        else if (!shouldSubscribe && subscriptionRef.current !== undefined) {
-            (_a = subscriptionRef.current) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            subscriptionRef.current = undefined;
+        if (!canvasContext)
+            return;
+        const canvas = canvasContext.canvas;
+        // highlights (or un-highlights) the x- and y-axes a series is plotted against --
+        // keyed on the series name alone (not the specific hovered element type), so moving
+        // the mouse between a series' own bar/lines doesn't flicker the highlight off and on.
+        // Unlike Scatter/Outlier, bar series styles don't carry a single flat highlight
+        // color/width (they're nested per element type), so this uses the axis' own default
+        // highlight styling rather than trying to match a specific element's highlight style.
+        const highlightAxesFor = (seriesName, isHighlighted) => {
+            if (!highlightAxesOnMouseOver)
+                return;
+            const [xAxis, yAxis] = axesFor(seriesName, axisAssignments, axisId => xAxesState.axisFor(axisId).getOrUndefined(), axisId => yAxesState.axisFor(axisId).getOrUndefined());
+            xAxis === null || xAxis === void 0 ? void 0 : xAxis.setHighlighted(isHighlighted);
+            yAxis === null || yAxis === void 0 ? void 0 : yAxis.setHighlighted(isHighlighted);
+        };
+        const handleMove = (event) => {
+            const [x, y] = canvasLocalPoint(event, canvas);
+            const hit = seriesAt(x, y, geometryRef.current);
+            // geometry keys are "${seriesName}::${elementType}"; split back apart
+            const [hitSeriesName, hitElementType] = hit !== undefined ? hit.name.split('::') : [undefined, undefined];
+            const previous = lastHoveredRef.current;
+            const sameAsBefore = previous !== undefined && hitSeriesName === previous.seriesName && hitElementType === previous.elementType;
+            if ((previous === null || previous === void 0 ? void 0 : previous.seriesName) !== hitSeriesName) {
+                if (previous !== undefined)
+                    highlightAxesFor(previous.seriesName, false);
+                if (hitSeriesName !== undefined)
+                    highlightAxesFor(hitSeriesName, true);
+            }
+            if (!sameAsBefore) {
+                if (previous !== undefined) {
+                    handleMouseLeaveSeries(previous.seriesName, mouseLeaveHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[previous.elementType]));
+                }
+                if (hitSeriesName !== undefined && hitElementType !== undefined) {
+                    const series = seriesRef.current.get(hitSeriesName);
+                    const yAxis = axesFor(hitSeriesName, axisAssignments, axisId => xAxesState.axisFor(axisId).getOrUndefined(), axisId => yAxesState.axisFor(axisId).getOrUndefined())[1];
+                    const showingByType = {
+                        minMax: showMinMaxBars,
+                        windowedMinMax: showWindowedMinMaxBars,
+                        meanValue: showMeanValueLines,
+                        windowedMeanValue: showWindowedMeanValueLines,
+                        currentValue: showValueLines,
+                    };
+                    if (series !== undefined && yAxis !== undefined && allowTooltipRef.current && showingByType[hitElementType]) {
+                        handleMouseOverBar(yAxis, series, statsRef.current, [x, y], margin, mouseOverHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[hitElementType]));
+                    }
+                }
+                lastHoveredRef.current = hitSeriesName !== undefined && hitElementType !== undefined ?
+                    { seriesName: hitSeriesName, elementType: hitElementType } :
+                    undefined;
+                // the value-line and windowed-mean-line highlight depends on hover state, so
+                // request a redraw when it changes
+                canvasContext.requestRedraw();
+            }
+        };
+        const handleLeaveCanvas = () => {
+            const previous = lastHoveredRef.current;
+            if (previous !== undefined) {
+                handleMouseLeaveSeries(previous.seriesName, mouseLeaveHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[previous.elementType]));
+                highlightAxesFor(previous.seriesName, false);
+                lastHoveredRef.current = undefined;
+                canvasContext.requestRedraw();
+            }
+        };
+        canvas.addEventListener('mousemove', handleMove);
+        canvas.addEventListener('mouseleave', handleLeaveCanvas);
+        return () => {
+            canvas.removeEventListener('mousemove', handleMove);
+            canvas.removeEventListener('mouseleave', handleLeaveCanvas);
+        };
+    }, [
+        canvasContext, chartId, margin, axisAssignments, xAxesState, yAxesState,
+        mouseOverHandlerFor, mouseLeaveHandlerFor,
+        showMinMaxBars, showWindowedMinMaxBars, showMeanValueLines, showWindowedMeanValueLines, showValueLines,
+        highlightAxesOnMouseOver
+    ]);
+    // the latest `updateTimingAndPlot`, for the view driver to call -- the driver is created once
+    // per run (see below), so it must not capture a stale one (e.g. bound to an older canvas)
+    const updateTimingAndPlotRef = useRef(updateTimingAndPlot);
+    useEffect(() => {
+        updateTimingAndPlotRef.current = updateTimingAndPlot;
+    }, [updateTimingAndPlot]);
+    // creates the view driver that keeps this plot's view in step with the data source, using the
+    // current settings -- see `useStreamingTimeAxes`'s identical effect event
+    const createViewDriver = useEffectEvent((source) => ordinalViewDriverFor(source, windowingTime, () => updateTimingAndPlotRef.current(), currentTime => currentTimeRef.current = currentTime));
+    // while the data source is running (and this plot has a canvas), drive the view from the
+    // data source's updates -- see `useStreamingTimeAxes`'s identical effect. The driver belongs to this plot
+    // instance alone and is always torn down with it.
+    useEffect(() => {
+        if (dataSource === undefined || !running || canvasContext === null)
+            return;
+        allowTooltipRef.current = false;
+        const driver = createViewDriver(dataSource);
+        return () => {
+            driver.unsubscribe();
             allowTooltipRef.current = true;
+        };
+    }, [dataSource, running, canvasContext]);
+    // this plot needs a data source (see the `Chart`'s `dataSource` prop)
+    useEffect(() => {
+        if (dataSource === undefined) {
+            console.error("BarPlot requires a data source; set the enclosing Chart's `dataSource` prop");
         }
-    }, [shouldSubscribe, subscribe]);
+    }, [dataSource]);
+    // unregister this plot's draw function on unmount
+    useEffect(() => {
+        return () => {
+            if (canvasContext) {
+                canvasContext.unregister(`bar-plot-autoscale-${chartId}`);
+                canvasContext.unregister(`bar-plot-${chartId}`);
+            }
+        };
+    }, [canvasContext, chartId]);
     return null;
 }
+/**
+ * The bar style, made fully transparent when the bar isn't shown
+ * @param isVisible Whether the bar is shown
+ * @param style The bar's style
+ * @return The style (with its fill and stroke opacities 0 when the bar isn't shown)
+ */
 function barStyleFor(isVisible, style) {
-    return Object.assign(Object.assign({}, style), { fill: updateOpacityFor(isVisible, style.fill), stroke: updateOpacityFor(isVisible, style.stroke) });
+    return {
+        ...style,
+        fill: updateOpacityFor(isVisible, style.fill),
+        stroke: updateOpacityFor(isVisible, style.stroke)
+    };
 }
+/**
+ * The fill or stroke style, made fully transparent when its element isn't shown
+ * @param isVisible Whether the element is shown
+ * @param style The fill or stroke style
+ * @return The style (with an opacity of 0 when the element isn't shown)
+ */
 function updateOpacityFor(isVisible, style) {
-    return Object.assign(Object.assign({}, style), { opacity: isVisible ? style.opacity : 0 });
+    return {
+        ...style,
+        opacity: isVisible ? style.opacity : 0
+    };
 }
 /**
- * Sets the attributes for the bar based on the d3 selection
- * @param selection The d3 selection (rect SVG element)
- * @param dimensions The bar dimensions
+ * Draws a bar (rectangle) onto the canvas context. Replaces the old `barFor`, which set SVG
+ * `<rect>` attributes via a d3 selection.
+ * @param context The canvas 2D context
+ * @param dimensions The bar's dimensions
  * @param style The bar style holding the fill and stroke styles
- * @return The updated SVG selection (rect SVG element)
  */
-function barFor(selection, dimensions, style) {
-    selection
-        .attr('x', () => dimensions.upperX)
-        .attr('y', () => dimensions.upperY)
-        .attr('width', () => dimensions.width)
-        .attr('height', () => dimensions.height);
-    return applyStrokeStylesTo(applyFillStylesTo(selection, style.fill), style.stroke);
+function drawBar(context, dimensions, style) {
+    var _a;
+    if (dimensions.width <= 0 || dimensions.height <= 0)
+        return;
+    applyFillStyle(context, style.fill);
+    context.fillRect(dimensions.upperX, dimensions.upperY, dimensions.width, dimensions.height);
+    if (((_a = style.stroke.width) !== null && _a !== void 0 ? _a : 0) > 0) {
+        applyStrokeStyle(context, style.stroke);
+        context.strokeRect(dimensions.upperX, dimensions.upperY, dimensions.width, dimensions.height);
+    }
 }
 /**
- * Creates the line segment for values and means
- * @param selection The d3 selection (rect SVG element)
- * @param pathSegment The object containing functions for extracting the (x1, y1) and (x2, y2)
- * points for the path segment
+ * Draws a horizontal line segment (used for the value/mean/windowed-mean lines) onto the canvas
+ * context. Replaces the old `lineFor`, which set SVG `<line>` attributes via a d3 selection.
+ * @param context The canvas 2D context
+ * @param x1 The line's start x-coordinate
+ * @param y1 The line's start y-coordinate
+ * @param x2 The line's end x-coordinate
+ * @param y2 The line's end y-coordinate
  * @param strokeStyle The stroke style
- * @return The updated SVG selection (rect SVG element)
  */
-function lineFor(selection, pathSegment, strokeStyle) {
-    selection
-        .attr('x1', datum => pathSegment.x1(datum))
-        .attr('y1', datum => pathSegment.y1(datum))
-        .attr('x2', datum => pathSegment.x2(datum))
-        .attr('y2', datum => pathSegment.y2(datum));
-    return applyStrokeStylesTo(selection, strokeStyle);
+function drawLine(context, x1, y1, x2, y2, strokeStyle) {
+    applyStrokeStyle(context, strokeStyle);
+    context.beginPath();
+    context.moveTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.stroke();
 }
 /**
  * Calculates the upper (x, y) coordinates of the bar, and the width and height of the bar
@@ -434,48 +711,48 @@ function barDimensions(widthFraction, lowerX, upperX, min, max, axis) {
     };
 }
 /**
- * Calculates the ordinal stats for each of the ordinal series (generally, initial data) and
- * returns a {@link WindowedOrdinalStats} object
- * @param series The array of ordinal series
- * @return A {@link WindowedOrdinalStats} object with the stats for each of the series
+ * @param dataSource The chart's data source
+ * @param series The series to calculate the stats for when the data source doesn't keep them
+ * @return The data source's (live) stats when it keeps them (i.e. an ordinal data source);
+ * otherwise, the stats calculated from the specified series
  */
-function initialOrdinalStats(series) {
-    const ordinalStats = calculateOrdinalStats(series);
-    return Object.assign(Object.assign({}, ordinalStats), { windowedValueStatsForSeries: copyValueStatsForSeries(ordinalStats.valueStatsForSeries) });
+function statsFrom(dataSource, series) {
+    return dataSource !== null && typeof dataSource === 'object' && 'stats' in dataSource ?
+        dataSource.stats :
+        initialOrdinalStats(series);
 }
 /**
- * Attempts to locate the x- and y-axes for the specified series. If no axis is found for the
- * series name, then uses the default returned by the useChart() hook.
+ * Attempts to locate the x- and y-axes for the specified series. If the series has no axis
+ * assignment, then uses the default (first) x- and y-axes.
  * @param seriesName Name of the series for which to retrieve the axis
  * @param axisAssignments A map holding the series name and the associated x- and y-axes assigned
  * to that series. Note that the series in the axis-assignment map is merely a subset of the set
  * of series names.
  * @param xAxisFor The function that accepts an axis ID and returns the corresponding x-axis
  * @param yAxisFor The function that accepts an axis ID and returns the corresponding y-axis
- * @return A 2d tuple holding the linear x-axis as its first element and the category y-axis as
- * the second element.
+ * @return A 2d tuple holding the category x-axis as its first element and the linear y-axis as
+ * the second element (either is actually `undefined` when it isn't found, despite the type).
+ * @throws Error when the x-axis isn't a category axis, or the y-axis isn't a continuous numeric axis
  */
 function axesFor(seriesName, axisAssignments, xAxisFor, yAxisFor) {
     const axes = axisAssignments.get(seriesName);
     const xAxis = xAxisFor((axes === null || axes === void 0 ? void 0 : axes.xAxis) || "");
+    checkAxisType("BarPlot", "x", xAxis, AxisType.OrdinalString);
     const xAxisCategory = xAxis;
-    if (xAxis && !xAxisCategory) {
-        throw Error("Bar plot requires that x-axis be of type CategoryAxis");
-    }
     const yAxis = yAxisFor((axes === null || axes === void 0 ? void 0 : axes.yAxis) || "");
+    checkAxisType("BarPlot", "y", yAxis, AxisType.ContinuousNumeric);
     const yAxisContinuous = yAxis;
-    if (yAxis && !yAxisContinuous) {
-        throw Error("Bar plot requires that y-axis be of type ContinuousNumericAxis");
-    }
     return [xAxisCategory, yAxisContinuous];
 }
 /**
- * Calculates the upper and lower coordinate for the category
- * @param categorySize The size of the category (i.e. plot_height / num_series)
+ * Calculates the lower (left) and upper (right) x-coordinates of a category's lines, inside its
+ * margins
+ * @param categorySize The size of the category (i.e. plot_width / num_series)
  * @param lineWidth The width of the series line
- * @param margin The margin applied to the top and bottom of the spike line (vertical spacing)
- * @return An object with two functions, that when handed a y-coordinate, return the location
- * for the start (yUpper) or end (yLower) of the spikes line.
+ * @param margin The margin applied to the left and right of the category's lines (horizontal spacing)
+ * @return An object with two functions, that when handed the category's (left) x-coordinate,
+ * return the location of the start (lower) or end (upper) of its lines (when the category is no
+ * wider than the margin, the lines are just the line width long)
  */
 function xAxisCategoryBoundsFn(categorySize, lineWidth, margin) {
     if (categorySize <= margin)
@@ -489,68 +766,38 @@ function xAxisCategoryBoundsFn(categorySize, lineWidth, margin) {
     };
 }
 /**
- * Renders a tooltip showing for the bar in the bar chart (see {@link BarPlotTooltipContent})
- * @param container The chart container
+ * Reports a tooltip for the hovered element of a series in the bar chart (see {@link BarPlotTooltipContent}).
+ * Replaces the old version, which also mutated the hovered SVG element's stroke directly for the
+ * two element types that support a highlight (`currentValue`, `windowedMeanValue`); that highlight
+ * is now handled by the draw function checking the hover state (see `updatePlot`'s `draw`) rather
+ * than by touching an element here.
  * @param yAxis The y-axis
  * @param selectedSeries The selected series
  * @param seriesStats The statistics about the current series
- * @param event The mouse-over series event holding the line element
+ * @param mouseCoords The `[x, y]` position of the mouse, in canvas coordinates
  * @param margin The plot margin
- * @param barStyles The series style information (needed for (un)highlighting)
- * @param defaultBarSeriesStyle The default bar series style that is used if no style is found for the series
- * @param allowTooltip When set to `false` won't show tooltip, even if it is visible (used by pan)
  * @param mouseOverHandlerFor The handler for the mouse over (registered by the <Tooltip/>)
- * @param tooltipProvider The ID of the tooltip provider
  */
-function handleMouseOverBar(container, yAxis, selectedSeries, seriesStats, event, margin, barStyles, defaultBarSeriesStyle, allowTooltip, mouseOverHandlerFor, tooltipProvider) {
-    // grab the time needed for the tooltip ID
-    const [x, y] = d3.pointer(event, container);
+function handleMouseOverBar(yAxis, selectedSeries, seriesStats, mouseCoords, margin, mouseOverHandlerFor) {
+    const [, y] = mouseCoords;
     const value = yAxis.scale.invert(y - margin.top);
     const { name: categoryName, data: selectedData } = selectedSeries;
-    const barSeriesStyle = barStyles.get(categoryName) || defaultBarSeriesStyle;
-    const lineStyle = lineStyleFor(tooltipProvider, barSeriesStyle);
-    if (lineStyle !== undefined) {
-        d3.select(event.currentTarget)
-            .style(STROKE_COLOR, lineStyle.highlight.color)
-            .style(STROKE_WIDTH, lineStyle.highlight.width)
-            .style(STROKE_OPACITY, lineStyle.highlight.opacity);
-    }
-    if (mouseOverHandlerFor && allowTooltip) {
+    if (mouseOverHandlerFor) {
         // the contract for the mouse over handler is for a series
-        mouseOverHandlerFor(categoryName, value, { series: selectedData, metadata: seriesStats }, [x, y]);
+        mouseOverHandlerFor(categoryName, value, { series: selectedData, metadata: seriesStats }, mouseCoords);
     }
 }
 /**
- * Unselects the time series and calls the mouse-leave-series handler registered for this series.
+ * Calls the mouse-leave-series handler registered for this series. Replaces the old version, which
+ * also reset the hovered SVG element's stroke color/width directly; that reset is now implicit --
+ * once the hover state no longer matches this element, the next redraw simply paints it in its
+ * normal (non-highlighted) style.
  * @param seriesName The name of the series (i.e. the neuron ID)
- * @param segment The SVG line element representing the spike, over which the mouse is hovering.
- * @param seriesStyles The styles for the series (for (un)highlighting)
- * @param defaultBarSeriesStyle The default bar series style that is used if no style is found for the series
  * @param mouseLeaverHandlerFor Registered handler for the series when the mouse leaves
- * @param tooltipProvider The tooltip provider ID for the mouse-over event
  */
-function handleMouseLeaveSeries(seriesName, segment, seriesStyles, defaultBarSeriesStyle, mouseLeaverHandlerFor, tooltipProvider) {
-    const barSeriesStyle = seriesStyles.get(seriesName) || defaultBarSeriesStyle;
-    const lineStyle = lineStyleFor(tooltipProvider, barSeriesStyle);
-    if (lineStyle !== undefined) {
-        d3.select(segment)
-            .style(STROKE_COLOR, lineStyle.regular.color)
-            .style(STROKE_WIDTH, lineStyle.regular.width)
-            .style(STROKE_OPACITY, lineStyle.regular.opacity);
-    }
+function handleMouseLeaveSeries(seriesName, mouseLeaverHandlerFor) {
     if (mouseLeaverHandlerFor) {
         mouseLeaverHandlerFor(seriesName);
     }
 }
-function lineStyleFor(tooltipProvider, barSeriesStyle) {
-    const { valueLine, windowedMeanValueLine } = barSeriesStyle;
-    switch (tooltipProvider) {
-        case BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue:
-            return valueLine;
-        case BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue:
-            return windowedMeanValueLine;
-        default:
-            return undefined;
-    }
-}
 //# sourceMappingURL=BarPlot.js.map