@perses-dev/components 0.38.0 → 0.40.0

package/dist/cjs/TimeChart/TimeChart.js

@@ -16,25 +16,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TimeChart", {
     enumerable: true,
-    get: ()=>TimeChart
+    get: function() {
+        return TimeChart;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-const _dateFnsTz = require("date-fns-tz");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _isEqual = /*#__PURE__*/ _interop_require_default(require("lodash/isEqual"));
+const _datefnstz = require("date-fns-tz");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
 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 _EChart = require("../EChart");
+const _model = require("../model");
+const _ChartsProvider = require("../context/ChartsProvider");
 const _utils = require("../utils");
-const _timeSeriesTooltip = require("../TimeSeriesTooltip");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
-function _interopRequireDefault(obj) {
+const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -53,19 +56,19 @@ 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) {
-    var ref1;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , format , grid , isStackedBar =false , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+    var _option_tooltip;
+    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)();
-    var ref2;
-    const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
+    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
+    var _data_length;
+    const totalSeries = (_data_length = data === null || data === void 0 ? void 0 : data.length) !== null && _data_length !== void 0 ? _data_length : 0;
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -154,7 +157,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             const values = d.values.map(([timestamp, value])=>{
                 const val = value === null ? '-' : value; // echarts use '-' to represent null data
                 return [
-                    isLocalTimeZone ? timestamp : (0, _dateFnsTz.utcToZonedTime)(timestamp, timeZone),
+                    isLocalTimeZone ? timestamp : (0, _datefnstz.utcToZonedTime)(timestamp, timeZone),
                     val
                 ];
             });
@@ -169,29 +172,34 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 ]
             });
         });
