stream-charts 1.2.0 → 2.0.0

package/dist/app/charts/tooltips/RasterPlotTooltipContent.js

@@ -1,135 +1,82 @@
-import { categoryTooltipY, defaultTooltipStyle, tooltipX } from "./tooltipUtils";
-import * as d3 from "d3";
-import { formatTime, formatValue } from "../utils";
-import { useEffect, useMemo } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { categoryTooltipY, sparklineFor, seriesStatistics, valueOrMissing } from "./tooltipUtils";
+import { TooltipContent } from "./TooltipContent";
+import { formatNumber, formatTime, formatValue } from "../utils";
 import { useChart } from "../hooks/useChart";
 import { usePlotDimensions } from "../hooks/usePlotDimensions";
+// the size of the tooltip's sparkline (of the spikes' values over the window)
+const SPARKLINE_WIDTH = 180;
+const SPARKLINE_HEIGHT = 36;
 /**
- * Adds tooltip content that shows the series name and the (time, value) of the selected point.
+ * Adds tooltip content that shows the series name, the (time, value) of the selected spike, the
+ * statistics of the series' spikes in the window of data the chart holds (their count, the mean
+ * and standard deviation of their values, and the mean time between them), and a sparkline of
+ * their values over the window, with the selected spike marked.
  * ```
  * series name
  * time, value
+ * statistics
+ * sparkline
  * ```
  *
- * Registers the tooltip-content provider with the `ChartContext` so that when d3 fires a mouse-over
- * event on a series. The content provider is returns the {@link addTooltipContent} function
- * when called. And when called the {@link addTooltipContent} function adds the actual tooltip
- * content to the SVG element.
+ * Built on {@link TooltipContent}; put it inside a {@link Tooltip}.
  * @param props The properties describing the tooltip content
- * @return null
+ * @return The tooltip's portal, or `null` when nothing is being hovered
  */
 export function RasterPlotTooltipContent(props) {
-    const { chartId, container, tooltip, axes } = useChart();
-    const { registerTooltipContentProvider } = tooltip;
+    const { axes } = useChart();
     const { yAxesState, axisAssignmentsFor } = axes;
     const { margin, plotDimensions } = usePlotDimensions();
-    const { xFormatter = formatTime, yFormatter = formatValue, style, } = props;
-    const tooltipStyle = useMemo(() => (Object.assign(Object.assign({}, defaultTooltipStyle), style)), [style]);
-    // register the tooltip content provider, which when called on mouse-enter-series events
-    // will render the tooltip container and then the tooltip content. recall that that the
-    // tooltip content is generated in this plot (because this is the plot that holds all the
-    // information needed to render it), and the container for the content is rendered by
-    // the <Tooltip>, which this know nothing about.
-    //
-    // the 'registration function accepts a function of the form (seriesName, time, series) => TooltipDimensions.
-    // and that function has a closure on the content-specific information needed to add the
-    // actual content
-    useEffect(() => {
-        if (container) {
-            // assemble the options for adding the tooltip
-            const options = {
-                formatters: {
-                    x: xFormatter,
-                    y: yFormatter,
-                }
-            };
-            // register the tooltip content provider function with the chart hook (useChart) so that
-            // it is visible to all children of the Chart (i.e. the <Tooltip>).
-            registerTooltipContentProvider(
-            /**
-             *
-             * @param seriesName The name of the series
-             * @param time The mouse time
-             * @param tooltipData The tooltip data holding the series and metadata (data about the series)
-             * @param mouseCoords The coordinates of the mouse
-             * @return The tooltip contents
-             */
-            (seriesName, time, tooltipData, mouseCoords) => {
-                const yAxisId = axisAssignmentsFor(seriesName).yAxis;
-                const assignedAxis = yAxesState
-                    .axisFor(yAxisId)
-                    // .getOrElse(undefined as unknown as OrdinalStringAxis)
-                    .getOrThrow(() => new Error(`No assigned y-axis exists; axis_id: ${yAxisId}`));
-                return addTooltipContent(seriesName, time, tooltipData.series[0], mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, assignedAxis, options);
-            });
-        }
-    }, [
-        chartId, container, margin, plotDimensions, registerTooltipContentProvider,
-        xFormatter,
-        yFormatter,
-        tooltipStyle,
-        yAxesState, axisAssignmentsFor
-    ]);
-    return null;
+    const { xFormatter = formatTime, yFormatter = formatValue, intervalFormatter = xFormatter, style, } = props;
+    return (_jsx(TooltipContent, { style: style, capture: (seriesName, _time, tooltipData) => {
+            const yAxisId = axisAssignmentsFor(seriesName).yAxis;
+            const axis = yAxesState
+                .axisFor(yAxisId)
+                .getOrThrow(() => new Error(`No assigned y-axis exists; axis_id: ${yAxisId}`));
+            return captureTooltipContent(seriesName, tooltipData.series[0], tooltipData.metadata.spikes, axis);
+        }, 
+        // (vertically, the tooltip is centered on the spike's row, rather than placed below the mouse)
+        topFor: (content, height) => categoryTooltipY(content.seriesName, height, content.axis, margin, content.axis.scale.bandwidth(), plotDimensions), children: (tooltipContent, tooltipStyle) => _jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: tooltipStyle.fontSize, fontWeight: tooltipStyle.fontWeight }, children: tooltipContent.seriesName }), _jsxs("div", { style: { fontSize: tooltipStyle.fontSize + 2, fontWeight: tooltipStyle.fontWeight + 150 }, children: [xFormatter(tooltipContent.spikeTime), ", ", yFormatter(tooltipContent.value)] }), tooltipContent.statistics !== undefined && tooltipContent.statistics.count > 0 &&
+                    _jsx("table", { style: { fontSize: tooltipStyle.fontSize, borderCollapse: 'collapse', border: 'none', marginTop: 6, width: 'auto' }, children: _jsx("tbody", { children: [
+                                ['Spikes', formatNumber(tooltipContent.statistics.count, " ,.0f")],
+                                ['Mean value', valueOrMissing(tooltipContent.statistics.meanValue, yFormatter)],
+                                ['Std. deviation', valueOrMissing(tooltipContent.statistics.valueStandardDeviation, yFormatter)],
+                                ['Mean interval', valueOrMissing(tooltipContent.statistics.meanInterval, intervalFormatter)],
+                            ].map(([label, value]) => (_jsxs("tr", { children: [_jsx("td", { style: { padding: '1px 12px 1px 0', textAlign: 'left', border: 'none' }, children: label }), _jsx("td", { style: { padding: '1px 0', textAlign: 'right', border: 'none' }, children: value })] }, label))) }) }), tooltipContent.sparkline !== undefined &&
+                    _jsxs("svg", { width: SPARKLINE_WIDTH, height: SPARKLINE_HEIGHT, style: { display: 'block', marginTop: 8 }, "aria-hidden": "true", children: [_jsx("path", { d: tooltipContent.sparkline.path, fill: "none", stroke: tooltipStyle.fontColor, strokeWidth: 1.25, strokeLinejoin: "round", strokeLinecap: "round" }), tooltipContent.sparkline.mark !== undefined &&
+                                _jsx("circle", { cx: tooltipContent.sparkline.mark[0], cy: tooltipContent.sparkline.mark[1], r: 2.5, fill: tooltipStyle.fontColor })] })] }) }));
 }
 /**
- * Callback function that adds tooltip content and returns the tooltip width and text height
+ * Captures the data needed to render the tooltip content: the selected spike, and the statistics
+ * and sparkline of the series' spikes
  * @param seriesName The name of the series (i.e. the neuron ID)
- * @param time The time (x-coordinate value) corresponding to the mouse location
- * @param selected The selected datum (time, value)
- * @param mouseCoords The coordinates of the mouse when the event was fired (relative to the plot container)
- * @param chartId The ID of this chart
- * @param container The plot container (SVGSVGElement)
- * @param margin The plot margins
- * @param tooltipStyle The style properties for the tooltip
+ * @param selected The selected datum (time, value), or `undefined` (in which case there's no tooltip)
+ * @param spikes All the series' spikes in the window (for the statistics and the sparkline), when known
  * @param axis The category axis to which the time-series is associated
- * @param plotDimensions The dimensions of the plot
- * @param options The options passed through the the function that adds the tooltip content
- * @return The width and text height of the tooltip content
+ * @return The tooltip's content, or `undefined` when there's no selected spike
  */
