stream-charts 1.2.0 → 2.0.0

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { TooltipContent } from "./TooltipContent";
+import { DefaultOutlierTooltipContent } from "./DefaultOutlierTooltipContent";
+import { UseOutlierTooltip } from "./useOutlierTooltip";
+/**
+ * The tooltip content for an {@link OutlierPlot}: when the mouse is over a band, or an outlier,
+ * shows the series' name, the outlier (if any), the band, the probabilities of a point being in
+ * and outside the band, and the number of points in the band. Put it inside a {@link Tooltip}.
+ *
+ * To lay the content out yourself, put your own component inside this one: it gets what the
+ * tooltip shows, its style, and the formatters, from {@link useOutlierTooltip}.
+ * @param props The style, the formatters, and the (optional) custom content
+ * @return The tooltip's box (a portal), or `null` when no band or outlier is hovered
+ */
+export function OutlierPlotTooltipContent(props) {
+    const { style, children, datumFormatter = (x, y) => `(${x}, ${y})`, bandFormatter = (lower, upper) => `Band: ${lower} ⭢ ${upper}`, measureFormatter = (innerProb, outerProb) => `Points have a ${(innerProb * 100).toFixed(1)}% probability of being in this band, and a ${(outerProb * 100).toFixed(1)}% probability of being outside this band`, } = props;
+    // (a description given as lines is shown one per line)
+    const measureDescription = (innerProb, outerProb) => {
+        const description = measureFormatter(innerProb, outerProb);
+        return Array.isArray(description) ?
+            _jsx(_Fragment, { children: description.map((line, index) => _jsx("div", { children: line }, index)) }) :
+            description;
+    };
+    return (_jsx(TooltipContent, { style: style, boxStyle: { lineHeight: 1.6 }, capture: (seriesName, _time, { metadata }) => ({ ...metadata, seriesName }), children: (tooltipContent, tooltipStyle) => _jsx(UseOutlierTooltip.Provider, { value: { tooltipContent, tooltipStyle, datumFormatter, bandFormatter, measureFormatter: measureDescription }, children: children !== null && children !== void 0 ? children : _jsx(DefaultOutlierTooltipContent, {}) }) }));
+}
+//# sourceMappingURL=OutlierPlotTooltipContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlierPlotTooltipContent.js","sourceRoot":"","sources":["../../../../src/app/charts/tooltips/OutlierPlotTooltipContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAG/C,OAAO,EAAC,4BAA4B,EAAC,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAgE,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AAkBpH;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAY;IAClD,MAAM,EACF,KAAK,EACL,QAAQ,EACR,cAAc,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EACzD,aAAa,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,KAAK,EAAE,EAC7E,gBAAgB,GAAG,CAAC,SAAiB,EAAE,SAAiB,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,0CAA0C,GACjO,GAAG,KAAK,CAAA;IAET,uDAAuD;IACvD,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,SAAiB,EAAwB,EAAE;QACtF,MAAM,WAAW,GAAG,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAC1D,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;YAC/B,4BAAG,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,wBAAkB,IAAI,IAAZ,KAAK,CAAc,CAAC,GAAI,CAAC,CAAC;YACxE,WAAW,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,CACH,KAAC,cAAc,IACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,EAAC,UAAU,EAAE,GAAG,EAAC,EAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,QAAQ,EAAE,UAAU,EAAC,CAAC,YAEtE,CAAC,cAAc,EAAE,YAAY,EAAE,EAAE,CAC9B,KAAC,iBAAiB,CAAC,QAAQ,IACvB,KAAK,EAAE,EAAC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAC,YAEzG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAC,4BAA4B,KAAE,GACnB,GAEpB,CACpB,CAAA;AACL,CAAC"}

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

