@perses-dev/components 0.38.0 → 0.39.0

package/dist/cjs/StatChart/StatChart.js

@@ -27,7 +27,7 @@ const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 const _echart = require("../EChart");
 const _calculateFontSize = require("./calculateFontSize");
 function _interopRequireDefault(obj) {
@@ -50,7 +50,7 @@ const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
     var ref, ref1;
     const { width , height , data , unit , color , sparkline , showSeriesName , valueFontSize  } = props;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartsTheme = (0, _chartsProvider.useChartsTheme)();
     let formattedValue = '';
     if (data.calculatedValue === null) {
         formattedValue = 'null';

package/dist/cjs/StatChart/calculateFontSize.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "useOptimalFontSize", {
     enumerable: true,
     get: ()=>useOptimalFontSize
 });
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 let canvasContext;
 function getGlobalCanvasContext() {
     if (!canvasContext) {
@@ -31,12 +31,12 @@ function getGlobalCanvasContext() {
 }
 function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
     const ctx = getGlobalCanvasContext();
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const { echartsTheme  } = (0, _chartsProvider.useChartsTheme)();
     // if user has selected a font size in the settings, use it instead of calculating the optimal size
     if (fontSizeOverride !== undefined) {
         return Number(fontSizeOverride);
     }
-    const textStyle = chartsTheme.echartsTheme.textStyle;
+    const textStyle = echartsTheme.textStyle;
     var ref;
     const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;
     var ref1;

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _material = require("@mui/material");
 const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 const _colorPicker = require("../ColorPicker");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -38,7 +38,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsProvider.useChartsTheme)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(ColorIconButton, {

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -24,7 +24,7 @@ const _immer = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _material = require("@mui/material");
 const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _system = require("@mui/system");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
 const _infoTooltip = require("../InfoTooltip");
 const _thresholdColorPicker = require("./ThresholdColorPicker");
@@ -75,7 +75,8 @@ function _interopRequireWildcard(obj, nodeInterop) {
 }
 const DEFAULT_STEP = 10;
 function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartsTheme = (0, _chartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor , palette  } ,  } = chartsTheme;
     var ref;
     const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
     const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);

package/dist/cjs/TimeChart/TimeChart.js

@@ -22,6 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
 const _dateFnsTz = require("date-fns-tz");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
@@ -29,8 +30,8 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _model = require("../model");
+const _chartsProvider = require("../context/ChartsProvider");
 const _utils = require("../utils");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
@@ -53,14 +54,14 @@ function _interopRequireDefault(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _chartsProvider.useChartsContext)();
+    const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
+    const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
@@ -169,10 +170,14 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 ]
             });
         });
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
         var _rangeMs;
         const option = {
             dataset: dataset,
-            series: seriesMapping,
+            series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
                 min: isLocalTimeZone ? timeScale.startMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.startMs, timeZone),
@@ -185,13 +190,14 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                     snap: false
                 }
             },
-            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            yAxis: (0, _utils.getFormattedAxis)(yAxis, unit),
             animation: false,
             tooltip: {
                 show: true,
-                trigger: isStackedBar ? 'item' : 'axis',
-                // ECharts tooltip content hidden since we use custom tooltip instead
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
                 appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
@@ -216,8 +222,6 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             return __experimentalEChartsOptionsOverride(option);
         }
         return option;
-    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         data,
         seriesMapping,
@@ -229,60 +233,101 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         __experimentalEChartsOptionsOverride,
         noDataVariant,
         timeZone,
