@perses-dev/timeseries-chart-plugin 0.12.0 → 0.13.0-beta.0

package/lib/cjs/QuerySettingsEditor.js

@@ -212,19 +212,20 @@ function QuerySettingsEditor(props) {
             qs.areaOpacity = undefined;
         });
     };
-    const addUnit = (i)=>{
+    const addFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = {
-                unit: 'decimal'
+                unit: 'decimal',
+                shortValues: true
             };
         });
     };
-    const removeUnit = (i)=>{
+    const removeFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = undefined;
         });
     };
-    const handleUnitChange = (i, format)=>{
+    const handleFormatChange = (i, format)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = format;
         });
@@ -288,9 +289,9 @@ function QuerySettingsEditor(props) {
                     onRemoveLineStyle: ()=>removeLineStyle(i),
                     onAddAreaOpacity: ()=>addAreaOpacity(i),
                     onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
-                    onAddUnit: ()=>addUnit(i),
-                    onRemoveUnit: ()=>removeUnit(i),
-                    onUnitChange: (format)=>handleUnitChange(i, format)
+                    onAddFormat: ()=>addFormat(i),
+                    onRemoveFormat: ()=>removeFormat(i),
+                    onFormatChange: (format)=>handleFormatChange(i, format)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
@@ -304,7 +305,7 @@ function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddUnit, onRemoveUnit, onUnitChange }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -328,9 +329,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             action: onAddAreaOpacity
         });
         if (format === undefined) options.push({
-            key: 'unit',
-            label: 'Unit',
-            action: onAddUnit
+            key: 'format',
+            label: 'Format',
+            action: onAddFormat
         });
         return options;
     }, [
@@ -341,7 +342,7 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         onAddColor,
         onAddLineStyle,
         onAddAreaOpacity,
-        onAddUnit
+        onAddFormat
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -359,172 +360,183 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         action();
         handleMenuClose();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
             borderRadius: 1,
-            p: 2
+            p: 2,
+            display: 'flex',
+            flexWrap: 'nowrap',
+            flexDirection: 'row'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            direction: "row",
-            alignItems: "center",
-            sx: {
-                flexWrap: 'wrap',
-                gap: 2
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                    select: true,
-                    inputRef: inputRef,
-                    value: queryIndex,
-                    label: "Query",
-                    onChange: onQueryIndexChange,
-                    sx: {
-                        minWidth: '75px'
-                    },
-                    children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                            value: qi,
-                            children: [
-                                "#",
-                                qi + 1
-                            ]
-                        }, `query-${qi}`))
-                }),
-                colorMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Color",
-                    onRemove: onRemoveColor,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
-                            select: true,
-                            value: colorMode,
-                            onChange: onColorModeChange,
-                            size: "small",
-                            sx: {
-                                flexGrow: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                    value: "fixed-single",
-                                    children: "Fixed (single)"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                    value: "fixed",
-                                    children: "Fixed"
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
-                            label: `Query n°${queryIndex + 1}`,
-                            color: colorValue || DEFAULT_COLOR_VALUE,
-                            onColorChange: onColorValueChange
-                        })
-                    ]
-                }),
-                lineStyle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Line Style",
-                    onRemove: onRemoveLineStyle,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
-                            color: "primary",
-                            exclusive: true,
-                            value: lineStyle,
-                            onChange: (__, newValue)=>{
-                                if (newValue !== null) {
-                                    onLineStyleChange(newValue);
-                                }
-                            },
-                            size: "small",
-                            children: Object.entries(_timeserieschartmodel.LINE_STYLE_CONFIG).map(([styleValue, config])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                                    value: styleValue,
-                                    "aria-label": `${styleValue} line style`,
-                                    children: config.label
-                                }, styleValue))
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                areaOpacity !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Opacity",
-                    onRemove: onRemoveAreaOpacity,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {}),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
-                            value: areaOpacity,
-                            valueLabelDisplay: "auto",
-                            step: _timeserieschartmodel.OPACITY_CONFIG.step,
-                            marks: true,
-                            min: _timeserieschartmodel.OPACITY_CONFIG.min,
-                            max: _timeserieschartmodel.OPACITY_CONFIG.max,
-                            onChange: onAreaOpacityChange,
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                format !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
-                    label: "Unit",
-                    onRemove: onRemoveUnit,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                sx: {
+                    flexWrap: 'wrap',
+                    gap: 2,
+                    flexGrow: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        select: true,
+                        inputRef: inputRef,
+                        value: queryIndex,
+                        label: "Query",
+                        onChange: onQueryIndexChange,
                         sx: {
-                            minWidth: '180px'
+                            minWidth: '75px'
                         },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.UnitSelector, {
-                            value: format,
-                            onChange: onUnitChange
-                        })
-                    })
-                }),
-                availableOptions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                            onClick: handleAddMenuClick,
-                            "aria-label": "Add option",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
-                            anchorEl: anchorEl,
-                            open: Boolean(anchorEl),
-                            onClose: handleMenuClose,
-                            anchorOrigin: {
-                                vertical: 'bottom',
-                                horizontal: 'left'
+                        children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                value: qi,
+                                children: [
+                                    "#",
+                                    qi + 1
+                                ]
+                            }, `query-${qi}`))
+                    }),
+                    colorMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Color",
+                        onRemove: onRemoveColor,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                                select: true,
+                                value: colorMode,
+                                onChange: onColorModeChange,
+                                size: "small",
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "fixed-single",
+                                        children: "Fixed (single)"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "fixed",
+                                        children: "Fixed"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                                label: `Query n°${queryIndex + 1}`,
+                                color: colorValue || DEFAULT_COLOR_VALUE,
+                                onColorChange: onColorValueChange
+                            })
+                        ]
+                    }),
+                    lineStyle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Line Style",
+                        onRemove: onRemoveLineStyle,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
+                                color: "primary",
+                                exclusive: true,
+                                value: lineStyle,
+                                onChange: (__, newValue)=>{
+                                    if (newValue !== null) {
+                                        onLineStyleChange(newValue);
+                                    }
+                                },
+                                size: "small",
+                                children: Object.entries(_timeserieschartmodel.LINE_STYLE_CONFIG).map(([styleValue, config])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: styleValue,
+                                        "aria-label": `${styleValue} line style`,
+                                        children: config.label
+                                    }, styleValue))
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    areaOpacity !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Opacity",
+                        onRemove: onRemoveAreaOpacity,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {}),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
+                                value: areaOpacity,
+                                valueLabelDisplay: "auto",
+                                step: _timeserieschartmodel.OPACITY_CONFIG.step,
+                                marks: true,
+                                min: _timeserieschartmodel.OPACITY_CONFIG.min,
+                                max: _timeserieschartmodel.OPACITY_CONFIG.max,
+                                onChange: onAreaOpacityChange,
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    format !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
+                        label: "Format",
+                        onRemove: onRemoveFormat,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                minWidth: '180px',
+                                display: 'flex',
+                                gap: 1,
+                                flexDirection: 'column'
                             },
