@perses-dev/components 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

@@ -21,28 +21,48 @@ 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
+    DYNAMIC_NEARBY_SERIES_MULTIPLIER: function() {
+        return DYNAMIC_NEARBY_SERIES_MULTIPLIER;
+    },
+    INCREASE_NEARBY_SERIES_MULTIPLIER: function() {
+        return INCREASE_NEARBY_SERIES_MULTIPLIER;
+    },
+    SHOW_FEWER_SERIES_LIMIT: function() {
+        return SHOW_FEWER_SERIES_LIMIT;
+    },
+    checkforNearbyTimeSeries: function() {
+        return checkforNearbyTimeSeries;
+    },
+    getNearbySeriesData: function() {
+        return getNearbySeriesData;
+    },
+    getYBuffer: function() {
+        return getYBuffer;
+    },
+    isWithinPercentageRange: function() {
+        return isWithinPercentageRange;
+    },
+    legacyCheckforNearbySeries: function() {
+        return legacyCheckforNearbySeries;
+    },
+    legacyGetNearbySeriesData: function() {
+        return legacyGetNearbySeriesData;
+    }
 });
 const _core = require("@perses-dev/core");
 const _model = require("../model");
 const _utils = require("../utils");
+const _tooltipmodel = require("./tooltip-model");
 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 +73,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 _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    }
     // find the timestamp with data that is closest to cursorX
     for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
         const currentSeries = seriesMapping[seriesIdx];
@@ -62,20 +86,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 +112,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 +140,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 +162,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 +181,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 +213,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,8 +260,8 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , unit , showAllSeries =false  }) {
-    if (chart === undefined || mousePos === null) return [];
+function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart, format, showAllSeries = false }) {
+    if (chart === undefined || mousePos === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
     if (mousePos.target !== null) {
@@ -266,8 +281,9 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
         mousePos = pinnedPos;
         cursorTargetMatchesChart = true;
     }
-    if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined || data === null) return [];
+    if (cursorTargetMatchesChart === false || data === null || chart['_model'] === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    // mousemove position undefined when not hovering over chart canvas
+    if (mousePos.plotCanvas.x === undefined || mousePos.plotCanvas.y === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     const pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, mousePos.plotCanvas.y, chart);
     if (pointInGrid !== null) {
         const chartModel = chart['_model'];
@@ -278,11 +294,12 @@ 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 [];
+    // no nearby series found
+    return _tooltipmodel.EMPTY_TOOLTIP_DATA;
 }
-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,26 +330,26 @@ 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 [];
 }
-function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {
+function isWithinPercentageRange({ valueToCheck, baseValue, percentage }) {
     const range = percentage / 100 * baseValue;
     const lowerBound = baseValue - range;
     const upperBound = baseValue + range;
     return valueToCheck >= lowerBound && valueToCheck <= upperBound;
 }
-function getYBuffer({ yInterval , totalSeries , showAllSeries =false  }) {
+function getYBuffer({ yInterval, totalSeries, showAllSeries = false }) {
     if (showAllSeries) {
         return yInterval * 10; // roughly correlates with grid so entire canvas is searched
     }

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

@@ -21,23 +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,
-    DEFAULT_TOOLTIP_CONFIG: ()=>DEFAULT_TOOLTIP_CONFIG,
-    PIN_TOOLTIP_HELP_TEXT: ()=>PIN_TOOLTIP_HELP_TEXT,
-    UNPIN_TOOLTIP_HELP_TEXT: ()=>UNPIN_TOOLTIP_HELP_TEXT
+    DEFAULT_TOOLTIP_CONFIG: function() {
+        return DEFAULT_TOOLTIP_CONFIG;
+    },
+    EMPHASIZED_SERIES_DESCRIPTION: function() {
+        return EMPHASIZED_SERIES_DESCRIPTION;
+    },
+    EMPTY_TOOLTIP_DATA: function() {
+        return EMPTY_TOOLTIP_DATA;
+    },
+    FALLBACK_CHART_WIDTH: function() {
+        return FALLBACK_CHART_WIDTH;
+    },
+    NEARBY_SERIES_DESCRIPTION: function() {
+        return NEARBY_SERIES_DESCRIPTION;
+    },
+    PIN_TOOLTIP_HELP_TEXT: function() {
+        return PIN_TOOLTIP_HELP_TEXT;
+    },
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
+        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+    },
+    TOOLTIP_BG_COLOR_FALLBACK: function() {
+        return TOOLTIP_BG_COLOR_FALLBACK;
+    },
+    TOOLTIP_DATE_FORMAT: function() {
+        return TOOLTIP_DATE_FORMAT;
+    },
+    TOOLTIP_LABELS_MAX_WIDTH: function() {
+        return TOOLTIP_LABELS_MAX_WIDTH;
+    },
+    TOOLTIP_MAX_HEIGHT: function() {
+        return TOOLTIP_MAX_HEIGHT;
+    },
+    TOOLTIP_MAX_WIDTH: function() {
+        return TOOLTIP_MAX_WIDTH;
+    },
+    TOOLTIP_MIN_WIDTH: function() {
+        return TOOLTIP_MIN_WIDTH;
+    },
+    TOOLTIP_PADDING: function() {
+        return TOOLTIP_PADDING;
+    },
+    UNPIN_TOOLTIP_HELP_TEXT: function() {
+        return UNPIN_TOOLTIP_HELP_TEXT;
+    },
+    defaultCursorData: function() {
+        return defaultCursorData;
+    },
+    useMousePosition: function() {
+        return useMousePosition;
+    }
 });
 const _react = require("react");
 const TOOLTIP_MIN_WIDTH = 375;
@@ -73,10 +107,7 @@ const defaultCursorData = {
     },
     chartWidth: 0
 };
