stream-charts 1.0.0 → 1.1.0

package/dist/src/app/charts/{Tooltip.js → tooltips/Tooltip.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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, useEffect, useMemo } from "react";
 import { defaultTooltipStyle, removeTooltip } from "./tooltipUtils";
 import * as d3 from "d3";
-import { useChart } from "./hooks/useChart";
+import { useChart } from "../hooks/useChart";
+import { usePlotDimensions } from "../hooks/usePlotDimensions";
 /**
  * Tooltip component triggered by mouse-over-series events. When mounted, the tooltip component
  * registers a mouse-over handler with the {@link useChart} hook using the
@@ -49,22 +39,27 @@ import { useChart } from "./hooks/useChart";
  * @constructor
  */
 export function Tooltip(props) {
-    var _a = useChart(), chartId = _a.chartId, container = _a.container, margin = _a.margin, plotDimensions = _a.plotDimensions, registerMouseOverHandler = _a.registerMouseOverHandler, unregisterMouseOverHandler = _a.unregisterMouseOverHandler, tooltipContentProvider = _a.tooltipContentProvider, registerMouseLeaveHandler = _a.registerMouseLeaveHandler, unregisterMouseLeaveHandler = _a.unregisterMouseLeaveHandler;
-    var visible = props.visible, style = props.style, children = props.children;
-    var tooltipStyle = useMemo(function () { return (__assign(__assign({}, defaultTooltipStyle), style)); }, [style]);
-    useEffect(function () {
-        var handlerId = "tooltip-" + chartId;
+    const { chartId, container, tooltip, mouse } = useChart();
+    const { tooltipContentProvider, setVisibilityState, } = tooltip;
+    const { margin, plotDimensions } = usePlotDimensions();
+    const { visible, style, children } = props;
+    const { registerMouseOverHandler, unregisterMouseOverHandler, registerMouseLeaveHandler, unregisterMouseLeaveHandler } = mouse;
+    const tooltipStyle = useMemo(() => (Object.assign(Object.assign({}, defaultTooltipStyle), style)), [style]);
+    // let the tooltip context know whether the tooltip is visible
+    setVisibilityState(visible);
+    useEffect(() => {
+        const handlerId = `tooltip-${chartId}`;
         if (visible && container) {
-            var contentProvider_1 = tooltipContentProvider();
-            if (contentProvider_1) {
+            const contentProvider = tooltipContentProvider();
+            if (contentProvider) {
                 // register this tooltip's mouse-over event handler with the useCharts hook
                 // so that the plots can call it when mouse-enter events are triggered (for
                 // example, a mouse-over a time-series in the plot).
-                registerMouseOverHandler(handlerId, (function (seriesName, time, series, mouseCoords) {
+                registerMouseOverHandler(handlerId, ((seriesName, time, tooltipData, mouseCoords, providerId) => {
                     // create the rounded rectangle for the tooltip's background
-                    var rect = d3.select(container)
+                    const rect = d3.select(container)
                         .append('rect')
-                        .attr('id', "r" + time + "-" + seriesName + "-" + chartId)
+                        .attr('id', `r${time}-${seriesName}-${chartId}`)
                         .attr('class', 'tooltip')
                         .attr('rx', tooltipStyle.borderRadius)
                         .attr('fill', tooltipStyle.backgroundColor)
@@ -72,17 +67,17 @@ export function Tooltip(props) {
                         .attr('stroke', tooltipStyle.borderColor)
                         .attr('stroke-width', tooltipStyle.borderWidth);
                     // call the callback to add the content
-                    var _a = contentProvider_1(seriesName, time, series, mouseCoords), x = _a.x, y = _a.y, contentWidth = _a.contentWidth, contentHeight = _a.contentHeight;
+                    const { x, y, contentWidth, contentHeight } = contentProvider(seriesName, time, tooltipData, mouseCoords, providerId);
                     // set the position, width, and height of the tooltip rect based on the text height and width and the padding
-                    rect.attr('x', function () { return x; })
-                        .attr('y', function () { return y; })
+                    rect.attr('x', () => x)
+                        .attr('y', () => y)
                         .attr('width', contentWidth + tooltipStyle.paddingLeft + tooltipStyle.paddingRight)
                         .attr('height', contentHeight + tooltipStyle.paddingTop + tooltipStyle.paddingBottom);
                 }));
-                registerMouseLeaveHandler(handlerId, function () { return removeTooltip(); });
+                registerMouseLeaveHandler(handlerId, () => removeTooltip());
             }
         }
-        return function () {
+        return () => {
             unregisterMouseOverHandler(handlerId);
             unregisterMouseLeaveHandler(handlerId);
         };
@@ -92,6 +87,6 @@ export function Tooltip(props) {
         unregisterMouseOverHandler, visible, registerMouseLeaveHandler,
         unregisterMouseLeaveHandler
     ]);
-    return _jsx(_Fragment, { children: cloneElement(children, props) }, void 0);
+    return _jsx(_Fragment, { children: cloneElement(children, props) });
 }
 //# sourceMappingURL=Tooltip.js.map

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

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

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

@@ -1,6 +1,6 @@
-import { TimeSeries } from "./plot";
-import { Dimensions, Margin } from "./margins";
-import { CategoryAxis } from "./axes";
+import { Series } from "../plots/plot";
+import { Dimensions, Margin } from "../styling/margins";
+import { OrdinalStringAxis } from "../axes/axes";
 /**
  * Properties for rendering the tooltip. This is the style for the container
  * of the content.
@@ -32,6 +32,7 @@ export interface TooltipStyle {
     backgroundColor: string;
     backgroundOpacity: number;
     borderColor: string;
+    borderOpacity: number;
     borderWidth: number;
     borderRadius: number;
     paddingLeft: number;
@@ -51,7 +52,7 @@ export interface TooltipDimensions {
  */
 export declare function removeTooltip(): void;
 /**
- * Calculates the x-coordinate of the lower left-hand side of the tooltip rectangle (obviously without
+ * Calculates the x-coordinate of the upper left-hand side of the tooltip rectangle (obviously without
  * "rounded corners"). Adjusts the x-coordinate so that tooltip is visible on the edges of the plot.
  * @param x The current x-coordinate of the mouse
  * @param textWidth The width of the tooltip text
@@ -62,9 +63,9 @@ export declare function removeTooltip(): void;
  */
 export declare function tooltipX(x: number, textWidth: number, plotDimensions: Dimensions, tooltipStyle: TooltipStyle, margin: Margin): number;
 /**
- * Calculates the y-coordinate of the lower-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
+ * Calculates the y-coordinate of the upper-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
  * so that the tooltip is visible on the upper edge of the plot
- * @param y The y-coordinate of the series
+ * @param y The y-coordinate of the mouse
  * @param textHeight The height of the header and neuron ID text
  * @param plotDimensions The dimensions of the plot
  * @param tooltipStyle The tooltip style information
@@ -73,23 +74,28 @@ export declare function tooltipX(x: number, textWidth: number, plotDimensions: D
  */
 export declare function tooltipY(y: number, textHeight: number, plotDimensions: Dimensions, tooltipStyle: TooltipStyle, margin: Margin): number;
 /**
- * Calculates the y-coordinate of the lower-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
- * so that the tooltip is visible on the upper edge of the plot
+ * Calculates the y-coordinate for the upper-left-hand the tooltip rectangle. Adjusts the y-coordinate so
+ * that the tooltip is visible on the upper and lower edges of the plot
  * @param seriesName The name of the series
  * @param textHeight The height of the header and neuron ID text
  * @param axis The category axis for determining the y-value of the tooltip
  * @param tooltipStyle The tooltip style
  * @param margin The plot margin
  * @param categoryHeight The height (in pixels) of the category
+ * @param plotDimensions The dimensions of the plot
  * @return The y-coordinate of the lower-left-hand corner of the tooltip rectangle
  */
-export declare function categoryTooltipY(seriesName: string, textHeight: number, axis: CategoryAxis, tooltipStyle: TooltipStyle, margin: Margin, categoryHeight: number): number;
+export declare function categoryTooltipY(seriesName: string, textHeight: number, axis: OrdinalStringAxis, tooltipStyle: TooltipStyle, margin: Margin, categoryHeight: number, plotDimensions: Dimensions): number;
 /**
  * Returns the (time, value) point that comes just before the mouse and just after the mouse
  * @param data The time-series data
- * @param time The time represented by the mouse's x-coordinate
+ * @param value The time represented by the mouse's x-coordinate
+ * @param xFrom A function that extracts the x-value from the datum
+ * @param emptyDatum A function that returns an empty datum
+ * @template D The type of the datum in the data-series
  * @return {[[number, number], [number, number]]} the (time, value) point that comes just before
  * the mouse and just after the mouse. If the mouse is after the last point, then the "after" point
  * is `[NaN, NaN]`. If the mouse is before the first point, then the "before" point is `[NaN, NaN]`.
  */
-export declare function boundingPoints(data: TimeSeries, time: number): [[number, number], [number, number]];
+export declare function boundingPoints<D>(data: Series<D>, value: number, xFrom: (value: D) => number, emptyDatum: () => D): [D, D];
+export declare function findPointAndNeighbors<D>(data: Series<D>, value: number, tolerance: number, xFrom: (value: D) => number, emptyDatum: () => D): [D, D, D, number];

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

@@ -1,13 +1,16 @@
 import * as d3 from "d3";
-export var defaultTooltipStyle = {
+export const defaultTooltipStyle = {
     visible: false,
     fontSize: 12,
-    fontColor: '#d2933f',
+    fontColor: 'rgba(10,31,58,0.99)',
+    // fontColor: '#d2933f',
+    // fontColor: '#202020',
     fontFamily: 'sans-serif',
     fontWeight: 250,
     backgroundColor: '#202020',
     backgroundOpacity: 0.8,
     borderColor: '#d2933f',
+    borderOpacity: 1,
     borderWidth: 1,
     borderRadius: 5,
     paddingLeft: 10,
@@ -22,7 +25,7 @@ export function removeTooltip() {
     d3.selectAll('.tooltip').remove();
 }
 /**
- * Calculates the x-coordinate of the lower left-hand side of the tooltip rectangle (obviously without
+ * Calculates the x-coordinate of the upper left-hand side of the tooltip rectangle (obviously without
  * "rounded corners"). Adjusts the x-coordinate so that tooltip is visible on the edges of the plot.
  * @param x The current x-coordinate of the mouse
  * @param textWidth The width of the tooltip text
@@ -32,15 +35,15 @@ export function removeTooltip() {
  * @return The x-coordinate of the lower left-hand side of the tooltip rectangle
  */
 export function tooltipX(x, textWidth, plotDimensions, tooltipStyle, margin) {
-    if (x + textWidth + tooltipStyle.paddingLeft + 10 > plotDimensions.width + margin.left) {
+    if (x > plotDimensions.width + margin.left - (textWidth + tooltipStyle.paddingLeft + tooltipStyle.paddingRight)) {
         return x - textWidth - margin.right + tooltipStyle.paddingRight + tooltipStyle.paddingLeft;
     }
     return x + tooltipStyle.paddingLeft;
 }
 /**
- * Calculates the y-coordinate of the lower-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
+ * Calculates the y-coordinate of the upper-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
  * so that the tooltip is visible on the upper edge of the plot
- * @param y The y-coordinate of the series
+ * @param y The y-coordinate of the mouse
  * @param textHeight The height of the header and neuron ID text
  * @param plotDimensions The dimensions of the plot
  * @param tooltipStyle The tooltip style information
@@ -48,22 +51,33 @@ export function tooltipX(x, textWidth, plotDimensions, tooltipStyle, margin) {
  * @return The y-coordinate of the lower-left-hand corner of the tooltip rectangle
  */
 export function tooltipY(y, textHeight, plotDimensions, tooltipStyle, margin) {
-    return Math.min(y + margin.top - textHeight, plotDimensions.height - margin.top + tooltipStyle.paddingTop + tooltipStyle.paddingBottom);
+    if (y > plotDimensions.height + margin.top - (textHeight + tooltipStyle.paddingTop + tooltipStyle.paddingBottom)) {
+        return plotDimensions.height + margin.top - (textHeight + tooltipStyle.paddingTop + tooltipStyle.paddingBottom);
+    }
+    return y + tooltipStyle.paddingTop;
 }
 /**
- * Calculates the y-coordinate of the lower-left-hand corner of the tooltip rectangle. Adjusts the y-coordinate
- * so that the tooltip is visible on the upper edge of the plot
+ * Calculates the y-coordinate for the upper-left-hand the tooltip rectangle. Adjusts the y-coordinate so
+ * that the tooltip is visible on the upper and lower edges of the plot
  * @param seriesName The name of the series
  * @param textHeight The height of the header and neuron ID text
  * @param axis The category axis for determining the y-value of the tooltip
  * @param tooltipStyle The tooltip style
  * @param margin The plot margin
  * @param categoryHeight The height (in pixels) of the category
+ * @param plotDimensions The dimensions of the plot
  * @return The y-coordinate of the lower-left-hand corner of the tooltip rectangle
  */
-export function categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, margin, categoryHeight) {
-    var y = (axis.scale(seriesName) || 0) + margin.top - tooltipStyle.paddingBottom;
-    return y > 0 ? y : y + tooltipStyle.paddingBottom + textHeight + tooltipStyle.paddingTop + categoryHeight;
+export function categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, margin, categoryHeight, plotDimensions) {
+    const y = axis.scale(seriesName) || 0;
+    const halfHeight = (tooltipStyle.paddingBottom + textHeight + tooltipStyle.paddingTop) / 2;
+    if (y < halfHeight) {
+        return margin.top;
+    }
+    if (y > plotDimensions.height + margin.top - halfHeight) {
+        return plotDimensions.height + margin.top - textHeight;
+    }
+    return y + margin.top - halfHeight + categoryHeight / 2;
 }
 /**
  * Returns the index of the data point whose time is the upper boundary on the specified
@@ -72,38 +86,51 @@ export function categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, mar
  * the specified array, then returns -1.
  * @param data The array of points from which to select the
  * boundary.
- * @param time The time for which to find the bounding points
+ * @param value The time for which to find the bounding points
+ * @param xFrom A function that extracts the x-value from the datum
+ * @template D The type of the datum in the data-series
  * @return The index of the upper boundary.
  */
-function boundingPointsIndex(data, time) {
-    var length = data.length;
-    if (time > data[length - 1][0]) {
+function boundingPointsIndex(data, value, xFrom) {
+    const length = data.length;
+    if (value > xFrom(data[length - 1])) {
         return length;
     }
-    if (time < data[0][0]) {
+    if (value < xFrom(data[0])) {
         return 0;
     }
-    return data.findIndex(function (value, index, array) {
-        var lowerIndex = Math.max(0, index - 1);
-        return array[lowerIndex][0] <= time && time <= array[index][0];
+    return data.findIndex((_, index, array) => {
+        const lowerIndex = Math.max(0, index - 1);
+        return xFrom(array[lowerIndex]) <= value && value <= xFrom(array[index]);
     });
 }
 /**
  * Returns the (time, value) point that comes just before the mouse and just after the mouse
  * @param data The time-series data
- * @param time The time represented by the mouse's x-coordinate
+ * @param value The time represented by the mouse's x-coordinate
+ * @param xFrom A function that extracts the x-value from the datum
+ * @param emptyDatum A function that returns an empty datum
+ * @template D The type of the datum in the data-series
  * @return {[[number, number], [number, number]]} the (time, value) point that comes just before
  * the mouse and just after the mouse. If the mouse is after the last point, then the "after" point
  * is `[NaN, NaN]`. If the mouse is before the first point, then the "before" point is `[NaN, NaN]`.
  */
-export function boundingPoints(data, time) {
-    var upperIndex = boundingPointsIndex(data, time);
+export function boundingPoints(data, value, xFrom, emptyDatum) {
+    const upperIndex = boundingPointsIndex(data, value, xFrom);
     if (upperIndex <= 0) {
-        return [[NaN, NaN], data[0]];
+        return [emptyDatum(), data[0]];
     }
     if (upperIndex >= data.length) {
-        return [data[data.length - 1], [NaN, NaN]];
+        return [data[data.length - 1], emptyDatum()];
     }
     return [data[upperIndex - 1], data[upperIndex]];
 }
+export function findPointAndNeighbors(data, value, tolerance, xFrom, emptyDatum) {
+    // find the index of the point
+    const index = data.findIndex((_, index, array) => Math.abs(xFrom(array[index]) - value) <= tolerance);
+    const point = index > -1 ? data[index] : emptyDatum();
+    const lower = (index > 0) ? data[index - 1] : emptyDatum();
+    const upper = (index < data.length - 1) ? data[index + 1] : emptyDatum();
+    return [lower, point, upper, index];
+}
 //# sourceMappingURL=tooltipUtils.js.map

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

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

package/dist/src/app/charts/{Tracker.d.ts → trackers/Tracker.d.ts}

@@ -1,24 +1,25 @@
 import { TrackerLabelFont, TrackerStyle } from "./trackerUtils";
-import { AxisLocation } from "./axes";
+import { AxisLocation } from "../axes/axes";
 export interface TrackerAxisInfo {
     x: number;
     axisLocation: AxisLocation;
 }
-export declare type TrackerAxisUpdate = Map<string, TrackerAxisInfo>;
+export type TrackerAxisUpdate = Map<string, TrackerAxisInfo>;
 export declare enum TrackerLabelLocation {
     Nowhere = 0,
-    WithMouse = 1,
-    ByAxes = 2
+    ByAxis = 1
 }
 interface Props {
     visible: boolean;
+    trackerAxis?: AxisLocation;
     labelLocation?: TrackerLabelLocation;
+    labelFormatter?: (value: number) => string;
     style?: Partial<TrackerStyle>;
     font?: Partial<TrackerLabelFont>;
     onTrackerUpdate?: (update: TrackerAxisUpdate) => void;
 }
 /**
- * A tracker line that displays or reports the time at the mouse location. The tracker
+ * A tracker line that displays or reports the x or y coordinates at the mouse location. The tracker
  * handles single axes and dual axes.
  * @param props The tracker control properties
  * @return null component

package/dist/src/app/charts/trackers/Tracker.js

@@ -0,0 +1,60 @@
+import { noop } from "../utils";
+import { useChart } from "../hooks/useChart";
+import { defaultTrackerLabelFont, defaultTrackerStyle, removeTrackerControl, trackerControlInstance } from "./trackerUtils";
+import * as d3 from "d3";
+import { useEffect, useMemo, useRef } from "react";
+import { AxisLocation } from "../axes/axes";
+import { usePlotDimensions } from "../hooks/usePlotDimensions";
+export var TrackerLabelLocation;
+(function (TrackerLabelLocation) {
+    TrackerLabelLocation[TrackerLabelLocation["Nowhere"] = 0] = "Nowhere";
+    TrackerLabelLocation[TrackerLabelLocation["ByAxis"] = 1] = "ByAxis";
+})(TrackerLabelLocation || (TrackerLabelLocation = {}));
+/**
+ * A tracker line that displays or reports the x or y coordinates at the mouse location. The tracker
+ * handles single axes and dual axes.
+ * @param props The tracker control properties
+ * @return null component
+ * @constructor
+ */
+export function Tracker(props) {
+    const { visible, trackerAxis = AxisLocation.Bottom, labelLocation = TrackerLabelLocation.ByAxis, labelFormatter, style, font, onTrackerUpdate = noop } = props;
+    const { chartId, container, axes, backgroundColor } = useChart();
+    const { xAxesState, yAxesState } = axes;
+    const axisState = (trackerAxis === AxisLocation.Bottom || trackerAxis === AxisLocation.Top) ?
+        xAxesState :
+        yAxesState;
+    const { plotDimensions, margin } = usePlotDimensions();
+    const trackerStyle = useMemo(() => (Object.assign(Object.assign({}, defaultTrackerStyle), style)), [style]);
+    const trackerFont = useMemo(() => (Object.assign(Object.assign({}, defaultTrackerLabelFont), font)), [font]);
+    const trackerRef = useRef(undefined);
+    const axisRef = useRef(new Map());
+    useEffect(() => {
+        const axes = new Map();
+        axisState.axes.forEach((axis, id) => axes.set(id, axis));
+        axisRef.current = axes;
+    }, [axisState]);
+    // when the container, tracker-control function, or visibility change, then we need to update the
+    // tracker control
+    useEffect(() => {
+        if (container) {
+            const svg = d3.select(container);
+            if (visible && container) {
+                const trackerLabels = new Map(Array.from(axisRef.current.values()).map(axis => {
+                    const formatter = labelFormatter !== null && labelFormatter !== void 0 ? labelFormatter : ((value) => labelLocation === TrackerLabelLocation.Nowhere ?
+                        "" :
+                        `${d3.format(",.0f")(value)}`);
+                    return [axis, formatter];
+                }));
+                trackerRef.current = trackerControlInstance(chartId, container, svg, plotDimensions, margin, trackerStyle, trackerFont, trackerLabels, labelLocation, onTrackerUpdate, trackerAxis, backgroundColor);
+            }
+            // if the tracker was defined and is now no longer defined (i.e., props changed, then remove the tracker)
+            else if (!visible && trackerRef.current !== undefined) {
+                removeTrackerControl(svg, trackerAxis);
+                trackerRef.current = undefined;
+            }
+        }
+    }, [backgroundColor, chartId, container, labelFormatter, labelLocation, margin, onTrackerUpdate, plotDimensions, trackerAxis, trackerFont, trackerStyle, visible]);
+    return null;
+}
+//# sourceMappingURL=Tracker.js.map

package/dist/src/app/charts/trackers/Tracker.js.map

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

package/dist/src/app/charts/{trackerUtils.d.ts → trackers/trackerUtils.d.ts}

@@ -1,6 +1,6 @@
-import { SvgSelection, TrackerSelection } from "./d3types";
-import { Dimensions, Margin } from "./margins";
-import { ContinuousNumericAxis } from "./axes";
+import { SvgSelection, TrackerSelection } from "../d3types";
+import { Dimensions, Margin } from "../styling/margins";
+import { AxisLocation, ContinuousNumericAxis } from "../axes/axes";
 import { TrackerAxisUpdate, TrackerLabelLocation } from "./Tracker";
 export interface TrackerLabelFont {
     size: number;
@@ -16,7 +16,8 @@ export interface TrackerStyle {
 }
 export declare const defaultTrackerStyle: TrackerStyle;
 /**
- * Creates or returns the existing SVG elements for displaying a tracker line
+ * Creates or returns the existing SVG elements for displaying a tracker line that is either
+ * vertical (for x-axes) or horizontal (for y-axes).
  * @param chartId The ID of the chart
  * @param container The SVG container
  * @param svg The SVG selection
@@ -26,12 +27,16 @@ export declare const defaultTrackerStyle: TrackerStyle;
  * @param labelFont The font used for the axis labels
  * @param label A function that returns the tracker label string for a given x-value
  * @param labelStyle The location style for the tracker (i.e. on the axes, next to the mouse, none shown)
- * @param onTrackerUpdate A callback function the accepts the current tracker's axis information
+ * @param onTrackerUpdate A callback function that accepts the current tracker's axis information
+ * @param [axisLocation = AxisLocation.Bottom] The optional location of the axis for which the tracker is to
+ * be shown. Default is bottom.
+ * @param backgroundColor The background color of the tracker label
  * @return The tracker selection
  */
-export declare function trackerControlInstance(chartId: number, container: SVGSVGElement, svg: SvgSelection, plotDimensions: Dimensions, margin: Margin, style: TrackerStyle, labelFont: TrackerLabelFont, label: Map<ContinuousNumericAxis, (x: number) => string>, labelStyle: TrackerLabelLocation, onTrackerUpdate: (update: TrackerAxisUpdate) => void): TrackerSelection;
+export declare function trackerControlInstance(chartId: number, container: SVGSVGElement, svg: SvgSelection, plotDimensions: Dimensions, margin: Margin, style: TrackerStyle, labelFont: TrackerLabelFont, label: Map<ContinuousNumericAxis, (x: number) => string>, labelStyle: TrackerLabelLocation, onTrackerUpdate: (update: TrackerAxisUpdate) => void, axisLocation: AxisLocation | undefined, backgroundColor: string): TrackerSelection;
 /**
  * Removes the tracker control from the chart
- * @param svg The svg selection holding the tracker contol
+ * @param svg The svg selection holding the tracker control
+ * @param axisLocation The location of the axis for which the tracker is to be removed.
  */
-export declare function removeTrackerControl(svg: SvgSelection): void;
+export declare function removeTrackerControl(svg: SvgSelection, axisLocation: AxisLocation): void;