-function addTooltipContent(seriesName, time, selected, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, axis, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { formatters } = options;
-    const [x,] = mouseCoords;
-    const { time: spikeTime, value } = selected;
-    // display the neuron ID in the tooltip
-    const header = d3.select(container)
-        .append("text")
-        .attr('id', `tn${spikeTime}-${seriesName}-${chartId}`)
-        .attr('class', 'tooltip')
-        .attr('fill', tooltipStyle.fontColor)
-        .attr('font-family', 'sans-serif')
-        .attr('font-size', tooltipStyle.fontSize)
-        .attr('font-weight', tooltipStyle.fontWeight)
-        .text(() => seriesName);
-    // display the time (ms) and spike strength (mV) in the tooltip
-    const text = d3.select(container)
-        .append("text")
-        .attr('id', `t${spikeTime}-${seriesName}-${chartId}`)
-        .attr('class', 'tooltip')
-        .attr('fill', tooltipStyle.fontColor)
-        .attr('font-family', 'sans-serif')
-        .attr('font-size', tooltipStyle.fontSize + 2)
-        .attr('font-weight', tooltipStyle.fontWeight + 150)
-        .text(() => `${formatters.x(spikeTime)}, ${formatters.y(value)}`);
-    // calculate the max width and height of the text
-    const tooltipWidth = Math.max(((_b = (_a = header.node()) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) || 0, ((_d = (_c = text.node()) === null || _c === void 0 ? void 0 : _c.getBBox()) === null || _d === void 0 ? void 0 : _d.width) || 0);
-    const headerTextHeight = ((_f = (_e = header.node()) === null || _e === void 0 ? void 0 : _e.getBBox()) === null || _f === void 0 ? void 0 : _f.height) || 0;
-    const idHeight = ((_h = (_g = text.node()) === null || _g === void 0 ? void 0 : _g.getBBox()) === null || _h === void 0 ? void 0 : _h.height) || 0;
-    const textHeight = headerTextHeight + idHeight;
-    // set the header text location
-    // const spikeHeight = plotDimensions.height / liveDataRef.current.size
-    const xCoord = tooltipX(x, tooltipWidth, plotDimensions, tooltipStyle, margin);
-    const yCoord = categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, margin, axis.scale.bandwidth(), plotDimensions);
-    const xTooltip = xCoord + tooltipStyle.paddingLeft;
-    const yTooltip = yCoord + tooltipStyle.paddingTop;
-    header
-        .attr('x', () => xTooltip)
-        .attr('y', () => yTooltip - idHeight + textHeight);
-    // set the tooltip text (i.e. neuron ID) location
-    text
-        .attr('x', () => xTooltip)
-        .attr('y', () => yTooltip + textHeight);
-    return { x: xCoord, y: yCoord, contentWidth: tooltipWidth, contentHeight: textHeight };
+function captureTooltipContent(seriesName, selected, spikes, axis) {
+    // `selected` comes from the caller's `tooltipData.series[0]` -- this component is a public,
+    // independently-usable tooltip-content provider, and `TooltipData.series: Series<D>` permits
+    // an empty array, so guard here rather than relying on every caller to have already checked
+    // (RasterPlot.tsx's own mousemove handler does today, but that shouldn't be the only thing
+    // standing between an empty series and a destructuring crash below)
+    if (selected === undefined)
+        return undefined;
+    const { x: spikeTime, y } = selected;
+    // the spikes' statistics, and their values over time, over the window (the data the chart holds)
+    const spikeValues = [];
+    if (spikes !== undefined) {
+        for (let i = 0; i < spikes.length; i++)
+            spikeValues.push({ time: spikes[i].x, value: spikes[i].y });
+    }
+    return {
+        seriesName,
+        spikeTime,
+        value: y,
+        statistics: spikes !== undefined ? seriesStatistics(spikes) : undefined,
+        sparkline: sparklineFor(spikeValues, SPARKLINE_WIDTH, SPARKLINE_HEIGHT, 2, undefined, spikeTime),
+        axis,
+    };
 }
 //# sourceMappingURL=RasterPlotTooltipContent.js.map

package/dist/app/charts/tooltips/RasterPlotTooltipContent.js.map

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

package/dist/app/charts/tooltips/ScatterPlotTooltipContent.d.ts

@@ -1,31 +1,43 @@
-import { TooltipStyle } from "./tooltipUtils";
+import type { ReactElement } from "react";
+import { type TooltipStyle } from "./tooltipUtils";
 /**
  * Properties for rendering the tooltip content. The properties are applied as
- * shown below.
+ * shown below (over a segment; and over a point).
  * ```
  * series name
  *          beforeHeader      afterHeader        deltaHeader
  * xLabel   xValueFormatter   xValueFormatter    xChangeFormatter
  * yLabel   yValueFormatter   yValueFormatter    yChangeFormatter
+ *
+ * series name
+ *          beforeHeader      pointHeader        afterHeader
+ * xLabel   xValueFormatter   xValueFormatter    xValueFormatter
+ * yLabel   yValueFormatter   yValueFormatter    yValueFormatter
  * ```
+ * Below the table, the series' statistics: the mean value and standard deviation (formatted by
+ * `yValueFormatter`), and the mean interval between points (formatted by `intervalFormatter`).
  */
 export interface Props {
     xLabel: string;
     yLabel: string;
     beforeHeader?: string;
+    pointHeader?: string;
     afterHeader?: string;
     deltaHeader?: string;
     xValueFormatter?: (value: number) => string;
     yValueFormatter?: (value: number) => string;
     xChangeFormatter?: (value1: number, value2: number) => string;
     yChangeFormatter?: (value1: number, value2: number) => string;
+    intervalFormatter?: (interval: number) => string;
     style?: Partial<TooltipStyle>;
 }
 /**
- * Adds tooltip content as a table. The columns of the table are the "label", the value before
- * the mouse cursor, then value after the mouse cursor, and the difference between the two values.
- * The rows of the table are x-values for the first row, and the y-values for the second row.
- * The table has the following form.
+ * Adds tooltip content as a table, whose rows are the x-values and the y-values, and whose
+ * columns depend on where the mouse is over the series (as the plot reports it, see
+ * `ScatterTooltipMetadata` -- the plot also highlights the same points):
+ *
+ * When the mouse is over a line segment, the points before and after the mouse, and the
+ * difference between them:
  * ```
  * series name
  *            before     after         ∆
@@ -33,11 +45,26 @@ export interface Props {
  * y-label     y_tb      y_ta       y_ta - y_tb
  * ```
  *
- * Registers the tooltip-content provider with the `ChartContext` so that when d3 fires a mouse-over
- * event on a series. The content provider is returns the {@link addTooltipContent} function
- * when called. And when called the {@link addTooltipContent} function adds the actual tooltip
- * content to the SVG element.
+ * When the mouse is directly over a data point, that point (in bold), and the points before and
+ * after it:
+ * ```
+ * series name
+ *            before     point     after
+ * x-label     x_b        x_p       x_a
+ * y-label     y_b        y_p       y_a
+ * ```
+ * A point that doesn't exist (e.g. before the series' first point) shows a dash.
+ *
+ * Below the table, the statistics of the series' points in the window of data the chart holds:
+ * their count, the mean and (sample) standard deviation of their values, and the mean time
+ * between consecutive points. And below that, a sparkline of the autocorrelation of their values,
+ * by lag (in points, from 0 on the left), drawn from -1 (bottom) to 1 (top): with a y-axis (ticks
+ * at -1, 0, and 1), and an x-axis along the (dashed) zero line, with ticks at round lags, captioned
+ * "lag" (just to the right of the axis' end).
+ *
+ * Built on {@link TooltipContent}; put it inside a {@link Tooltip}.
  * @param props The properties describing the tooltip content
- * @return null
+ * @return The tooltip's portal, or `null` when nothing is being hovered
  */
-export declare function ScatterPlotTooltipContent(props: Props): null;
+export declare function ScatterPlotTooltipContent(props: Props): ReactElement | null;
+//# sourceMappingURL=ScatterPlotTooltipContent.d.ts.map

package/dist/app/charts/tooltips/ScatterPlotTooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterPlotTooltipContent.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/tooltips/ScatterPlotTooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,YAAY,EAAC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAUH,KAAK,YAAY,EACpB,MAAM,gBAAgB,CAAC;AA8BxB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,KAAK;IAElB,MAAM,EAAE,MAAM,CAAA;IAEd,MAAM,EAAE,MAAM,CAAA;IAEd,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAE3C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAE3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAE9D,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAI9D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;IAEhD,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;CAChC;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,GAAG,IAAI,CAuG3E"}