-                            children: availableOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                                    onClick: ()=>handleMenuItemClick(option.action),
-                                    sx: {
-                                        minWidth: '120px'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {
-                                            sx: {
-                                                mr: 1,
-                                                fontSize: '1rem'
-                                            }
-                                        }),
-                                        option.label
-                                    ]
-                                }, option.key))
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                                value: format,
+                                onChange: onFormatChange
+                            })
                         })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    sx: {
-                        flexGrow: 1
-                    }
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    }),
+                    availableOptions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: handleAddMenuClick,
+                                "aria-label": "Add option",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                                anchorEl: anchorEl,
+                                open: Boolean(anchorEl),
+                                onClose: handleMenuClose,
+                                anchorOrigin: {
+                                    vertical: 'bottom',
+                                    horizontal: 'left'
+                                },
+                                children: availableOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                        onClick: ()=>handleMenuItemClick(option.action),
+                                        sx: {
+                                            minWidth: '120px'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {
+                                                sx: {
+                                                    mr: 1,
+                                                    fontSize: '1rem'
+                                                }
+                                            }),
+                                            option.label
+                                        ]
+                                    }, option.key))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                     "aria-label": `delete settings for query n°${queryIndex + 1}`,
                     onClick: onDelete,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
                 })
-            ]
-        })
+            })
+        ]
     });
 }
 // Reusable section component

package/lib/cjs/TimeSeriesChartBase.js

@@ -25,13 +25,13 @@ const _react = require("react");
 const _material = require("@mui/material");
 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 _components1 = require("@perses-dev/components");
+const _timezoneformatter = require("./utils/timezone-formatter");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -61,6 +61,9 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     const { timeZone } = (0, _components1.useTimeZone)();
+    const getTimezoneAwareAxisFormatter = (0, _react.useCallback)((rangeMs)=>(0, _timezoneformatter.createTimezoneAwareAxisFormatter)(rangeMs, timeZone), [
+        timeZone
+    ]);
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -142,12 +145,11 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         // Utilizes ECharts dataset so raw data is separate from series option style properties
         // https://apache.github.io/echarts-handbook/en/concepts/dataset/
         const dataset = [];
-        const isLocalTimeZone = timeZone === 'local';
         data.map((d, index)=>{
             const values = d.values.map(([timestamp, value])=>{
                 const val = value === null ? '-' : value; // echarts use '-' to represent null data
                 return [
-                    isLocalTimeZone ? timestamp : (0, _datefnstz.toZonedTime)(timestamp, timeZone),
+                    timestamp,
                     val
                 ];
             });
@@ -171,11 +173,11 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
             series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
-                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.toZonedTime)(timeScale.startMs, timeZone),
-                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.toZonedTime)(timeScale.endMs, timeZone),
+                min: timeScale.startMs,
+                max: timeScale.endMs,
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _components1.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
+                    formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -224,10 +226,10 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
-        timeZone,
         isStackedBar,
         enablePinning,
