@perses-dev/timeseries-chart-plugin 0.12.1 → 0.13.0-beta.1

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,19 +25,18 @@ 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 _core = 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
     };
 }
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _charts.BarChart,
     _components.GridComponent,
@@ -61,9 +60,12 @@ 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);
+        const commonTimeScale = (0, _components1.getCommonTimeScale)(data);
         if (commonTimeScale === undefined) {
             // set default to past 5 years
             const today = new Date();
@@ -142,12 +144,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 +172,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 +225,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

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _timeserieschartmodel = require("./time-series-chart-model");
@@ -57,7 +56,7 @@ function TimeSeriesChartPanel(props) {
     } : undefined;
     // populate default 'position' and other future properties
     const legend = (0, _react.useMemo)(()=>{
-        return props.spec.legend && (0, _pluginsystem.validateLegendSpec)(props.spec.legend) ? (0, _merge.default)({}, _core.DEFAULT_LEGEND, props.spec.legend) : undefined;
+        return props.spec.legend && (0, _pluginsystem.validateLegendSpec)(props.spec.legend) ? (0, _merge.default)({}, _components.DEFAULT_LEGEND, props.spec.legend) : undefined;
     }, [
         props.spec.legend
     ]);
@@ -168,7 +167,7 @@ function TimeSeriesChartPanel(props) {
                     // We add a unique id for the chart to disambiguate items across charts
                     // when there are multiple on the page.
                     const seriesId = chartId + timeSeries.name + seriesIndex;
-                    const legendCalculations = legend?.values ? (0, _core.getCalculations)(timeSeries.values, legend.values) : undefined;
+                    const legendCalculations = legend?.values ? (0, _pluginsystem.getCalculations)(timeSeries.values, legend.values) : undefined;
                     // When we initially load the chart, we want to show all series, but
                     // DO NOT want to visualy highlight all the items in the legend.
                     const isSelectAll = selectedLegendItems === 'ALL';
@@ -200,7 +199,7 @@ function TimeSeriesChartPanel(props) {
                         }
                         timeChartData.push({
                             name: formattedSeriesName,
-                            values: (0, _core.getTimeSeriesValues)(timeSeries, timeScale)
+                            values: (0, _components.getTimeSeriesValues)(timeSeries, timeScale)
                         });
                     }
                     if (legend && legendItems) {
@@ -314,7 +313,7 @@ function TimeSeriesChartPanel(props) {
                     align: 'right',
                     cell: ({ getValue })=>{
                         const cellValue = getValue();
-                        return typeof cellValue === 'number' && format ? (0, _core.formatValue)(cellValue, format) : cellValue;
+                        return typeof cellValue === 'number' && format ? (0, _components.formatValue)(cellValue, format) : cellValue;
                     },
                     cellDescription: true,
                     enableSorting: true

package/lib/cjs/utils/data-transform.js

@@ -49,7 +49,6 @@ _export(exports, {
         return roundDown;
     }
 });
-const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _timeserieschartmodel = require("../time-series-chart-model");
 const EMPTY_GRAPH_DATA = {
@@ -61,7 +60,7 @@ const HIDE_DATAPOINTS_LIMIT = 70;
 const BLUR_FADEOUT_OPACITY = 0.5;
 function getCommonTimeScaleForQueries(queries) {
     const seriesData = queries.map((query)=>query.data);
-    return (0, _core.getCommonTimeScale)(seriesData);
+    return (0, _components.getCommonTimeScale)(seriesData);
 }
 function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings, yAxisIndex) {
     const lineWidth = visual.lineWidth ?? _timeserieschartmodel.DEFAULT_LINE_WIDTH;

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/test/mock-query-results.d.ts

@@ -1,4 +1,4 @@
-import { TimeSeriesData } from '@perses-dev/core';
+import { TimeSeriesData } from '@perses-dev/spec';
 export declare const MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE: {
     status: string;
     fetchStatus: string;