-        tooltipPinnedCoords,
-        isStackedBar
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
+    ]);
+    // Update adjacent charts so tooltip is unpinned when current chart is clicked.
+    (0, _react.useEffect)(()=>{
+        // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
+        // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
+        const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
+        if (multipleTooltipsPinned) {
+            if (!(0, _isEqual.default)(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
+                setTooltipPinnedCoords(null);
+                if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
+                    setPinnedCrosshair(null);
+                }
+            }
+        }
+    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        lastTooltipPinnedCoords,
+        seriesMapping
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
+        // onContextMenu={(e) => {
+        //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
+        //   e.preventDefault(); // Prevent the default behaviour when right clicked
+        // }}
         onClick: (e)=>{
-            var ref;
+            // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
+            const isControlKeyPressed = e.ctrlKey || e.metaKey;
+            if (isControlKeyPressed) {
+                e.preventDefault();
+            }
             // Determine where on chart canvas to plot pinned crosshair as markLine.
             const pointInGrid = (0, _utils.getPointInGrid)(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
             if (pointInGrid === null) {
                 return;
             }
-            // Clear previously set pinned crosshair
-            const isCrosshairPinned = ((ref = seriesMapping[seriesMapping.length - 1]) === null || ref === void 0 ? void 0 : ref.name) === _graph.PINNED_CROSSHAIR_SERIES_NAME;
-            if (tooltipPinnedCoords !== null && isCrosshairPinned) {
-                seriesMapping.pop();
-            } else if (seriesMapping.length !== data.length + 1) {
-                // Only add pinned crosshair line series when there is not one already in seriesMapping.
-                const pinnedCrosshair = (0, _merge.default)(_graph.DEFAULT_PINNED_CROSSHAIR, {
-                    markLine: {
-                        data: [
-                            {
-                                xAxis: pointInGrid[0]
-                            }
-                        ]
-                    }
-                });
-                seriesMapping.push(pinnedCrosshair);
-            }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
+                // Pin tooltip and update shared charts context to remember these coordinates.
+                const pinnedPos = {
+                    page: {
+                        x: e.pageX,
+                        y: e.pageY
+                    },
+                    client: {
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    plotCanvas: {
+                        x: e.nativeEvent.offsetX,
+                        y: e.nativeEvent.offsetY
+                    },
+                    target: e.target
+                };
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
-                        return {
-                            page: {
-                                x: e.pageX,
-                                y: e.pageY
-                            },
-                            client: {
-                                x: e.clientX,
-                                y: e.clientY
-                            },
-                            plotCanvas: {
-                                x: e.nativeEvent.offsetX,
-                                y: e.nativeEvent.offsetY
-                            },
-                            target: e.target
-                        };
+                        return pinnedPos;
+                    } else {
+                        setPinnedCrosshair(null);
+                        return null;
+                    }
+                });
+                setPinnedCrosshair((current)=>{
+                    // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                    if (current === null) {
+                        var ref;
+                        const cursorX = pointInGrid[0];
+                        // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+                        const firstTimeSeriesValues = (ref = data[0]) === null || ref === void 0 ? void 0 : ref.values;
+                        const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
+                        // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
+                        const pinnedCrosshair = (0, _merge.default)({}, _model.DEFAULT_PINNED_CROSSHAIR, {
+                            markLine: {
+                                data: [
+                                    {
+                                        xAxis: closestTimestamp
+                                    }
+                                ]
+                            }
+                        });
+                        return pinnedCrosshair;
                     } else {
+                        // Clear previously set pinned crosshair
                         return null;
                     }
                 });
+                if (!isControlKeyPressed) {
+                    setLastTooltipPinnedCoords(pinnedPos);
+                }
             }
         },
         onMouseDown: (e)=>{
@@ -341,12 +386,14 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{
+                    // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);
-                    // Clear previously set pinned crosshair
-                    seriesMapping.pop();
+                    // Clear previously set pinned crosshair.
+                    setPinnedCrosshair(null);
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -32,12 +32,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
     const transform = (0, _react.useRef)('');
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -102,6 +102,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -32,12 +32,12 @@ function _interopRequireDefault(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 , unit , 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 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;
@@ -78,6 +78,7 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -30,7 +30,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , 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;
@@ -60,8 +60,8 @@ 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';
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? _tooltipModel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipModel.PIN_TOOLTIP_HELP_TEXT;
     var ref2;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: (theme)=>{
@@ -127,7 +127,7 @@ 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: [

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

@@ -38,11 +38,12 @@ const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show i
 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) {
-    const currentNearbySeriesData = [];
     var ref;
-    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    const currentNearbySeriesData = [];
     var ref1;
-    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    const cursorX = (ref1 = pointInGrid[0]) !== null && ref1 !== void 0 ? ref1 : null;
+    var ref2;
+    const cursorY = (ref2 = pointInGrid[1]) !== null && ref2 !== void 0 ? ref2 : null;
     if (cursorX === null || cursorY === null) return currentNearbySeriesData;
     if (chart.dispatchAction === undefined) return currentNearbySeriesData;
     if (!Array.isArray(data)) return currentNearbySeriesData;
@@ -53,8 +54,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 = (ref = data[0]) === null || ref === void 0 ? void 0 : ref.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,15 +67,6 @@ 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() : '';
@@ -97,10 +93,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 ref3;
                                 // 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 = (ref3 = yValueCounts.get(yValue)) !== null && ref3 !== void 0 ? ref3 : 0;
                                 yValueCounts.set(yValue, duplicateValuesCount + 1);
                                 if (duplicateValuesCount > 0) {
                                     duplicateDatapoints.push({

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

@@ -34,7 +34,10 @@ _export(exports, {
     TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
     defaultCursorData: ()=>defaultCursorData,
     emptyTooltipData: ()=>emptyTooltipData,
-    useMousePosition: ()=>useMousePosition
+    useMousePosition: ()=>useMousePosition,
+    DEFAULT_TOOLTIP_CONFIG: ()=>DEFAULT_TOOLTIP_CONFIG,
+    PIN_TOOLTIP_HELP_TEXT: ()=>PIN_TOOLTIP_HELP_TEXT,
+    UNPIN_TOOLTIP_HELP_TEXT: ()=>UNPIN_TOOLTIP_HELP_TEXT
 });
 const _react = require("react");
 const TOOLTIP_MIN_WIDTH = 375;
@@ -108,3 +111,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';

package/dist/cjs/context/{ChartsThemeProvider.js → ChartsProvider.js}

@@ -21,8 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ChartsThemeProvider: ()=>ChartsThemeProvider,
+    ChartsProvider: ()=>ChartsProvider,
     ChartsThemeContext: ()=>ChartsThemeContext,
+    useChartsContext: ()=>useChartsContext,
     useChartsTheme: ()=>useChartsTheme
 });
 const _jsxRuntime = require("react/jsx-runtime");
@@ -66,18 +67,36 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function ChartsThemeProvider(props) {
-    const { children , chartsTheme  } = props;
+function ChartsProvider(props) {
+    const { children , chartsTheme , enablePinning =false  } = props;
+    const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = (0, _react.useState)(null);
+    const ctx = (0, _react.useMemo)(()=>{
+        return {
+            chartsTheme,
+            enablePinning,
+            lastTooltipPinnedCoords,
+            setLastTooltipPinnedCoords
+        };
+    }, [
+        chartsTheme,
+        enablePinning,
+        lastTooltipPinnedCoords,
+        setLastTooltipPinnedCoords
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ChartsThemeContext.Provider, {
-        value: chartsTheme,
+        value: ctx,
         children: children
     });
 }
 const ChartsThemeContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
-function useChartsTheme() {
+function useChartsContext() {
     const ctx = (0, _react.useContext)(ChartsThemeContext);
     if (ctx === undefined) {
         throw new Error('No ChartsThemeContext found. Did you forget a Provider?');
     }
     return ctx;
 }
+function useChartsTheme() {
+    const ctx = useChartsContext();
+    return ctx.chartsTheme;
+}

package/dist/cjs/context/index.js

@@ -0,0 +1,30 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ChartsProvider"), exports);
+_exportStar(require("./SnackbarProvider"), exports);
+_exportStar(require("./TimeZoneProvider"), exports);
+function _exportStar(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];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/index.js

@@ -40,9 +40,7 @@ _exportStar(require("./TimeChart"), exports);
 _exportStar(require("./TimeSeriesTooltip"), exports);
 _exportStar(require("./UnitSelector"), exports);
 _exportStar(require("./YAxisLabel"), exports);
-_exportStar(require("./context/ChartsThemeProvider"), exports);
-_exportStar(require("./context/TimeZoneProvider"), exports);
-_exportStar(require("./context/SnackbarProvider"), exports);
+_exportStar(require("./context"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);

package/dist/cjs/test-utils/theme.js

@@ -14,28 +14,41 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "testChartsTheme", {
-    enumerable: true,
-    get: ()=>testChartsTheme
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    testChartsTheme: ()=>testChartsTheme,
+    mockChartsContext: ()=>mockChartsContext
 });
-const testChartsTheme = {
-    echartsTheme: {},
-    noDataOption: {},
-    sparkline: {
-        width: 1,
-        color: '#000000'
+const _material = require("@mui/material");
+const _utils = require("../utils");
+// app specific echarts option overrides
+const TEST_ECHARTS_THEME_OVERRIDES = {
+    textStyle: {
+        fontFamily: 'Lato'
     },
-    container: {
-        padding: {
-            default: 12
+    categoryAxis: {
+        splitLine: {
+            show: false
         }
     },
-    thresholds: {
-        defaultColor: '#59CC8D',
-        palette: [
-            '#438FEB',
-            '#FFB249',
-            '#EE6C6C'
-        ]
+    timeAxis: {
+        splitLine: {
+            show: false
+        }
+    },
+    bar: {
+        barCategoryGap: 2
     }
 };
+const testChartsTheme = (0, _utils.generateChartsTheme)((0, _material.createTheme)({}), TEST_ECHARTS_THEME_OVERRIDES);
+const mockChartsContext = {
+    chartsTheme: testChartsTheme,
+    enablePinning: false,
+    lastTooltipPinnedCoords: null,
+    setLastTooltipPinnedCoords: ()=>null
+};