stream-charts 1.0.0 → 1.1.0

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

@@ -0,0 +1,190 @@
+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 { emptyIterateDatum } from "../series/iterateSeries";
+import { DataFrame } from "data-frame-ts";
+/**
+ * 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.
+ * ```
+ * series name
+ *            previous  current         next
+ * time        x_tb      x_ta       x_ta - x_tb
+ * value       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.
+ * @param props The properties describing the tooltip content
+ * @return null
+ * @constructor
+ */
+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 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
+ * @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
+ */
+function addTooltipContent(seriesName, time, tooltipData, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle) {
+    const [x, y] = mouseCoords;
+    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 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)
+        ];
+    }
+}
+//# sourceMappingURL=PoincarePlotTooltipContent.js.map

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

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

package/dist/src/app/charts/{RasterPlotTooltipContent.js → tooltips/RasterPlotTooltipContent.js}

@@ -1,19 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { categoryTooltipY, defaultTooltipStyle, tooltipX } from "./tooltipUtils";
 import * as d3 from "d3";
-import { formatTime, formatValue } from "./utils";
+import { formatTime, formatValue } from "../utils";
 import { useEffect, useMemo } from "react";
-import { useChart } from "./hooks/useChart";
+import { useChart } from "../hooks/useChart";
+import { usePlotDimensions } from "../hooks/usePlotDimensions";
 /**
  * Adds tooltip content that shows the series name and the (time, value) of the selected point.
  * ```
@@ -30,9 +20,12 @@ import { useChart } from "./hooks/useChart";
  * @constructor
  */
 export function RasterPlotTooltipContent(props) {
-    var _a = useChart(), chartId = _a.chartId, container = _a.container, margin = _a.margin, plotDimensions = _a.plotDimensions, registerTooltipContentProvider = _a.registerTooltipContentProvider, yAxesState = _a.yAxesState, axisAssignmentsFor = _a.axisAssignmentsFor;
-    var _b = props.xFormatter, xFormatter = _b === void 0 ? formatTime : _b, _c = props.yFormatter, yFormatter = _c === void 0 ? formatValue : _c, style = props.style;
-    var tooltipStyle = useMemo(function () { return (__assign(__assign({}, defaultTooltipStyle), style)); }, [style]);
+    const { chartId, container, tooltip, axes } = useChart();
+    const { registerTooltipContentProvider } = tooltip;
+    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
@@ -42,10 +35,10 @@ export function RasterPlotTooltipContent(props) {
     // 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(function () {
+    useEffect(() => {
         if (container) {
             // assemble the options for adding the tooltip
-            var options_1 = {
+            const options = {
                 formatters: {
                     x: xFormatter,
                     y: yFormatter,
@@ -58,13 +51,17 @@ export function RasterPlotTooltipContent(props) {
              *
              * @param seriesName The name of the series
              * @param time The mouse time
-             * @param series One point that has the (time, value) of the selected element
+             * @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
              */
-            function (seriesName, time, series, mouseCoords) {
-                var assignedAxis = yAxesState.axisFor(axisAssignmentsFor(seriesName).yAxis);
-                return addTooltipContent(seriesName, time, series[0], mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, assignedAxis, options_1);
+            (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);
             });
         }
     }, [
@@ -93,48 +90,47 @@ export function RasterPlotTooltipContent(props) {
  */
 function addTooltipContent(seriesName, time, selected, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, axis, options) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    var formatters = options.formatters;
-    var x = mouseCoords[0];
-    var spikeTime = selected[0], value = selected[1];
+    const { formatters } = options;
+    const [x,] = mouseCoords;
+    const { time: spikeTime, value } = selected;
     // display the neuron ID in the tooltip
-    var header = d3.select(container)
+    const header = d3.select(container)
         .append("text")
-        .attr('id', "tn" + spikeTime + "-" + seriesName + "-" + chartId)
+        .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(function () { return seriesName; });
+        .text(() => seriesName);
     // display the time (ms) and spike strength (mV) in the tooltip
-    var text = d3.select(container)
+    const text = d3.select(container)
         .append("text")
-        .attr('id', "t" + spikeTime + "-" + seriesName + "-" + chartId)
+        .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(function () { return formatters.x(spikeTime) + ", " + formatters.y(value); });
-    // .text(() => `${d3.format(",.0f")(spikeTime)} ms, ${d3.format(",.2f")(value)} mV`)
+        .text(() => `${formatters.x(spikeTime)}, ${formatters.y(value)}`);
     // calculate the max width and height of the text
-    var 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);
-    var headerTextHeight = ((_f = (_e = header.node()) === null || _e === void 0 ? void 0 : _e.getBBox()) === null || _f === void 0 ? void 0 : _f.height) || 0;
-    var idHeight = ((_h = (_g = text.node()) === null || _g === void 0 ? void 0 : _g.getBBox()) === null || _h === void 0 ? void 0 : _h.height) || 0;
-    var textHeight = headerTextHeight + idHeight;
+    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
-    var xCoord = tooltipX(x, tooltipWidth, plotDimensions, tooltipStyle, margin);
-    var yCoord = categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, margin, axis.categorySize);
-    var xTooltip = xCoord + tooltipStyle.paddingLeft;
-    var yTooltip = yCoord + tooltipStyle.paddingTop;
+    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', function () { return xTooltip; })
-        .attr('y', function () { return yTooltip - idHeight + textHeight; });
+        .attr('x', () => xTooltip)
+        .attr('y', () => yTooltip - idHeight + textHeight);
     // set the tooltip text (i.e. neuron ID) location
     text
-        .attr('x', function () { return xTooltip; })
-        .attr('y', function () { return yTooltip + textHeight; });
+        .attr('x', () => xTooltip)
+        .attr('y', () => yTooltip + textHeight);
     return { x: xCoord, y: yCoord, contentWidth: tooltipWidth, contentHeight: textHeight };
 }
 //# sourceMappingURL=RasterPlotTooltipContent.js.map

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

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

package/dist/src/app/charts/tooltips/ScatterPlotTooltipContent.js

@@ -0,0 +1,154 @@
+import { boundingPoints, defaultTooltipStyle, tooltipX, tooltipY } from "./tooltipUtils";
+import * as d3 from "d3";
+import { formatTime, formatTimeChange, formatValue, formatValueChange } from "../utils";
+import { useEffect, useMemo } from "react";
+import { useChart } from "../hooks/useChart";
+import { usePlotDimensions } from "../hooks/usePlotDimensions";
+import { emptyDatum } from "../series/timeSeries";
+/**
+ * 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.
+ * ```
+ * series name
+ *            before     after         ∆
+ * x-label     x_tb      x_ta       x_ta - x_tb
+ * 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.
+ * @param props The properties describing the tooltip content
+ * @return null
+ * @constructor
+ */
+export function ScatterPlotTooltipContent(props) {
+    const { chartId, container, tooltip } = useChart();
+    const { registerTooltipContentProvider } = tooltip;
+    const { margin, plotDimensions } = usePlotDimensions();
+    const { xLabel, yLabel, beforeHeader = 'before', afterHeader = 'after', deltaHeader = '∆', 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 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 = {
+                labels: { x: xLabel, y: yLabel },
+                headers: { before: beforeHeader, after: afterHeader, delta: deltaHeader },
+                formatters: {
+                    x: { value: xValueFormatter, change: xChangeFormatter },
+                    y: { value: yValueFormatter, change: yChangeFormatter },
+                }
+            };
+            // 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.series, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, options));
+        }
+    }, [
+        chartId, container, margin, plotDimensions, registerTooltipContentProvider,
+        xLabel, xChangeFormatter, xValueFormatter,
+        yLabel, yChangeFormatter, yValueFormatter,
+        beforeHeader, afterHeader, deltaHeader,
+        tooltipStyle
+    ]);
+    return null;
+}
+/**
+ * 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
+ * @param series The datum (t ms, s mV)
+ * @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
+ * @param options The options passed through the function that adds the tooltip content
+ * @return The width and text height of the tooltip content
+ */
+function addTooltipContent(seriesName, time, series, mouseCoords, chartId, container, margin, plotDimensions, tooltipStyle, options) {
+    const { labels, formatters } = options;
+    const [x, y] = mouseCoords;
+    const [lower, upper] = boundingPoints(series, time, value => value.time, () => emptyDatum());
+    // display the neuron ID in the tooltip
+    const header = d3.select(container)
+        .append("text")
+        .attr('id', `tn${time}-${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);
+    // create the table that shows the points that come before and after the mouse time, and the
+    // changes in the time and value
+    const table = d3.select(container)
+        .append("g")
+        .attr('id', `t${time}-${seriesName}-header-${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);
+    const headerRow = table.append('g').attr('font-weight', tooltipStyle.fontWeight + 550);
+    const hrLower = headerRow.append("text").text(() => options.headers.before);
+    const hrUpper = headerRow.append("text").text(() => options.headers.after);
+    const hrDelta = headerRow.append("text").text(() => options.headers.delta);
+    const trHeader = table.append("text").text(() => labels.x);
+    const trLower = table.append("text").text(() => formatters.x.value(lower.time));
+    const trUpper = table.append("text").text(() => formatters.x.value(upper.time));
+    const trDelta = table.append("text").text(() => formatters.x.change(lower.time, upper.time));
+    const vrHeader = table.append("text").text(() => labels.y);
+    const vrLower = table.append("text").text(() => formatters.y.value(lower.value));
+    const vrUpper = table.append("text").text(() => formatters.y.value(upper.value));
+    const vrDelta = table.append("text").text(() => formatters.y.change(lower.value, upper.value));
+    const textWidthOf = (elem) => { var _a, _b; return ((_b = (_a = elem.node()) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) || 0; };
+    const textHeightOf = (elem) => { var _a, _b; return ((_b = (_a = elem.node()) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.height) || 0; };
+    const spacesWidthFor = (spaces) => spaces * textWidthOf(hrLower) / 5;
+    // calculate the max width and height of the text
+    const tooltipWidth = Math.max(textWidthOf(header), spacesWidthFor(33));
+    const headerTextHeight = textHeightOf(header);
+    const headerRowHeight = textHeightOf(hrLower);
+    const timeRowHeight = textHeightOf(trHeader);
+    const valueRowHeight = textHeightOf(vrHeader);
+    const textHeight = headerTextHeight + headerRowHeight + timeRowHeight + valueRowHeight;
+    // set the header text location
+    const xCoord = tooltipX(x, tooltipWidth, plotDimensions, tooltipStyle, margin);
+    const yCoord = tooltipY(y, textHeight, plotDimensions, tooltipStyle, margin);
+    const xTooltip = xCoord + tooltipStyle.paddingLeft;
+    const yTooltip = yCoord + tooltipStyle.paddingTop;
+    header
+        .attr('x', () => xTooltip)
+        .attr('y', () => yTooltip - (headerRowHeight + timeRowHeight + valueRowHeight) + textHeight);
+    const hrRowY = yTooltip + headerTextHeight + headerRowHeight;
+    const hrLowerX = spacesWidthFor(14);
+    const hrUpperX = spacesWidthFor(24);
+    const hrDeltaX = spacesWidthFor(32);
+    hrLower.attr('x', () => xTooltip + hrLowerX - textWidthOf(hrLower)).attr('y', () => hrRowY);
+    hrUpper.attr('x', () => xTooltip + hrUpperX - textWidthOf(hrUpper)).attr('y', () => hrRowY);
+    hrDelta.attr('x', () => xTooltip + hrDeltaX - textWidthOf(hrDelta)).attr('y', () => hrRowY);
+    const trRowY = hrRowY + timeRowHeight;
+    trHeader.attr('x', () => xTooltip).attr('y', () => trRowY);
+    trLower.attr('x', () => xTooltip + hrLowerX - textWidthOf(trLower)).attr('y', () => trRowY);
+    trUpper.attr('x', () => xTooltip + hrUpperX - textWidthOf(trUpper)).attr('y', () => trRowY);
+    trDelta.attr('x', () => xTooltip + hrDeltaX - textWidthOf(trDelta)).attr('y', () => trRowY);
+    const vrRowY = trRowY + valueRowHeight;
+    vrHeader.attr('x', () => xTooltip).attr('y', () => vrRowY);
+    vrLower.attr('x', () => xTooltip + hrLowerX - textWidthOf(vrLower)).attr('y', () => vrRowY);
+    vrUpper.attr('x', () => xTooltip + hrUpperX - textWidthOf(vrUpper)).attr('y', () => vrRowY);
+    vrDelta.attr('x', () => xTooltip + hrDeltaX - textWidthOf(vrDelta)).attr('y', () => vrRowY);
+    return { x: xCoord, y: yCoord, contentWidth: tooltipWidth, contentHeight: textHeight };
+}
+//# sourceMappingURL=ScatterPlotTooltipContent.js.map

package/dist/src/app/charts/tooltips/ScatterPlotTooltipContent.js.map

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

package/dist/src/app/charts/{Tooltip.d.ts → tooltips/Tooltip.d.ts}

@@ -1,5 +1,7 @@
-/// <reference types="react" />
+import { JSX } from "react";
 import { TooltipStyle } from "./tooltipUtils";
+import { BaseAxis, SeriesStyle } from "../axes/axes";
+import { BaseAxisRange } from "../axes/BaseAxisRange";
 export interface Props {
     visible: boolean;
     style?: Partial<TooltipStyle>;
@@ -39,4 +41,4 @@ export interface Props {
  * @return null
  * @constructor
  */
-export declare function Tooltip(props: Props): JSX.Element;
+export declare function Tooltip<D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis>(props: Props): JSX.Element;