@perses-dev/components 0.39.0 → 0.40.1

package/dist/cjs/TimeChart/TimeChart.js

@@ -16,26 +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 _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
-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 _EChart = require("../EChart");
 const _model = require("../model");
-const _chartsProvider = require("../context/ChartsProvider");
+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
     };
@@ -54,9 +56,9 @@ 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 =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
-    var ref1;
-    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _chartsProvider.useChartsContext)();
+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);
@@ -64,9 +66,9 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
     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);
@@ -155,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
                 ];
             });
@@ -174,23 +176,23 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             ...seriesMapping,
             pinnedCrosshair
         ] : seriesMapping;
-        var _rangeMs;
+        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
             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.getFormattedAxis)(yAxis, unit),
+            yAxis: (0, _utils.getFormattedAxis)(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
@@ -227,7 +229,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         seriesMapping,
         timeScale,
         yAxis,
-        unit,
+        format,
         grid,
         noDataOption,
         __experimentalEChartsOptionsOverride,
@@ -256,7 +258,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         lastTooltipPinnedCoords,
         seriesMapping
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             height
         },
@@ -304,10 +306,10 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 setPinnedCrosshair((current)=>{
                     // Only add pinned crosshair line series when there is not one already in seriesMapping.
                     if (current === null) {
-                        var ref;
+                        var _data_;
                         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 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, {
@@ -380,7 +382,7 @@ 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,
@@ -388,7 +390,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 wrapLabels: tooltipConfig.wrapLabels,
                 enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit,
+                format: format,
                 onUnpinClick: ()=>{
                     // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);
@@ -396,7 +398,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                     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 , enablePinning =true , 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 && 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,10 +98,10 @@ 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,
@@ -108,7 +110,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                         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',

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

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

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

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