@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/TimeChart/TimeChart.js

@@ -57,7 +57,6 @@ function _interop_require_default(obj) {
     _renderers.CanvasRenderer
 ]);
 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)();
@@ -172,7 +171,6 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             ...seriesMapping,
             pinnedCrosshair
         ] : seriesMapping;
-        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
@@ -182,7 +180,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.utcToZonedTime)(timeScale.endMs, timeZone),
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _utils.getFormattedAxisLabel)((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
+                    formatter: (0, _utils.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -196,7 +194,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
                 trigger: isStackedBar ? 'item' : 'axis',
-                appendToBody: true
+                appendToBody: isStackedBar
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
@@ -255,7 +253,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         seriesMapping
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         // onContextMenu={(e) => {
@@ -302,10 +300,9 @@ 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 _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 firstTimeSeriesValues = data[0]?.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, {
@@ -378,7 +375,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             }
         },
         children: [
-            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, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,

package/dist/cjs/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -14,10 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "AbsoluteTimePicker", {
+Object.defineProperty(exports, "DateTimeRangePicker", {
     enumerable: true,
     get: function() {
-        return AbsoluteTimePicker;
+        return DateTimeRangePicker;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,23 +25,24 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
+const _context = require("../context");
+const _ErrorBoundary = require("../ErrorBoundary");
+const _ErrorAlert = require("../ErrorAlert");
 const _utils = require("./utils");
-const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
-    const { formatWithUserTimeZone } = (0, _TimeZoneProvider.useTimeZone)();
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = (0, _react.useState)({
-        start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),
-        end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT)
+        start: formatWithUserTimeZone(initialTimeRange.start, _utils.DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
     });
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,
@@ -159,27 +160,33 @@ const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel })=>{
                     pl: 1,
                     pr: 1,
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                // TODO: add helperText, fix validation after we decide on form state solution
-                                onChangeStartTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.start,
-                            label: "Start Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "Start Time",
+                                value: new Date(timeRangeInputs.start),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeStartTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                            onChange: (event)=>{
-                                onChangeEndTime(event.target.value);
-                            },
-                            onBlur: ()=>updateDateRange(),
-                            value: timeRangeInputs.end,
-                            label: "End Time",
-                            placeholder: DATE_TIME_FORMAT,
-                            type: "tel"
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+                            FallbackComponent: _ErrorAlert.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                label: "End Time",
+                                value: new Date(timeRangeInputs.end),
+                                onChange: (event)=>{
+                                    if (event) {
+                                        onChangeEndTime(event);
+                                    }
+                                },
+                                onBlur: ()=>updateDateRange(),
+                                format: _utils.DATE_TIME_FORMAT
+                            })
                         })
                     ]
                 }),

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -0,0 +1,127 @@
+// Copyright 2024 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, "TimeRangeSelector", {
+    enumerable: true,
+    get: function() {
+        return TimeRangeSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
+const _core = require("@perses-dev/core");
+const _react = require("react");
+const _context = require("../context");
+const _DateTimeRangePicker = require("./DateTimeRangePicker");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
+    const { timeZone } = (0, _context.useTimeZone)();
+    const anchorEl = (0, _react.useRef)(); // Used to position the absolute time range picker
+    // Control the open state of the absolute time range picker
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    // Build the initial value of the absolute time range picker
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
+    }, [
+        value
+    ]);
+    // Last option is the absolute time range option (custom)
+    // If the value is an absolute time range, we display this time range
+    // If the value is a relative time range, we make a default CustomTimeOption built from undefined value
+    const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _core.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
+        value,
+        timeZone
+    ]);
+    // Control the open state of the select component to prevent the menu from closing when the custom date picker is
+    // opened.
+    //
+    // Note that the value state of the select is here for display only. The real value (the one from props) is managed
+    // by click events on each menu item.
+    // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...
+    const [open, setOpen] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateTimeRangePicker.DateTimeRangePicker, {
+                    initialTimeRange: convertedTimeRange,
+                    onChange: (value)=>{
+                        onChange(value);
+                        setShowCustomDateSelector(false);
+                        setOpen(false);
+                    },
+                    onCancel: ()=>setShowCustomDateSelector(false)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                ref: anchorEl,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                    open: open,
+                    value: (0, _utils.formatTimeRange)(value, timeZone),
+                    onClick: ()=>setOpen(!open),
+                    IconComponent: _Calendar.default,
+                    inputProps: {
+                        'aria-label': `Select time range. Currently set to ${value}`
+                    },
+                    sx: {
+                        // `transform: none` prevents calendar icon from flipping over when menu is open
+                        '.MuiSelect-icon': {
+                            marginTop: '1px',
+                            transform: 'none'
+                        },
+                        // paddingRight creates more space for the calendar icon (it's a bigger icon)
+                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                            paddingRight: '36px'
+                        },
+                        '.MuiSelect-select': height ? {
+                            lineHeight: height,
+                            paddingY: 0
+                        } : {}
+                    },
+                    children: [
+                        timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                value: (0, _utils.formatTimeRange)(item.value, timeZone),
+                                onClick: ()=>{
+                                    onChange(item.value);
+                                },
+                                children: item.display
+                            }, idx)),
+                        showCustomTimeRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: (0, _utils.formatTimeRange)(lastOption.value, timeZone),
+                            onClick: ()=>setShowCustomDateSelector(true),
+                            children: lastOption.display
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -14,9 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./DateTimeRangePicker"), exports);
 _export_star(require("./TimeRangeSelector"), exports);