-        var _rangeMs;
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
+        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
-            series: seriesMapping,
+            series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
-                min: isLocalTimeZone ? timeScale.startMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.startMs, timeZone),
-                max: isLocalTimeZone ? timeScale.endMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.endMs, timeZone),
+                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.utcToZonedTime)(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.utcToZonedTime)(timeScale.endMs, timeZone),
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _utils.getFormattedAxisLabel)((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                    formatter: (0, _utils.getFormattedAxisLabel)((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
                 },
                 axisPointer: {
                     snap: false
                 }
             },
-            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            yAxis: (0, _utils.getFormattedAxis)(yAxis, format),
             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,73 +224,112 @@ 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,
         timeScale,
         yAxis,
-        unit,
+        format,
         grid,
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
         timeZone,
-        tooltipPinnedCoords,
-        isStackedBar
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    // 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 _data_;
+                        const cursorX = pointInGrid[0];
+                        // 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);
+                        // 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)=>{
@@ -335,21 +382,23 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeChartTooltip, {
+            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit,
+                format: format,
                 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, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
                 sx: {
                     width: '100%',
                     height: '100%'

package/dist/cjs/TimeChart/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./TimeChart"), exports);
-function _exportStar(from, to) {
+_export_star(require("./TimeChart"), 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/LineChartTooltip.js

@@ -16,41 +16,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "LineChartTooltip", {
     enumerable: true,
-    get: ()=>LineChartTooltip
+    get: function() {
+        return LineChartTooltip;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
-const _tooltipContent = require("./TooltipContent");
-const _tooltipHeader = require("./TooltipHeader");
-const _nearbySeries = require("./nearby-series");
-const _tooltipModel = require("./tooltip-model");
+const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
+const _TooltipContent = require("./TooltipContent");
+const _TooltipHeader = require("./TooltipHeader");
+const _nearbyseries = require("./nearby-series");
+const _tooltipmodel = require("./tooltip-model");
 const _utils = require("./utils");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? 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 , format , onUnpinClick , pinnedPos , containerId  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
-    const mousePos = (0, _tooltipModel.useMousePosition)();
-    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    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;
     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.
     // Get series nearby the cursor and pass into tooltip content children.
-    const nearbySeries = (0, _nearbySeries.legacyGetNearbySeriesData)({
+    const nearbySeries = (0, _nearbyseries.legacyGetNearbySeriesData)({
         mousePos,
         chartData,
         pinnedPos,
         chart,
-        unit,
+        format,
         showAllSeries
     });
     if (nearbySeries.length === 0) {
@@ -63,22 +65,22 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     if (!isTooltipPinned) {
         transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
     }
-    var ref1;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+    var _theme_palette_designSystem_grey_;
+    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)=>{
-                var ref;
+                var _theme_palette_designSystem;
                 return {
-                    minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
-                    maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
-                    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
+                    maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
+                    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : _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',
@@ -96,18 +98,19 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
             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/SeriesInfo.js

@@ -16,28 +16,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "SeriesInfo", {
     enumerable: true,
-    get: ()=>SeriesInfo
+    get: function() {
+        return SeriesInfo;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _seriesMarker = require("./SeriesMarker");
-const _seriesLabelsStack = require("./SeriesLabelsStack");
-const _tooltipModel = require("./tooltip-model");
+const _SeriesMarker = require("./SeriesMarker");
+const _SeriesLabelsStack = require("./SeriesLabelsStack");
+const _tooltipmodel = require("./tooltip-model");
 function SeriesInfo(props) {
     const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
     const splitName = seriesName.split('{');
-    var ref;
-    const seriesLabels = (ref = splitName[1]) !== null && ref !== void 0 ? ref : seriesName;
+    var _splitName_;
+    const seriesLabels = (_splitName_ = splitName[1]) !== null && _splitName_ !== void 0 ? _splitName_ : seriesName;
     // remove curly braces that wrap labels
     const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
     // determine whether to show labels on separate lines
     const splitLabels = formattedSeriesLabels.split(',');
     if (totalSeries === 1 && splitLabels.length > 1) {
         const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesLabelsStack.SeriesLabelsStack, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesLabelsStack.SeriesLabelsStack, {
             formattedY: formattedY,
             metricName: metricName,
             metricLabels: splitLabels,
@@ -46,43 +48,43 @@ function SeriesInfo(props) {
     }
     // add space after commas so wrapLabels works
     const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             display: 'table-row',
             paddingTop: 0.5
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     display: 'table-cell',
                     maxWidth: '520px'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesMarker.SeriesMarker, {
                         markerColor: markerColor,
                         sx: {
                             marginTop: 0.5
                         }
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         component: "span",
                         sx: (theme)=>({
                                 display: 'inline-block',
                                 width: 'calc(100% - 20px)',
                                 minWidth: 150,
-                                maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
+                                maxWidth: _tooltipmodel.TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
                                 fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
-                        "aria-label": emphasizeText ? _tooltipModel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipModel.NEARBY_SERIES_DESCRIPTION,
+                        "aria-label": emphasizeText ? _tooltipmodel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipmodel.NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 sx: (theme)=>({
                         display: 'table-cell',
                         paddingLeft: 1.5,

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -16,17 +16,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "SeriesLabelsStack", {
     enumerable: true,
-    get: ()=>SeriesLabelsStack
+    get: function() {
+        return SeriesLabelsStack;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _seriesMarker = require("./SeriesMarker");
+const _SeriesMarker = require("./SeriesMarker");
 function SeriesLabelsStack(props) {
     const { formattedY , markerColor , metricName , metricLabels  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 0.5,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: (theme)=>({
                         display: 'flex',
                         height: '16px',
@@ -37,17 +39,17 @@ function SeriesLabelsStack(props) {
                         fontSize: '11px'
                     }),
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesMarker.SeriesMarker, {
                         markerColor: markerColor,
                         sx: {
                             marginTop: 0.25
                         }
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                         component: "span",
                         children: [
                             metricName,
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                                 component: "span",
                                 sx: (theme)=>({
                                         color: theme.palette.common.white,
@@ -60,12 +62,12 @@ function SeriesLabelsStack(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
                 sx: (theme)=>({
                         borderColor: theme.palette.grey['500']
                     })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 sx: (theme)=>({
                         color: theme.palette.common.white
                     }),
@@ -75,19 +77,19 @@ function SeriesLabelsStack(props) {
                         const [name, value] = label.split('=');
                         const formattedName = value !== undefined ? `${name}: ` : name;
                         const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                             sx: {
                                 display: 'flex',
                                 gap: '4px'
                             },
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                     sx: {
                                         fontSize: '11px'
                                     },
                                     children: formattedName
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                     sx: (theme)=>({
                                             color: theme.palette.common.white,
                                             fontWeight: 700,

package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "SeriesMarker", {
     enumerable: true,
-    get: ()=>SeriesMarker
+    get: function() {
+        return SeriesMarker;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 function SeriesMarker(props) {
     const { markerColor , sx  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: (0, _utils.combineSx)({
             display: 'inline-block',
             width: '11px',