@@ -1,68 +1,17 @@
-import { TooltipStyle } from "./tooltipUtils";
-/**
- # Want to write your own tooltip-content component?
-
- Here's how to write your own tooltip-content component.
-
- To create your own tooltip content `<MyTooltipContent/>` you must do the following:
- 1. Create a react component for your tooltip content (see for example, {@link PoincarePlotTooltipContent}
- as a reference.
- 2. Use the {@link useChart} hook to get the {@link registerTooltipContentProvider} registration function.
- 3. When your tooltip content component (`<MyTooltipContent/>`) mounts, use the {@link registerTooltipContentProvider}
- function to register your tooltip content provider.
- 4. When the chart dimensions, margin, container, etc, change, register your tooltip content provider
- again (you can register as many times as you like because it only uses the last content provider
- registered).
-
- That's it! A few more details are below.
-
- The {@link registerTooltipContentProvider} function from the {@link useChart} hook allows you to register
- one tooltip content provider. A second call to this function will cause the {@link useChart} hook to drop
- the first one in favor of the second one.
-
- The {@link registerTooltipContentProvider} function from the {@link useChart} hook accepts a higher-order
- function that allowing a closure on content/chart-specific data. Specifically, you must hand the
- {@link registerTooltipContentProvider} a function of the form:
-
- `(seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => TooltipDimensions`
-
- Your function to add that actual content will be what this function calls whenever d3 fires a mouse-over
- event on one you the time-series in the chart.
-
- The code snippet below is from the `useEffect` call in the {@link PoincarePlotTooltipContent}.
- Note that the first four arguments to the {@link addTooltipContent} function are those provided by the {@link useChart} hook
- when a d3 mouse-over event occurs on one of your series. The additional six arguments are from the closure formed
- on the variables in your component. The `chartId`, `container`, `margin`, and `plotDimensions` are from the
- {@link useChart} hook called by the {@link PoincarePlotTooltipContent} component. The last two
- arguments, `defaultTooltipStyle` and `options` are specific to the {@link PoincarePlotTooltipContent}.
- For example, the `options` property is set by the caller of the {@link PoincarePlotTooltipContent}
- component.
-
- ```ts
- // 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(
- (seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) =>
- addTooltipContent(
- seriesName, time, series, mouseCoords,
- chartId, container, margin, plotDimensions,
- defaultTooltipStyle, options
- )
- )
- ```
-
- This pattern allows you to supplement that `useChart` mouse-over callback with information specific to your component.
-
- */
+import type { ReactElement } from "react";
+import { type TooltipStyle } from "./tooltipUtils";
 /**
  * Properties for rendering the tooltip content. The properties are applied as
  * shown below.
  * ```
  * series name
- *          beforeHeader      afterHeader        deltaHeader
- * xLabel   xValueFormatter   xValueFormatter    xChangeFormatter
- * yLabel   yValueFormatter   yValueFormatter    yChangeFormatter
+ *          f[n-1](x)         f[n](x)            f[n+1](x)
+ * xLabel   xValueFormatter   xValueFormatter    xValueFormatter
+ * yLabel   yValueFormatter   yValueFormatter    yValueFormatter
  * ```
+ * The column headers are always the `f[i](x)` form, built from the hovered point's index: the
+ * `nMinusLagHeader`, `nHeader`, and `nPlusLagHeader` properties, and the `xChangeFormatter` and
+ * `yChangeFormatter` properties, are accepted, but not (yet) used.
  */
 export interface Props {
     xLabel: string;
@@ -77,22 +26,23 @@ export interface Props {
     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. The columns of the table are the previous, current, and next
+ * iterate (relative to the hovered point). The rows of the table are the time values for the
+ * first row, and the iterate values (each point's `f[n+1](x)`) for the second row. Below the
+ * table, as wide as it, a sparkline of the series' values over time -- the 60 points around the
+ * hovered point -- with the hovered point marked.
  * ```
  * series name
- *            previous  current         next
- * time        x_tb      x_ta       x_ta - x_tb
- * value       y_tb      y_ta       y_ta - y_tb
+ *            f[n-1](x)     f[n](x)      f[n+1](x)
+ * t (ms)       t_p            t_c          t_n
+ * value        v_p            v_c          v_n
+ * value over time
+ * 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 declare function PoincarePlotTooltipContent(props: Props): null;
+export declare function PoincarePlotTooltipContent(props: Props): ReactElement | null;
+//# sourceMappingURL=PoincarePlotTooltipContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PoincarePlotTooltipContent.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/tooltips/PoincarePlotTooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,YAAY,EAAC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAsC,KAAK,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAOtF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,KAAK;IAElB,MAAM,EAAE,MAAM,CAAA;IAEd,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;CAChC;AAgCD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,GAAG,IAAI,CAyB5E"}

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

@@ -1,189 +1,122 @@
-import { createTable, TableData, TableFormatter, TableStyler } from "svg-table";
-import { defaultTooltipStyle, findPointAndNeighbors, tooltipX, tooltipY } from "./tooltipUtils";
-import { formatTime, formatTimeChange, formatValue, formatValueChange } from "../utils";
-import { useEffect, useMemo } from "react";
-import { useChart } from "../hooks/useChart";
-import { usePlotDimensions } from "../hooks/usePlotDimensions";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useState, useRef } from "react";
+import { findPointAndNeighbors, sparklineFor } from "./tooltipUtils";
+import { TooltipContent } from "./TooltipContent";
+import { formatTime, formatValue } from "../utils";
 import { emptyIterateDatum } from "../series/iterateSeries";
-import { DataFrame } from "data-frame-ts";
+// the height of the tooltip's sparkline (of the series' values over time); it's as wide as the
+// tooltip's content (at least this wide)
+const SPARKLINE_HEIGHT = 36;
+const MIN_SPARKLINE_WIDTH = 120;
+// the number of points (around the hovered point) the sparkline shows
+const SPARKLINE_POINTS = 60;
 /**
- * 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. The columns of the table are the previous, current, and next
+ * iterate (relative to the hovered point). The rows of the table are the time values for the
+ * first row, and the iterate values (each point's `f[n+1](x)`) for the second row. Below the
+ * table, as wide as it, a sparkline of the series' values over time -- the 60 points around the
+ * hovered point -- with the hovered point marked.
  * ```
  * series name
- *            previous  current         next
- * time        x_tb      x_ta       x_ta - x_tb
- * value       y_tb      y_ta       y_ta - y_tb
+ *            f[n-1](x)     f[n](x)      f[n+1](x)
+ * t (ms)       t_p            t_c          t_n
+ * value        v_p            v_c          v_n
+ * value over time
+ * 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 PoincarePlotTooltipContent(props) {
-    const { chartId, container, tooltip } = useChart();
-    const { registerTooltipContentProvider } = tooltip;
-    const { margin, plotDimensions, } = usePlotDimensions();
-    const { xLabel, yLabel, nMinusLagHeader = ' f[n-1](x)', nHeader = ' f[n](x)  ', nPlusLagHeader = ' f[n+1](x)', xValueFormatter = formatTime, yValueFormatter = formatValue, xChangeFormatter = formatTimeChange, yChangeFormatter = formatValueChange, 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 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 knows 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) {
-            // 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((seriesName, time, tooltipData, mouseCoords) => addTooltipContent(seriesName, time, tooltipData, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle));
-        }
-    }, [
-        chartId, container, margin, plotDimensions, registerTooltipContentProvider,
-        xLabel, xChangeFormatter, xValueFormatter,
-        yLabel, yChangeFormatter, yValueFormatter,
-        nMinusLagHeader, nHeader, nPlusLagHeader,
-        tooltipStyle
-    ]);
-    return null;
+    const { xLabel, yLabel, 
+    // (the `nMinusLagHeader`, `nHeader`, and `nPlusLagHeader` properties aren't used: the
+    // column headers are always the `f[i](x)` form, built from the point's index)
+    xValueFormatter = formatTime, yValueFormatter = formatValue, style, } = props;
+    return (_jsx(TooltipContent, { style: style, capture: (seriesName, time, tooltipData) => captureTooltipContent(seriesName, time, tooltipData, { xLabel, yLabel, xValueFormatter, yValueFormatter }), children: (tooltipContent, tooltipStyle) => _jsx(PoincareTooltipBody, { tooltipContent: tooltipContent, tooltipStyle: tooltipStyle }, tooltipContent.hoveredTime) }));
 }
-const dimension = {
-    width: 60,
-    defaultWidth: 70,
-    minWidth: 50,
-    maxWidth: 100,
-    height: 15,
-    defaultHeight: 15,
-    minHeight: 10,
-    maxHeight: 50
-};
 /**
- * Callback function that adds tooltip content and returns the tooltip width and text height
- * @param seriesName The name of the series (i.e. the neuron ID)
- * @param time The time (x-coordinate value) corresponding to the mouse location
+ * The Poincaré tooltip's content: the series' name, the table of the hovered iterate and its
+ * neighbors, and, as wide as the table (or the name, when that's wider), the sparkline of the
+ * series' values around the hovered point
+ * @param props The captured content, and the tooltip's style
+ * @return The tooltip's content
+ */
+function PoincareTooltipBody(props) {
+    const { tooltipContent, tooltipStyle } = props;
+    // the sparkline is as wide as the tooltip's content: its table, or its title when that's wider.
+    // Both are measured at their natural widths (rather than the sparkline-stretched width of the
+    // tooltip itself), before the tooltip is painted.
+    const titleRef = useRef(null);
+    const tableRef = useRef(null);
+    const [sparklineWidth, setSparklineWidth] = useState(MIN_SPARKLINE_WIDTH);
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const contentWidth = Math.max(MIN_SPARKLINE_WIDTH, (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0, (_d = (_c = titleRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) !== null && _d !== void 0 ? _d : 0);
+        if (contentWidth !== sparklineWidth)
+            setSparklineWidth(contentWidth);
+    }, [tooltipContent, sparklineWidth]);
+    const cellStyle = { padding: '1px 8px', textAlign: 'right', border: 'none' };
+    const rowLabelStyle = { ...cellStyle, textAlign: 'left', paddingLeft: 0 };
+    const headerCellStyle = { ...cellStyle, fontWeight: tooltipStyle.fontWeight + 550 };
+    // the "current" (middle) column stands out
+    const currentColumnStyle = { ...cellStyle, fontWeight: tooltipStyle.fontWeight + 300 };
+    // the series' values around the hovered point, over time, with the hovered point marked (when
+    // there are enough values to draw)
+    const sparkline = sparklineFor(tooltipContent.sparklineValues, sparklineWidth, SPARKLINE_HEIGHT, 2, undefined, tooltipContent.hoveredTime);
+    return _jsxs(_Fragment, { children: [_jsx("div", { ref: titleRef, style: { fontSize: tooltipStyle.fontSize, fontWeight: tooltipStyle.fontWeight, marginBottom: 4, width: 'fit-content' }, children: tooltipContent.seriesName }), _jsxs("table", { ref: tableRef, style: { fontSize: tooltipStyle.fontSize, borderCollapse: 'collapse', border: 'none', width: 'auto' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { style: rowLabelStyle }), _jsx("td", { style: headerCellStyle, children: tooltipContent.prevHeader }), _jsx("td", { style: { ...headerCellStyle, ...currentColumnStyle }, children: tooltipContent.currentHeader }), _jsx("td", { style: headerCellStyle, children: tooltipContent.nextHeader })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { style: rowLabelStyle, children: tooltipContent.xLabel }), _jsx("td", { style: cellStyle, children: tooltipContent.xPrev }), _jsx("td", { style: currentColumnStyle, children: tooltipContent.xCurrent }), _jsx("td", { style: cellStyle, children: tooltipContent.xNext })] }), _jsxs("tr", { children: [_jsx("td", { style: rowLabelStyle, children: tooltipContent.yLabel }), _jsx("td", { style: cellStyle, children: tooltipContent.yPrev }), _jsx("td", { style: currentColumnStyle, children: tooltipContent.yCurrent }), _jsx("td", { style: cellStyle, children: tooltipContent.yNext })] })] })] }), sparkline !== undefined && _jsxs(_Fragment, { children: [_jsxs("div", { style: { fontSize: tooltipStyle.fontSize, marginTop: 8 }, children: [tooltipContent.yLabel, " over time"] }), _jsxs("svg", { width: sparklineWidth, height: SPARKLINE_HEIGHT, style: { display: 'block', marginTop: 4 }, "aria-hidden": "true", children: [_jsx("path", { d: sparkline.path, fill: "none", stroke: tooltipStyle.fontColor, strokeWidth: 1, strokeLinejoin: "round", strokeLinecap: "round" }), sparkline.mark !== undefined &&
+                                _jsx("circle", { cx: sparkline.mark[0], cy: sparkline.mark[1], r: 2.5, fill: tooltipStyle.fontColor })] })] })] });
+}
+/**
+ * Captures the data needed to render the tooltip's content: the table (the hovered point, the
+ * first point within 0.1 of the plot's time, and its neighbors), and the series' values around
+ * the hovered point, over time, for the sparkline
+ * @param seriesName The name of the series
+ * @param time The time of the hovered point
  * @param tooltipData The series data and metadata
- * @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 plotDimensions The dimensions of the plot
- * @return The width and text height of the tooltip content
+ * @param options Header labels and value formatters
+ * @return The tooltip's content
  */