-_export_star(require("./AbsoluteTimePicker"), exports);
+_export_star(require("./DateTimeRangePicker"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,15 +21,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DATE_TIME_FORMAT: function() {
+        return DATE_TIME_FORMAT;
+    },
+    buildCustomTimeOption: function() {
+        return buildCustomTimeOption;
+    },
     formatAbsoluteRange: function() {
         return formatAbsoluteRange;
     },
+    formatTimeRange: function() {
+        return formatTimeRange;
+    },
     validateDateRange: function() {
         return validateDateRange;
     }
 });
 const _datefns = require("date-fns");
+const _core = require("@perses-dev/core");
 const _utils = require("../utils");
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+function buildCustomTimeOption(value, timeZone) {
+    return {
+        value,
+        display: formatTimeRange(value, timeZone)
+    };
+}
 function validateDateRange(startDate, endDate) {
     // TODO: display error as helperText
     if (!(0, _datefns.isValid)(startDate) || !(0, _datefns.isValid)(endDate)) {
@@ -47,3 +64,9 @@ function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
     const formattedEnd = (0, _utils.formatWithTimeZone)(timeRange.end, dateFormat, timeZone);
     return `${formattedStart} - ${formattedEnd}`;
 }
+function formatTimeRange(value, timeZone) {
+    if (!value) {
+        return 'Custom Time Range';
+    }
+    return !(0, _core.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
+}

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -44,8 +44,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     // 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 _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 chartWidth = 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)({
         mousePos,
@@ -63,24 +62,21 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     // 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;
     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);
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
         container: containerElement,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             ref: tooltipRef,
-            sx: (theme)=>{
-                var _theme_palette_designSystem;
-                var _theme_palette_designSystem_grey_;
-                return {
+            sx: (theme)=>({
                     minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-                    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT,
+                    maxHeight: maxHeight ?? _tooltipmodel.TOOLTIP_MAX_HEIGHT,
                     padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    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,
+                    backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -93,8 +89,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                };
-            },
+                }),
             style: {
                 transform: transform.current,
                 display: transform.current ? 'block' : 'none'

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -31,8 +31,7 @@ function SeriesInfo(props) {
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
     const splitName = seriesName.split('{');
-    var _splitName_;
-    const seriesLabels = (_splitName_ = splitName[1]) !== null && _splitName_ !== void 0 ? _splitName_ : seriesName;
+    const seriesLabels = splitName[1] ?? seriesName;
     // remove curly braces that wrap labels
     const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
     // determine whether to show labels on separate lines

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -44,13 +44,12 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
     // 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 _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 chartWidth = 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;
     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);
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
     }
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -25,7 +25,7 @@ const _material = require("@mui/material");
 const _Pin = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pin"));
 const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
 const _react = require("react");
-const _datefns = require("date-fns");
+const _utils = require("../utils");
 const _tooltipmodel = require("./tooltip-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -33,16 +33,12 @@ function _interop_require_default(obj) {
     };
 }
 const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