-        pinnedCrosshair
+        pinnedCrosshair,
+        getTimezoneAwareAxisFormatter
     ]);
     // Update adjacent charts so tooltip is unpinned when current chart is clicked.
     (0, _react.useEffect)(()=>{

package/lib/cjs/TimeSeriesChartPanel.js

@@ -216,7 +216,8 @@ function TimeSeriesChartPanel(props) {
                 }
             }
         }
-        if (thresholds && thresholds.steps) {
+        // map thresholds only if there is at least one time series to avoid displaying thresholds without any data
+        if (thresholds && thresholds.steps && timeChartData.length > 0) {
             // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.
             // These are styled with predefined colors and a dashed style to look different than series from query results.
             // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.

package/lib/cjs/TimeSeriesExportAction.js

@@ -25,7 +25,7 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _CSVExportUtils = require("./CSVExportUtils");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -74,12 +74,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const TimeSeriesExportAction = ({ queryResults, definition })=>{
     const exportableData = (0, _react.useMemo)(()=>{
-        return (0, _CSVExportUtils.extractExportableData)(queryResults);
+        return (0, _pluginsystem.extractExportableData)(queryResults);
     }, [
         queryResults
     ]);
     const canExport = (0, _react.useMemo)(()=>{
-        return (0, _CSVExportUtils.isExportableData)(exportableData);
+        return (0, _pluginsystem.isExportableData)(exportableData);
     }, [
         exportableData
     ]);
@@ -87,10 +87,10 @@ const TimeSeriesExportAction = ({ queryResults, definition })=>{
         if (!exportableData || !canExport) return;
         try {
             const title = definition?.spec?.display?.name || 'Time Series Data';
-            const csvBlob = (0, _CSVExportUtils.exportDataAsCSV)({
+            const csvBlob = (0, _pluginsystem.exportDataAsCSV)({
                 data: exportableData
             });
-            const baseFilename = (0, _CSVExportUtils.sanitizeFilename)(title);
+            const baseFilename = (0, _pluginsystem.sanitizeFilename)(title);
             const filename = `${baseFilename}_data.csv`;
             const link = document.createElement('a');
             link.href = URL.createObjectURL(csvBlob);

package/lib/cjs/index.js

@@ -29,7 +29,6 @@ _export_star(require("./YAxisOptionsEditor"), exports);
 _export_star(require("./TimeSeriesChartPanel"), exports);
 _export_star(require("./TimeSeriesChartBase"), exports);
 _export_star(require("./time-series-chart-model"), exports);
-_export_star(require("./CSVExportUtils"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/lib/cjs/utils/timezone-formatter.js

@@ -0,0 +1,48 @@
+// Copyright 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, "createTimezoneAwareAxisFormatter", {
+    enumerable: true,
+    get: function() {
+        return createTimezoneAwareAxisFormatter;
+    }
+});
+const _components = require("@perses-dev/components");
+const DAY_MS = 86400000;
+const MONTH_MS = 2629440000;
+const YEAR_MS = 31536000000;
+function createTimezoneAwareAxisFormatter(rangeMs, timeZone) {
+    return function(value) {
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > YEAR_MS * 5) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'yyyy', timeZone);
+        }
+        // more than 2 years
+        if (rangeMs > YEAR_MS * 2) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'MMM yyyy', timeZone);
+        }
+        // between 10 days to 6 months
+        if (rangeMs > DAY_MS * 10 && rangeMs < MONTH_MS * 6) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM', timeZone);
+        }
+        // between 2 and 10 days
+        if (rangeMs > DAY_MS * 2 && rangeMs <= DAY_MS * 10) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timeZone);
+        }
+        return (0, _components.formatWithTimeZone)(timeStamp, 'HH:mm', timeZone);
+    };
+}

package/lib/index.d.ts

@@ -7,5 +7,4 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
-export * from './CSVExportUtils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -19,6 +19,5 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
-export * from './CSVExportUtils';
 
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './GeneralSettingsEditor';\nexport * from './QuerySettingsEditor';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\nexport * from './CSVExportUtils';\n"],"names":["getPluginModule"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './GeneralSettingsEditor';\nexport * from './QuerySettingsEditor';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\n"],"names":["getPluginModule"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B"}

package/lib/utils/timezone-formatter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */
+export declare function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string): (value: number) => string;
+//# sourceMappingURL=timezone-formatter.d.ts.map

package/lib/utils/timezone-formatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../../src/utils/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAC/D,OAAO,MAAM,KAAG,MAAM,CAyBxC"}