@perses-dev/components 0.38.0 → 0.40.0

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -16,34 +16,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TimeChartTooltip", {
     enumerable: true,
-    get: ()=>TimeChartTooltip
+    get: function() {
+        return TimeChartTooltip;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
-const _tooltipModel = require("./tooltip-model");
+const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
+const _tooltipmodel = require("./tooltip-model");
 const _utils = require("./utils");
-const _nearbySeries = require("./nearby-series");
-const _tooltipHeader = require("./TooltipHeader");
-const _tooltipContent = require("./TooltipContent");
-function _interopRequireDefault(obj) {
+const _nearbyseries = require("./nearby-series");
+const _TooltipHeader = require("./TooltipHeader");
+const _TooltipContent = require("./TooltipContent");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , format , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const transform = (0, _react.useRef)('');
-    const mousePos = (0, _tooltipModel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
-    const isTooltipPinned = pinnedPos !== null;
+    const mousePos = (0, _tooltipmodel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useresizeobserver.default)();
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    var _chart_getWidth;
+    const chartWidth = (_chart_getWidth = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _chart_getWidth !== void 0 ? _chart_getWidth : _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const containerElement = containerId ? document.querySelector(containerId) : undefined;
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
@@ -51,39 +53,40 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
         transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
     }
     // Get series nearby the cursor and pass into tooltip content children.
-    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+    const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({
         mousePos,
         data,
         seriesMapping,
         pinnedPos,
         chart,
-        unit,
+        format,
         showAllSeries
     });
     if (nearbySeries.length === 0) {
         return null;
     }
     const totalSeries = data.length;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
         container: containerElement,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             ref: tooltipRef,
             sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos, maxHeight),
             style: {
                 transform: transform.current
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 spacing: 0.5,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),
                         onUnpinClick: onUnpinClick
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TooltipContent.TooltipContent, {
                         series: nearbySeries,
                         wrapLabels: wrapLabels
                     })

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TooltipContent", {
     enumerable: true,
-    get: ()=>TooltipContent
+    get: function() {
+        return TooltipContent;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _seriesInfo = require("./SeriesInfo");
+const _SeriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
     const { series , wrapLabels  } = props;
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
@@ -34,7 +36,7 @@ function TooltipContent(props) {
         return null;
     }
     // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: (theme)=>({
                 display: 'table',
                 padding: theme.spacing(0.5, 2)
@@ -42,7 +44,7 @@ function TooltipContent(props) {
         children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
             if (datumIdx === null || seriesIdx === null) return null;
             const key = seriesIdx.toString() + datumIdx.toString();
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesInfo.SeriesInfo, {
                 seriesName: seriesName,
                 y: y,
                 formattedY: formattedY,

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -16,43 +16,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TooltipHeader", {
     enumerable: true,
-    get: ()=>TooltipHeader
+    get: function() {
+        return TooltipHeader;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
-const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _Pin = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pin"));
+const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
 const _react = require("react");
-const _dateFns = require("date-fns");
-const _tooltipModel = require("./tooltip-model");
-function _interopRequireDefault(obj) {
+const _datefns = require("date-fns");
+const _tooltipmodel = require("./tooltip-model");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
-    var ref;
-    var ref1;
-    const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
+    var _nearbySeries_;
+    var _nearbySeries__date;
+    const seriesTimeMs = (_nearbySeries__date = (_nearbySeries_ = nearbySeries[0]) === null || _nearbySeries_ === void 0 ? void 0 : _nearbySeries_.date) !== null && _nearbySeries__date !== void 0 ? _nearbySeries__date : null;
     if (seriesTimeMs === null) {
         return null;
     }
     const formatTimeSeriesHeader = (timeMs)=>{
         const date = new Date(timeMs);
-        const formattedDate = (0, _dateFns.format)(date, 'MMM dd, yyyy - ');
-        const formattedTime = (0, _dateFns.format)(date, 'HH:mm:ss');
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        const formattedDate = (0, _datefns.format)(date, 'MMM dd, yyyy - ');
+        const formattedTime = (0, _datefns.format)(date, 'HH:mm:ss');
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                     variant: "caption",
                     sx: (theme)=>({
                             color: theme.palette.common.white
                         }),
                     children: formattedDate
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                     variant: "caption",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("strong", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
                         children: formattedTime
                     })
                 })
@@ -60,24 +62,24 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
         });
     };
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = totalSeries > 5;
-    const pinTooltipHelpText = isTooltipPinned ? 'Click to unpin' : 'Click chart to pin';
-    var ref2;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
+    var _theme_palette_designSystem_grey_;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: (theme)=>{
-            var ref;
+            var _theme_palette_designSystem;
             return {
                 width: '100%',
-                maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
+                maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
                 padding: theme.spacing(1.5, 2, 0.5, 2),
-                backgroundColor: (ref2 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref2 !== void 0 ? ref2 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
+                backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
                 position: 'sticky',
                 top: 0,
                 left: 0
             };
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     width: '100%',
                     display: 'flex',
@@ -87,14 +89,14 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                 },
                 children: [
                     formatTimeSeriesHeader(seriesTimeMs),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                         direction: "row",
                         gap: 1,
                         sx: {
                             marginLeft: 'auto'
                         },
                         children: [
-                            showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            showAllSeriesToggle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 gap: 0.5,
                                 alignItems: "center",
@@ -102,13 +104,13 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                     textAlign: 'right'
                                 },
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                         sx: {
                                             fontSize: 11
                                         },
                                         children: "Show All"
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                         checked: showAllSeries,
                                         size: "small",
                                         onChange: (_, checked)=>{
@@ -127,11 +129,11 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            enablePinning && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 alignItems: "center",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                         sx: {
                                             marginRight: 0.5,
                                             fontSize: 11,
@@ -139,7 +141,7 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                         },
                                         children: pinTooltipHelpText
                                     }),
-                                    isTooltipPinned ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pin.default, {
+                                    isTooltipPinned ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pin.default, {
                                         onClick: ()=>{
                                             if (onUnpinClick !== undefined) {
                                                 onUnpinClick();
@@ -149,7 +151,7 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                             fontSize: 16,
                                             cursor: 'pointer'
                                         }
-                                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {
+                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOutline.default, {
                                         sx: {
                                             fontSize: 16
                                         }
@@ -160,7 +162,7 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
                 sx: (theme)=>({
                         width: '100%',
                         borderColor: theme.palette.grey['500']

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -14,24 +14,26 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./LineChartTooltip"), exports);
-_exportStar(require("./SeriesInfo"), exports);
-_exportStar(require("./SeriesLabelsStack"), exports);
-_exportStar(require("./SeriesMarker"), exports);
-_exportStar(require("./TimeChartTooltip"), exports);
-_exportStar(require("./TooltipContent"), exports);
-_exportStar(require("./TooltipHeader"), exports);
-_exportStar(require("./nearby-series"), exports);
-_exportStar(require("./tooltip-model"), exports);
-_exportStar(require("./utils"), exports);
-function _exportStar(from, to) {
+_export_star(require("./LineChartTooltip"), exports);
+_export_star(require("./SeriesInfo"), exports);
+_export_star(require("./SeriesLabelsStack"), exports);
+_export_star(require("./SeriesMarker"), exports);
+_export_star(require("./TimeChartTooltip"), exports);
+_export_star(require("./TooltipContent"), exports);
+_export_star(require("./TooltipHeader"), exports);
+_export_star(require("./nearby-series"), exports);
+_export_star(require("./tooltip-model"), exports);
+_export_star(require("./utils"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -21,15 +21,33 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    INCREASE_NEARBY_SERIES_MULTIPLIER: ()=>INCREASE_NEARBY_SERIES_MULTIPLIER,
-    DYNAMIC_NEARBY_SERIES_MULTIPLIER: ()=>DYNAMIC_NEARBY_SERIES_MULTIPLIER,
-    SHOW_FEWER_SERIES_LIMIT: ()=>SHOW_FEWER_SERIES_LIMIT,
-    checkforNearbyTimeSeries: ()=>checkforNearbyTimeSeries,
-    legacyCheckforNearbySeries: ()=>legacyCheckforNearbySeries,
-    getNearbySeriesData: ()=>getNearbySeriesData,
-    legacyGetNearbySeriesData: ()=>legacyGetNearbySeriesData,
-    isWithinPercentageRange: ()=>isWithinPercentageRange,
-    getYBuffer: ()=>getYBuffer
+    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
+        return INCREASE_NEARBY_SERIES_MULTIPLIER;
+    },
+    DYNAMIC_NEARBY_SERIES_MULTIPLIER: function() {
+        return DYNAMIC_NEARBY_SERIES_MULTIPLIER;
+    },
+    SHOW_FEWER_SERIES_LIMIT: function() {
+        return SHOW_FEWER_SERIES_LIMIT;
+    },
+    checkforNearbyTimeSeries: function() {
+        return checkforNearbyTimeSeries;
+    },
+    legacyCheckforNearbySeries: function() {
+        return legacyCheckforNearbySeries;
+    },
+    getNearbySeriesData: function() {
+        return getNearbySeriesData;
+    },
+    legacyGetNearbySeriesData: function() {
+        return legacyGetNearbySeriesData;
+    },
+    isWithinPercentageRange: function() {
+        return isWithinPercentageRange;
+    },
+    getYBuffer: function() {
+        return getYBuffer;
+    }
 });
 const _core = require("@perses-dev/core");
 const _model = require("../model");
@@ -37,12 +55,13 @@ const _utils = require("../utils");
 const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
-function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit) {
+function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format) {
+    var _data_;
     const currentNearbySeriesData = [];
-    var ref;
-    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
-    var ref1;
-    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    var _pointInGrid_;
+    const cursorX = (_pointInGrid_ = pointInGrid[0]) !== null && _pointInGrid_ !== void 0 ? _pointInGrid_ : null;
+    var _pointInGrid_1;
+    const cursorY = (_pointInGrid_1 = pointInGrid[1]) !== null && _pointInGrid_1 !== void 0 ? _pointInGrid_1 : null;
     if (cursorX === null || cursorY === null) return currentNearbySeriesData;
     if (chart.dispatchAction === undefined) return currentNearbySeriesData;
     if (!Array.isArray(data)) return currentNearbySeriesData;
@@ -53,8 +72,12 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     const duplicateDatapoints = [];
     const totalSeries = data.length;
     const yValueCounts = new Map();
-    let closestTimestamp = null;
-    let closestDistance = Infinity;
+    // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+    const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
+    const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
+    if (closestTimestamp === null) {
+        return [];
+    }
     // find the timestamp with data that is closest to cursorX
     for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
         const currentSeries = seriesMapping[seriesIdx];
@@ -62,20 +85,11 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
         const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
         if (currentDataset == null) break;
         const currentDatasetValues = currentDataset.values;
-        // Determine closestTimestamp before checking whether it is equal to xValue. Consolidating
-        // with second currentDatasetValues loop below would result in duplicate nearby series
-        for (const [timestamp] of currentDatasetValues){
-            const distance = Math.abs(timestamp - cursorX);
-            if (distance < closestDistance) {
-                closestTimestamp = timestamp;
-                closestDistance = distance;
-            }
-        }
         if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
         const lineSeries = currentSeries;
         const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
-        var _color;
-        const markerColor = (_color = lineSeries.color) !== null && _color !== void 0 ? _color : '#000';
+        var _lineSeries_color;
+        const markerColor = (_lineSeries_color = lineSeries.color) !== null && _lineSeries_color !== void 0 ? _lineSeries_color : '#000';
         if (Array.isArray(data)) {
             for(let datumIdx = 0; datumIdx < currentDatasetValues.length; datumIdx++){
                 const nearbyTimeSeries = currentDatasetValues[datumIdx];
@@ -97,10 +111,10 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                             if (isClosestToCursor) {
                                 // shows as bold in tooltip, customize 'emphasis' options in getTimeSeries util
                                 emphasizedSeriesIndexes.push(seriesIdx);
-                                var ref2;
+                                var _yValueCounts_get;
                                 // Used to determine which datapoint to apply select styles to.
                                 // Accounts for cases where lines may be rendered directly on top of eachother.
-                                const duplicateValuesCount = (ref2 = yValueCounts.get(yValue)) !== null && ref2 !== void 0 ? ref2 : 0;
+                                const duplicateValuesCount = (_yValueCounts_get = yValueCounts.get(yValue)) !== null && _yValueCounts_get !== void 0 ? _yValueCounts_get : 0;
                                 yValueCounts.set(yValue, duplicateValuesCount + 1);
                                 if (duplicateValuesCount > 0) {
                                     duplicateDatapoints.push({
@@ -125,7 +139,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                                     seriesIndex: seriesIdx
                                 });
                             }
-                            const formattedY = (0, _core.formatValue)(yValue, unit);
+                            const formattedY = (0, _core.formatValue)(yValue, format);
                             currentNearbySeriesData.push({
                                 seriesIdx: seriesIdx,
                                 datumIdx: datumIdx,
@@ -147,12 +161,12 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     (0, _utils.batchDispatchNearbySeriesActions)(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints);
     return currentNearbySeriesData;
 }
-function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
+function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     const currentNearbySeriesData = [];
-    var ref;
-    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
-    var ref1;
-    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    var _pointInGrid_;
+    const cursorX = (_pointInGrid_ = pointInGrid[0]) !== null && _pointInGrid_ !== void 0 ? _pointInGrid_ : null;
+    var _pointInGrid_1;
+    const cursorY = (_pointInGrid_1 = pointInGrid[1]) !== null && _pointInGrid_1 !== void 0 ? _pointInGrid_1 : null;
     if (cursorX === null || cursorY === null) {
         return currentNearbySeriesData;
     }
@@ -166,12 +180,12 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
             if (currentSeries === undefined) break;
             if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
             const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
-            var _color;
-            const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
+            var _currentSeries_color;
+            const markerColor = (_currentSeries_color = currentSeries.color) !== null && _currentSeries_color !== void 0 ? _currentSeries_color : '#000';
             if (Array.isArray(currentSeries.data)) {
                 for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
-                    var _datumIdx;
-                    const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
+                    var _data_xAxis_datumIdx;
+                    const xValue = (_data_xAxis_datumIdx = data.xAxis[datumIdx]) !== null && _data_xAxis_datumIdx !== void 0 ? _data_xAxis_datumIdx : 0;
                     const yValue = currentSeries.data[datumIdx];
                     // ensure null values not displayed in tooltip
                     if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
@@ -198,7 +212,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
                             }
                             // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                             const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                            const formattedY = (0, _core.formatValue)(yValue, unit);
+                            const formattedY = (0, _core.formatValue)(yValue, format);
                             currentNearbySeriesData.push({
                                 seriesIdx: seriesIdx,
                                 datumIdx: datumIdx,
@@ -245,7 +259,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , unit , showAllSeries =false  }) {
+function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , format , showAllSeries =false  }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -278,11 +292,11 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
             totalSeries,
             showAllSeries
         });
-        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit);
+        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format);
     }
     return [];
 }
-function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
+function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , format , showAllSeries =false  }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -313,15 +327,15 @@ function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart ,
         totalSeries,
         showAllSeries
     });
-    var _x, _y;
+    var _mousePos_plotCanvas_x, _mousePos_plotCanvas_y;
     const pointInPixel = [
-        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
-        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
+        (_mousePos_plotCanvas_x = mousePos.plotCanvas.x) !== null && _mousePos_plotCanvas_x !== void 0 ? _mousePos_plotCanvas_x : 0,
+        (_mousePos_plotCanvas_y = mousePos.plotCanvas.y) !== null && _mousePos_plotCanvas_y !== void 0 ? _mousePos_plotCanvas_y : 0
     ];
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
         if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return legacyCheckforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+            return legacyCheckforNearbySeries(chartData, pointInGrid, yBuffer, chart, format);
         }
     }
     return [];

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -21,20 +21,57 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TOOLTIP_MIN_WIDTH: ()=>TOOLTIP_MIN_WIDTH,
-    TOOLTIP_MAX_WIDTH: ()=>TOOLTIP_MAX_WIDTH,
-    TOOLTIP_MAX_HEIGHT: ()=>TOOLTIP_MAX_HEIGHT,
-    TOOLTIP_LABELS_MAX_WIDTH: ()=>TOOLTIP_LABELS_MAX_WIDTH,
-    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: ()=>TOOLTIP_ADJUST_Y_POS_MULTIPLIER,
-    TOOLTIP_PADDING: ()=>TOOLTIP_PADDING,
-    FALLBACK_CHART_WIDTH: ()=>FALLBACK_CHART_WIDTH,
-    NEARBY_SERIES_DESCRIPTION: ()=>NEARBY_SERIES_DESCRIPTION,
-    EMPHASIZED_SERIES_DESCRIPTION: ()=>EMPHASIZED_SERIES_DESCRIPTION,
-    TOOLTIP_BG_COLOR_FALLBACK: ()=>TOOLTIP_BG_COLOR_FALLBACK,
-    TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
-    defaultCursorData: ()=>defaultCursorData,
-    emptyTooltipData: ()=>emptyTooltipData,
-    useMousePosition: ()=>useMousePosition
+    TOOLTIP_MIN_WIDTH: function() {
+        return TOOLTIP_MIN_WIDTH;
+    },
+    TOOLTIP_MAX_WIDTH: function() {
+        return TOOLTIP_MAX_WIDTH;
+    },
+    TOOLTIP_MAX_HEIGHT: function() {
+        return TOOLTIP_MAX_HEIGHT;
+    },
+    TOOLTIP_LABELS_MAX_WIDTH: function() {
+        return TOOLTIP_LABELS_MAX_WIDTH;
+    },
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
+        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+    },
+    TOOLTIP_PADDING: function() {
+        return TOOLTIP_PADDING;
+    },
+    FALLBACK_CHART_WIDTH: function() {
+        return FALLBACK_CHART_WIDTH;
+    },
+    NEARBY_SERIES_DESCRIPTION: function() {
+        return NEARBY_SERIES_DESCRIPTION;
+    },
+    EMPHASIZED_SERIES_DESCRIPTION: function() {
+        return EMPHASIZED_SERIES_DESCRIPTION;
+    },
+    TOOLTIP_BG_COLOR_FALLBACK: function() {
+        return TOOLTIP_BG_COLOR_FALLBACK;
+    },
+    TOOLTIP_DATE_FORMAT: function() {
+        return TOOLTIP_DATE_FORMAT;
+    },
+    defaultCursorData: function() {
+        return defaultCursorData;
+    },
+    emptyTooltipData: function() {
+        return emptyTooltipData;
+    },
+    useMousePosition: function() {
+        return useMousePosition;
+    },
+    DEFAULT_TOOLTIP_CONFIG: function() {
+        return DEFAULT_TOOLTIP_CONFIG;
+    },
+    PIN_TOOLTIP_HELP_TEXT: function() {
+        return PIN_TOOLTIP_HELP_TEXT;
+    },
+    UNPIN_TOOLTIP_HELP_TEXT: function() {
+        return UNPIN_TOOLTIP_HELP_TEXT;
+    }
 });
 const _react = require("react");
 const TOOLTIP_MIN_WIDTH = 375;
@@ -108,3 +145,9 @@ const useMousePosition = ()=>{
     }, []);
     return coords;
 };
+const DEFAULT_TOOLTIP_CONFIG = {
+    wrapLabels: true,
+    enablePinning: true
+};
+const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
+const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';