-    var _nearbySeries_;
-    var _nearbySeries__date;
-    const seriesTimeMs = (_nearbySeries__date = (_nearbySeries_ = nearbySeries[0]) === null || _nearbySeries_ === void 0 ? void 0 : _nearbySeries_.date) !== null && _nearbySeries__date !== void 0 ? _nearbySeries__date : null;
+    const seriesTimeMs = nearbySeries[0]?.date ?? null;
     if (seriesTimeMs === null) {
         return null;
     }
     const formatTimeSeriesHeader = (timeMs)=>{
-        const date = new Date(timeMs);
-        const formattedDate = (0, _datefns.format)(date, 'MMM dd, yyyy - ');
-        const formattedTime = (0, _datefns.format)(date, 'HH:mm:ss');
+        const { formattedTime, formattedDate } = (0, _utils.getDateAndTime)(timeMs);
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -65,19 +61,15 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
     const showAllSeriesToggle = enablePinning && totalSeries > 5;
     const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: (theme)=>{
-            var _theme_palette_designSystem;
-            var _theme_palette_designSystem_grey_;
-            return {
+        sx: (theme)=>({
                 width: '100%',
                 maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
                 padding: theme.spacing(1.5, 2, 0.5, 2),
-                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,
+                backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
                 position: 'sticky',
                 top: 0,
                 left: 0
-            };
-        },
+            }),
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {

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

@@ -57,12 +57,9 @@ const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show i
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
 function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format) {
-    var _data_;
     const currentNearbySeriesData = [];
-    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;
+    const cursorX = pointInGrid[0] ?? null;
+    const cursorY = pointInGrid[1] ?? null;
     if (cursorX === null || cursorY === null) return currentNearbySeriesData;
     if (chart.dispatchAction === undefined) return currentNearbySeriesData;
     if (!Array.isArray(data)) return currentNearbySeriesData;
@@ -74,7 +71,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     const totalSeries = data.length;
     const yValueCounts = new Map();
     // 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 firstTimeSeriesValues = data[0]?.values;
     const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
     if (closestTimestamp === null) {
         return _tooltipmodel.EMPTY_TOOLTIP_DATA;
@@ -82,15 +79,14 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     // find the timestamp with data that is closest to cursorX
     for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
         const currentSeries = seriesMapping[seriesIdx];
-        if (currentSeries === undefined) break;
+        if (!currentSeries) break;
         const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
-        if (currentDataset == null) break;
+        if (!currentDataset) break;
         const currentDatasetValues = currentDataset.values;
         if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
         const lineSeries = currentSeries;
         const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
-        var _lineSeries_color;
-        const markerColor = (_lineSeries_color = lineSeries.color) !== null && _lineSeries_color !== void 0 ? _lineSeries_color : '#000';
+        const markerColor = lineSeries.color ?? '#000';
         if (Array.isArray(data)) {
             for(let datumIdx = 0; datumIdx < currentDatasetValues.length; datumIdx++){
                 const nearbyTimeSeries = currentDatasetValues[datumIdx];
@@ -112,10 +108,9 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                             if (isClosestToCursor) {
                                 // shows as bold in tooltip, customize 'emphasis' options in getTimeSeries util
                                 emphasizedSeriesIndexes.push(seriesIdx);
-                                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 = (_yValueCounts_get = yValueCounts.get(yValue)) !== null && _yValueCounts_get !== void 0 ? _yValueCounts_get : 0;
+                                const duplicateValuesCount = yValueCounts.get(yValue) ?? 0;
                                 yValueCounts.set(yValue, duplicateValuesCount + 1);
                                 if (duplicateValuesCount > 0) {
                                     duplicateDatapoints.push({
@@ -164,10 +159,8 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
 }
 function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     const currentNearbySeriesData = [];
-    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;
+    const cursorX = pointInGrid[0] ?? null;
+    const cursorY = pointInGrid[1] ?? null;
     if (cursorX === null || cursorY === null) {
         return currentNearbySeriesData;
     }
@@ -181,12 +174,10 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
             if (currentSeries === undefined) break;
             if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
             const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
-            var _currentSeries_color;
-            const markerColor = (_currentSeries_color = currentSeries.color) !== null && _currentSeries_color !== void 0 ? _currentSeries_color : '#000';
+            const markerColor = currentSeries.color ?? '#000';
             if (Array.isArray(currentSeries.data)) {
                 for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
-                    var _data_xAxis_datumIdx;
-                    const xValue = (_data_xAxis_datumIdx = data.xAxis[datumIdx]) !== null && _data_xAxis_datumIdx !== void 0 ? _data_xAxis_datumIdx : 0;
+                    const xValue = data.xAxis[datumIdx] ?? 0;
                     const yValue = currentSeries.data[datumIdx];
                     // ensure null values not displayed in tooltip
                     if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
@@ -204,7 +195,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
                             } else {
                                 nonEmphasizedSeriesIndexes.push(seriesIdx);
                                 // ensure series not close to cursor are not highlighted
-                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                if (chart?.dispatchAction !== undefined) {
                                     chart.dispatchAction({
                                         type: 'downplay',
                                         seriesIndex: seriesIdx
@@ -232,7 +223,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
             }
         }
     }
-    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+    if (chart?.dispatchAction !== undefined) {
         // Clears emphasis state of all lines that are not emphasized.
         // Emphasized is a subset of just the nearby series that are closest to cursor.
         chart.dispatchAction({
@@ -330,10 +321,9 @@ function legacyGetNearbySeriesData({ mousePos, pinnedPos, chartData, chart, form
         totalSeries,
         showAllSeries
     });
-    var _mousePos_plotCanvas_x, _mousePos_plotCanvas_y;
     const pointInPixel = [
-        (_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
+        mousePos.plotCanvas.x ?? 0,
+        mousePos.plotCanvas.y ?? 0
     ];
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);