-const emptyTooltipData = {
-    cursor: defaultCursorData,
-    focusedSeries: null
-};
+const EMPTY_TOOLTIP_DATA = [];
 const useMousePosition = ()=>{
     const [coords, setCoords] = (0, _react.useState)(null);
     (0, _react.useEffect)(()=>{
@@ -91,12 +122,9 @@ const useMousePosition = ()=>{
                     y: e.clientY
                 },
                 plotCanvas: {
-                    x: e.offsetX,
-                    y: e.offsetY
-                },
-                zrender: {
-                    // echarts canvas coordinates added automatically by zrender
-                    // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas
+                    // Always use zrender mousemove coords since they handle browser inconsistencies for us
+                    // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY
+                    // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120
                     x: e.zrX,
                     y: e.zrY
                 },
@@ -116,4 +144,4 @@ const DEFAULT_TOOLTIP_CONFIG = {
     enablePinning: true
 };
 const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
-const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';
+const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -21,19 +21,24 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    assembleTransform: ()=>assembleTransform,
-    getTooltipStyles: ()=>getTooltipStyles
+    assembleTransform: function() {
+        return assembleTransform;
+    },
+    getTooltipStyles: function() {
+        return getTooltipStyles;
+    }
 });
-const _tooltipModel = require("./tooltip-model");
+const _tooltipmodel = require("./tooltip-model");
 function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
-        return 'translate3d(0, 0)';
+        return undefined;
     }
     const cursorPaddingX = 32;
     const cursorPaddingY = 16;
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
+    if (mousePos.plotCanvas.x === undefined) return undefined;
     // By default, tooltip is located in a Portal attached to the body.
     // Using page coordinates instead of viewport ensures the tooltip is
     // absolutely positioned correctly as the user scrolls
@@ -51,30 +56,30 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
         // adjust so tooltip does not get cut off at bottom of chart
         // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
-        y = y - tooltipHeight * _tooltipModel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+        y = y - tooltipHeight * _tooltipmodel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
         // If y is now above of the top of containerElement, set y close to 0 so tooltip does not get cut off
         if (containerRect && y < containerRect.top) {
-            y = _tooltipModel.TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip
+            y = _tooltipmodel.TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip
         }
     }
     // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
     // reposition so tooltip is never too close to right side of chart or left side of browser window
-    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipmodel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
 function getTooltipStyles(theme, pinnedPos, maxHeight) {
-    var ref;
-    const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipModel.TOOLTIP_PADDING : undefined;
-    var ref1;
+    var _theme_palette_designSystem;
+    const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipmodel.TOOLTIP_PADDING : undefined;
+    var _theme_palette_designSystem_grey_;
     return {
-        minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
-        maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
-        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : _tooltipModel.TOOLTIP_MAX_HEIGHT,
+        minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
+        maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
+        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT,
         padding: 0,
         position: 'absolute',
         top: 0,
         left: 0,
-        backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _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,
         borderRadius: '6px',
         color: '#fff',
         fontSize: '11px',

package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js

@@ -0,0 +1,40 @@
+// 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
+});
+Object.defineProperty(exports, "ToolbarIconButton", {
+    enumerable: true,
+    get: function() {
+        return ToolbarIconButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function IconButton(props, ref) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledIconButton, {
+        ref: ref,
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));
+const ToolbarIconButton = /*#__PURE__*/ (0, _react.forwardRef)(IconButton);

package/dist/cjs/ToolbarIconButton/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
+});
+_export_star(require("./ToolbarIconButton"), 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];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/YAxisLabel.js

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "YAxisLabel", {
     enumerable: true,
-    get: ()=>YAxisLabel
+    get: function() {
+        return YAxisLabel;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function YAxisLabel({ name , height  }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+function YAxisLabel({ name, height }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             display: 'inline-block',
             maxWidth: height,
@@ -32,7 +34,7 @@ function YAxisLabel({ name , height  }) {
             textAlign: 'center',
             zIndex: 1
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
             variant: "body1",
             "aria-label": "y axis label",
             sx: {

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

@@ -21,12 +21,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ChartsThemeProvider: ()=>ChartsThemeProvider,
-    ChartsThemeContext: ()=>ChartsThemeContext,
-    useChartsTheme: ()=>useChartsTheme
+    ChartsProvider: function() {
+        return ChartsProvider;
+    },
+    ChartsThemeContext: function() {
+        return ChartsThemeContext;
+    },
+    useChartsContext: function() {
+        return useChartsContext;
+    },
+    useChartsTheme: function() {
+        return useChartsTheme;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -35,7 +44,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -48,7 +57,9 @@ function _interopRequireWildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -66,18 +77,36 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function ChartsThemeProvider(props) {
-    const { children , chartsTheme  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ChartsThemeContext.Provider, {
-        value: chartsTheme,
+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: 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/SnackbarProvider.js

@@ -21,13 +21,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    SnackbarProvider: ()=>_notistack.SnackbarProvider,
-    useSnackbar: ()=>useSnackbar
+    SnackbarProvider: function() {
+        return _notistack.SnackbarProvider;
+    },
+    useSnackbar: function() {
+        return useSnackbar;
+    }
 });
 const _react = require("react");
 const _notistack = require("notistack");
 function useSnackbar() {
-    const { enqueueSnackbar , closeSnackbar  } = (0, _notistack.useSnackbar)();
+    const { enqueueSnackbar, closeSnackbar } = (0, _notistack.useSnackbar)();
     // Create variant-specific callbacks
     const errorSnackbar = useEnqueueFunction(enqueueSnackbar, 'error');
     const infoSnackbar = useEnqueueFunction(enqueueSnackbar, 'info');