-function addTooltipContent(seriesName, time, tooltipData, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle) {
-    const [x, y] = mouseCoords;
+function captureTooltipContent(seriesName, time, tooltipData, options) {
     const { series } = tooltipData;
     const [lower, point, upper, index] = findPointAndNeighbors(series, time, 0.1, value => value.time, () => emptyIterateDatum);
-    const defaultBorderElement = {
-        color: tooltipStyle.borderColor,
-        radius: 0,
-        width: 0,
-        opacity: 0
-    };
-    const border = {
-        top: defaultBorderElement,
-        bottom: defaultBorderElement,
-        left: defaultBorderElement,
-        right: defaultBorderElement,
-    };
-    const background = {
-        color: tooltipStyle.backgroundColor,
-        opacity: tooltipStyle.backgroundOpacity
-    };
-    const font = {
-        size: tooltipStyle.fontSize,
-        family: tooltipStyle.fontFamily,
-        color: tooltipStyle.fontColor,
-        weight: tooltipStyle.fontWeight
+    const { xLabel, yLabel, xValueFormatter, yValueFormatter } = options;
+    return {
+        seriesName,
+        // (the headers are always the f[i](x) form, built from the point's index)
+        prevHeader: index > 0 ? `f[${index - 1}](x)` : '- n/a -',
+        currentHeader: `f[${index}](x)`,
+        nextHeader: index < series.length - 1 ? `f[${index + 1}](x)` : '- n/a -',
+        xLabel,
+        xPrev: xValueFormatter(lower.time),
+        xCurrent: xValueFormatter(point.time),
+        xNext: xValueFormatter(upper.time),
+        yLabel,
+        yPrev: yValueFormatter(lower.iterateN_1),
+        yCurrent: yValueFormatter(point.iterateN_1),
+        yNext: yValueFormatter(upper.iterateN_1),
+        sparklineValues: valuesAround(series, index, SPARKLINE_POINTS),
+        hoveredTime: point.time,
     };
-    const padding = {
-        top: tooltipStyle.paddingTop,
-        bottom: tooltipStyle.paddingBottom,
-        right: tooltipStyle.paddingRight,
-        left: tooltipStyle.paddingLeft
-    };
-    const currentIterateStyle = {
-        border,
-        dimension,
-        background,
-        font: Object.assign(Object.assign({}, font), { weight: 550 }),
-        padding,
-        alignText: 'right',
-        verticalAlignText: 'middle'
-    };
-    return DataFrame
-        .from([
-        [lower.time, point.time, upper.time],
-        [lower.iterateN_1, point.iterateN_1, upper.iterateN_1]
-    ])
-        // create the table data that has the column headers
-        .flatMap(df => TableData
-        .fromDataFrame(df)
-        .withColumnHeader([
-        index > 0 ? `f[${index - 1}](x)` : '- n/a -',
-        `f[${index}](x)`,
-        index < series.length - 1 ? `f[${index + 1}](x)` : '- n/a -'
-    ])
-        .flatMap(td => td.withRowHeader(['t (ms)', 'value'])))
-        // add the dat formatters for the (x, y) values of the iterates
-        .flatMap(tableData => TableFormatter.fromTableData(tableData)
-        .addRowFormatter(1, value => formatTime(value, ""))
-        .flatMap(tf => tf.addRowFormatter(2, value => formatValue(value)))
-        .flatMap(tf => tf.formatTable()))
-        .map(tableData => TableStyler.fromTableData(tableData)
-        .withTableFont(font)
-        .withPadding(padding)
-        .withColumnHeaderStyle({
-        font: Object.assign(Object.assign({}, font), { weight: 650 }),
-        padding: { top: 0, bottom: 10 },
-        dimension: Object.assign(Object.assign({}, dimension), { maxHeight: 70 }),
-        alignText: 'center',
-    })
-        .withRowHeaderStyle({
-        font: Object.assign(Object.assign({}, font), { weight: 650 }),
-        padding: { left: 0, right: 10 },
-        dimension: dimension,
-        alignText: 'center',
-    })
-        .withColumnStyles([], {
-        padding: { left: 10, right: 10 },
-        alignText: 'right',
-    })
-        .withCellStyle(1, 2, currentIterateStyle)
-        .withCellStyle(2, 2, currentIterateStyle)
-        .withRowStyles([], {
-        font,
-        dimension: Object.assign(Object.assign({}, dimension), { maxHeight: 20 }),
-        padding: { top: 0, bottom: 0 }
-    })
-        .styleTable())
-        .flatMap(styledTable => createTable(styledTable, container, `t${time}-${seriesName}-header-${chartId}`, tooltipCoordinates))
-        .map(renderingInfo => {
-        const { tableX: x, tableY: y, tableWidth: contentWidth, tableHeight: contentHeight } = renderingInfo;
-        return { x, y, contentWidth, contentHeight };
-    })
-        .getOrThrow();
-    /**
-     * Calculates the coordinates of the tooltip based on the width and height of the SVG
-     * table. This is needed because the tooltip needs to be adjusted relative mouse location
-     * when the mouse coordinates are too close to an edge.
-     * @param width The SVG table width
-     * @param height The SVG table height
-     * @return The updated tooltip coordinates
-     */
-    function tooltipCoordinates(width, height) {
-        return [
-            tooltipX(x, width, plotDimensions, tooltipStyle, margin),
-            tooltipY(y, height, plotDimensions, tooltipStyle, margin)
-        ];
-    }
+}
+/**
+ * The values (each point's `f[n+1](x)`) of (at most) the specified number of points around the
+ * hovered point, over time: centered on the hovered point, or shifted to stay within the series
+ * when the hovered point is near its start or end
+ * @param series The series' iterates, ordered by time
+ * @param index The index of the hovered point (or -1, when it wasn't found)
+ * @param count The (largest) number of points
+ * @return The points' times and values, in order
+ */
+function valuesAround(series, index, count) {
+    if (index < 0)
+        return [];
+    const start = Math.max(0, Math.min(index - Math.floor(count / 2), series.length - count));
+    const end = Math.min(series.length, start + count);
+    const values = [];
+    for (let i = start; i < end; i++)
+        values.push({ time: series[i].time, value: series[i].iterateN_1 });
+    return values;
 }
 //# sourceMappingURL=PoincarePlotTooltipContent.js.map

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

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

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

@@ -1,4 +1,14 @@
-import { TooltipStyle } from "./tooltipUtils";
+import type { ReactElement } from "react";
+import { type TooltipStyle } from "./tooltipUtils";
+/**
+ * Options for displaying the tooltip content. These options are specific to this
+ * particular implementation of a tooltip content. The options effect are applied
+ * as shown below.
+ * ```
+ * series name
+ * formatters.x(x), formatters.y(y)
+ * ```
+ */
 /**
  * Properties for rendering the tooltip content. The properties are applied as
  * shown below.
@@ -6,24 +16,38 @@ import { TooltipStyle } from "./tooltipUtils";
  * series name
  * xFormatter, yFormatter
  * ```
+ * Below that, the spikes' statistics: the mean value and standard deviation (formatted by
+ * `yFormatter`), and the mean time between spikes (formatted by `intervalFormatter`).
  */
 export interface Props {
+    /** formats the spike's time */
     xFormatter?: (value: number) => string;
+    /** formats the values (the spike's value, and the mean and standard deviation of the values) */
     yFormatter?: (value: number) => string;
+    /**
+     * formats the mean time between spikes (a duration, in the times' units). Defaults to the
+     * `xFormatter`, so give it its own formatter when the times are formatted as something that isn't
+     * a duration, such as the time of day
+     */
+    intervalFormatter?: (interval: number) => string;
+    /** the style of the tooltip */
     style?: Partial<TooltipStyle>;
 }
 /**
- * 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 declare function RasterPlotTooltipContent(props: Props): null;
+export declare function RasterPlotTooltipContent(props: Props): ReactElement | null;
+//# sourceMappingURL=RasterPlotTooltipContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RasterPlotTooltipContent.d.ts","sourceRoot":"","sources":["../../../../src/app/charts/tooltips/RasterPlotTooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAOH,KAAK,YAAY,EAEpB,MAAM,gBAAgB,CAAC;AAUxB;;;;;;;;GAQG;AAQH;;;;;;;;;GASG;AACH,MAAM,WAAW,KAAK;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,gGAAgG;IAChG,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;CAChC;AAqBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,GAAG,IAAI,CAmF1E"}