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

package/lib/cjs/QuerySettingsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -212,6 +212,23 @@ function QuerySettingsEditor(props) {
             qs.areaOpacity = undefined;
         });
     };
+    const addUnit = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = {
+                unit: 'decimal'
+            };
+        });
+    };
+    const removeUnit = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = undefined;
+        });
+    };
+    const handleUnitChange = (i, format)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = format;
+        });
+    };
     const queryCount = (0, _pluginsystem.useQueryCountContext)();
     // Compute the list of query indexes for which query settings are not already defined.
     // This is to avoid already-booked indexes to still be selectable in the dropdown(s)
@@ -270,7 +287,10 @@ function QuerySettingsEditor(props) {
                     onAddLineStyle: ()=>addLineStyle(i),
                     onRemoveLineStyle: ()=>removeLineStyle(i),
                     onAddAreaOpacity: ()=>addAreaOpacity(i),
-                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i)
+                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
+                    onAddUnit: ()=>addUnit(i),
+                    onRemoveUnit: ()=>removeUnit(i),
+                    onUnitChange: (format)=>handleUnitChange(i, format)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
@@ -284,7 +304,7 @@ function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity }) {
+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 }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -307,14 +327,21 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             label: 'Opacity',
             action: onAddAreaOpacity
         });
+        if (format === undefined) options.push({
+            key: 'unit',
+            label: 'Unit',
+            action: onAddUnit
+        });
         return options;
     }, [
         colorMode,
         lineStyle,
         areaOpacity,
+        format,
         onAddColor,
         onAddLineStyle,
-        onAddAreaOpacity
+        onAddAreaOpacity,
+        onAddUnit
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -333,7 +360,6 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         handleMenuClose();
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-        spacing: 2,
         sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
@@ -343,10 +369,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             direction: "row",
             alignItems: "center",
-            spacing: 1,
             sx: {
                 flexWrap: 'wrap',
-                gap: 1
+                gap: 2
             },
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
@@ -442,6 +467,19 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                         })
                     ]
                 }),
+                format !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
+                    label: "Unit",
+                    onRemove: onRemoveUnit,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        sx: {
+                            minWidth: '180px'
+                        },
+                        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, {

package/lib/cjs/TimeSeriesChart.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/TimeSeriesChartBase.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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
@@ -51,7 +51,7 @@ function _interop_require_default(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _components1.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
@@ -181,7 +181,8 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
                     snap: false
                 }
             },
-            yAxis: (0, _components1.getFormattedAxis)(yAxis, format),
+            // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis
+            yAxis: Array.isArray(yAxis) ? yAxis : (0, _components1.getFormattedAxis)(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
@@ -379,6 +380,7 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
                 enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
                 format: format,
+                seriesFormatMap: seriesFormatMap,
                 onUnpinClick: ()=>{
                     // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);

package/lib/cjs/TimeSeriesChartPanel.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -76,16 +76,47 @@ function TimeSeriesChartPanel(props) {
     }, [
         yAxis
     ]);
+    // Collect unique formats from query settings that differ from the base format
+    // These will create additional Y axes on the right side
+    const { additionalFormats, formatToYAxisIndex, seriesFormatMap } = (0, _react.useMemo)(()=>{
+        const baseUnit = format?.unit ?? 'decimal';
+        const additionalFormats = [];
+        const formatToYAxisIndex = new Map();
+        const seriesFormatMap = new Map();
+        // Index 0 is reserved for the base Y axis
+        formatToYAxisIndex.set(baseUnit, 0);
+        // Collect unique formats from query settings
+        for (const qs of querySettingsList ?? []){
+            if (qs.format?.unit && qs.format.unit !== baseUnit) {
+                const unitKey = qs.format.unit;
+                if (!formatToYAxisIndex.has(unitKey)) {
+                    // Add new format - index is 1 + position in additionalFormats array
+                    formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);
+                    additionalFormats.push(qs.format);
+                }
+            }
+        }
+        return {
+            additionalFormats,
+            formatToYAxisIndex,
+            seriesFormatMap
+        };
+    }, [
+        format,
+        querySettingsList
+    ]);
     const [selectedLegendItems, setSelectedLegendItems] = (0, _react.useState)('ALL');
     const [legendSorting, setLegendSorting] = (0, _react.useState)();
     const { setTimeRange } = (0, _pluginsystem.useTimeRange)();
     // Populate series data based on query results
-    const { timeScale, timeChartData, timeSeriesMapping, legendItems } = (0, _react.useMemo)(()=>{
+    const { timeScale, timeChartData, timeSeriesMapping, legendItems, seriesFormatMap: computedSeriesFormatMap, maxValuesByFormat } = (0, _react.useMemo)(()=>{
         const timeScale = (0, _datatransform.getCommonTimeScaleForQueries)(queryResults);
         if (timeScale === undefined) {
             return {
                 timeChartData: [],
-                timeSeriesMapping: []
+                timeSeriesMapping: [],
+                seriesFormatMap: new Map(),
+                maxValuesByFormat: new Map()
             };
         }
         const legendItems = [];
@@ -93,6 +124,8 @@ function TimeSeriesChartPanel(props) {
         // https://apache.github.io/echarts-handbook/en/concepts/dataset/
         const timeChartData = [];
         const timeSeriesMapping = [];
+        // Track max values for each format unit (used for dynamic Y axis offset calculation)
+        const maxValuesByFormat = new Map();
         // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query
         let seriesIndex = 0;
         // Mapping of each set of query results to be ECharts option compatible
@@ -146,9 +179,25 @@ function TimeSeriesChartPanel(props) {
                         // which legend items are selected. This must happen before timeChartData.push to avoid an
                         // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette
                         const datasetIndex = timeChartData.length;
+                        // Determine yAxisIndex based on the query's format setting
+                        const queryFormat = querySettings?.format;
+                        const yAxisIndex = queryFormat?.unit ? formatToYAxisIndex.get(queryFormat.unit) ?? 0 : 0;
                         // Each series is stored as a separate dataset source.
                         // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets
-                        timeSeriesMapping.push((0, _datatransform.getTimeSeries)(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings));
+                        timeSeriesMapping.push((0, _datatransform.getTimeSeries)(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings, yAxisIndex));
+                        // Store the format for this series for tooltip formatting
+                        if (queryFormat) {
+                            seriesFormatMap.set(seriesId, queryFormat);
+                            // Track max value for this format unit (used for dynamic Y axis offset calculation)
+                            const unitKey = queryFormat.unit;
+                            if (unitKey) {
+                                const seriesMax = Math.max(...timeSeries.values.map((v)=>Math.abs(v[1] ?? 0)));
+                                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;
+                                if (seriesMax > currentMax) {
+                                    maxValuesByFormat.set(unitKey, seriesMax);
+                                }
+                            }
+                        }
                         timeChartData.push({
                             name: formattedSeriesName,
                             values: (0, _core.getTimeSeriesValues)(timeSeries, timeScale)
@@ -205,7 +254,9 @@ function TimeSeriesChartPanel(props) {
             timeScale,
             timeChartData,
             timeSeriesMapping,
-            legendItems
+            legendItems,
+            seriesFormatMap,
+            maxValuesByFormat
         };
     }, [
         queryResults,
@@ -219,7 +270,27 @@ function TimeSeriesChartPanel(props) {
         categoricalPalette,
         chartId,
         chartsTheme.thresholds,
-        muiTheme.palette.primary.main
+        muiTheme.palette.primary.main,
+        formatToYAxisIndex,
+        seriesFormatMap
+    ]);
+    // Create multiple Y axes if there are additional formats
+    // Uses max values from data to compute dynamic offsets that adapt to label widths
+    const multipleYAxes = (0, _react.useMemo)(()=>{
+        if (additionalFormats.length === 0) {
+            return undefined; // Use single Y axis (default behavior)
+        }
+        // Build array of max values for each additional format (in order)
+        const maxValues = additionalFormats.map((fmt)=>{
+            const unitKey = fmt.unit;
+            return unitKey ? maxValuesByFormat?.get(unitKey) ?? 1000 : 1000;
+        });
+        return (0, _components.getFormattedMultipleYAxes)(echartsYAxis, format, additionalFormats, maxValues);
+    }, [
+        echartsYAxis,
+        format,
+        additionalFormats,
+        maxValuesByFormat
     ]);
     // Translate the legend values into columns for the table legend.
     const legendColumns = (0, _react.useMemo)(()=>{
@@ -254,16 +325,29 @@ function TimeSeriesChartPanel(props) {
         legend?.values,
         format
     ]);
+    const gridOverrides = (0, _react.useMemo)(()=>{
+        // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis
+        return echartsYAxis.show === false ? {
+            left: 0,
+            right: 0,
+            bottom: 30,
+            containLabel: false
+        } : {
+            left: yAxis && yAxis.label ? 30 : 20,
+            // With containLabel: true in theme, ECharts auto-reserves space for axis labels.
+            // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.
+            right: additionalFormats.length > 0 ? 10 : 20,
+            bottom: 0,
+            containLabel: true
+        };
+    }, [
+        echartsYAxis.show,
+        yAxis,
+        additionalFormats.length
+    ]);
     if (adjustedContentDimensions === undefined) {
         return null;
     }
-    // override default spacing, see: https://echarts.apache.org/en/option.html#grid
-    const gridLeft = yAxis && yAxis.label ? 30 : 20;
-    const gridOverrides = {
-        left: !echartsYAxis.show ? 0 : gridLeft,
-        right: 20,
-        bottom: 0
-    };
     const handleDataZoom = (event)=>{
         // TODO: add ECharts transition animation on zoom
         setTimeRange({
@@ -331,8 +415,9 @@ function TimeSeriesChartPanel(props) {
                             data: timeChartData,
                             seriesMapping: timeSeriesMapping,
                             timeScale: timeScale,
-                            yAxis: echartsYAxis,
+                            yAxis: multipleYAxes ?? echartsYAxis,
                             format: format,
+                            seriesFormatMap: computedSeriesFormatMap,
                             grid: gridOverrides,
                             isStackedBar: isStackedBar,
                             tooltipConfig: tooltipConfig,

package/lib/cjs/TimeSeriesExportAction.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -21,9 +21,10 @@ Object.defineProperty(exports, "TimeSeriesExportAction", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -109,8 +110,8 @@ const TimeSeriesExportAction = ({ queryResults, definition })=>{
     if (!canExport) {
         return null;
     }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-        title: "Export as CSV",
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: "Export as CSV",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
             size: "small",
             onClick: handleExport,

package/lib/cjs/VisualOptionsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/YAxisOptionsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -25,6 +25,7 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _timeserieschartmodel = require("./time-series-chart-model");
 function YAxisOptionsEditor({ value, onChange }) {
+    const logBase = value.logBase ? _timeserieschartmodel.LOG_BASE_CONFIG[value.logBase] : undefined;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
         title: "Y Axis",
         children: [
@@ -47,6 +48,25 @@ function YAxisOptionsEditor({ value, onChange }) {
                         format: newFormat
                     })
             }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                label: _timeserieschartmodel.Y_AXIS_CONFIG.logBase.label,
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...logBase,
+                        id: logBase?.label ?? 'None'
+                    },
+                    options: _timeserieschartmodel.LOG_BASE_OPTIONS,
+                    onChange: (__, newValue)=>{
+                        const updatedValue = {
+                            ...value,
+                            logBase: newValue.log ?? undefined
+                        };
+                        onChange(updatedValue);
+                    },
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: _timeserieschartmodel.Y_AXIS_CONFIG.label.label,
                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {

package/lib/cjs/bootstrap.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/env.d.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/getPluginModule.js

@@ -1,3 +1,15 @@
+// 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

package/lib/cjs/index-federation.js

@@ -40,7 +40,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/index.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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

package/lib/cjs/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/test/mock-query-results.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/time-series-chart-model.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -51,6 +51,12 @@ _export(exports, {
     get LINE_STYLE_CONFIG () {
         return LINE_STYLE_CONFIG;
     },
+    get LOG_BASE_CONFIG () {
+        return LOG_BASE_CONFIG;
+    },
+    get LOG_BASE_OPTIONS () {
+        return LOG_BASE_OPTIONS;
+    },
     get NEGATIVE_MIN_VALUE_MULTIPLIER () {
         return NEGATIVE_MIN_VALUE_MULTIPLIER;
     },
@@ -91,7 +97,8 @@ const DEFAULT_Y_AXIS = {
     label: '',
     format: DEFAULT_FORMAT,
     min: undefined,
-    max: undefined
+    max: undefined,
+    logBase: undefined
 };
 const Y_AXIS_CONFIG = {
     show: {
@@ -108,6 +115,9 @@ const Y_AXIS_CONFIG = {
     },
     max: {
         label: 'Max'
+    },
+    logBase: {
+        label: 'Log Base'
     }
 };
 const DEFAULT_DISPLAY = 'line';
@@ -190,6 +200,24 @@ const OPACITY_CONFIG = {
     max: 1,
     step: 0.05
 };
+const LOG_BASE_CONFIG = {
+    none: {
+        label: 'None',
+        log: undefined
+    },
+    '2': {
+        label: '2',
+        log: 2
+    },
+    '10': {
+        label: '10',
+        log: 10
+    }
+};
+const LOG_BASE_OPTIONS = Object.entries(LOG_BASE_CONFIG).map(([id, config])=>({
+        id: id,
+        ...config
+    }));
 const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;
 const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;
 function createInitialTimeSeriesChartOptions() {

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -63,7 +63,7 @@ function getCommonTimeScaleForQueries(queries) {
     const seriesData = queries.map((query)=>query.data);
     return (0, _core.getCommonTimeScale)(seriesData);
 }
-function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings) {
+function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings, yAxisIndex) {
     const lineWidth = visual.lineWidth ?? _timeserieschartmodel.DEFAULT_LINE_WIDTH;
     const pointRadius = visual.pointRadius ?? _timeserieschartmodel.DEFAULT_POINT_RADIUS;
     // Shows datapoint symbols when selected time range is roughly 15 minutes or less
@@ -81,6 +81,7 @@ function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, palet
             name: formattedName,
             color: paletteColor,
             stack: visual.stack === 'all' ? visual.stack : undefined,
+            yAxisIndex: yAxisIndex,
             label: {
                 show: false
             }
@@ -95,6 +96,7 @@ function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, palet
         connectNulls: visual.connectNulls ?? _timeserieschartmodel.DEFAULT_CONNECT_NULLS,
         color: paletteColor,
         stack: visual.stack === 'all' ? visual.stack : undefined,
+        yAxisIndex: yAxisIndex,
         sampling: 'lttb',
         progressiveThreshold: _components.OPTIMIZED_MODE_SERIES_LIMIT,
         showSymbol: showPoints,
@@ -195,18 +197,21 @@ function findMax(data) {
     return max;
 }
 function convertPanelYAxis(inputAxis = {}) {
-    const yAxis = {
-        show: true,
-        axisLabel: {
-            show: inputAxis?.show ?? _timeserieschartmodel.DEFAULT_Y_AXIS.show
-        },
-        min: inputAxis?.min,
-        max: inputAxis?.max
-    };
-    // Set the y-axis minimum relative to the data
-    if (inputAxis?.min === undefined) {
+    // Determine the appropriate min value based on scale type and user input
+    let minValue;
+    if (inputAxis.logBase !== undefined) {
+        // For logarithmic scales without explicit min:
+        // Let ECharts auto-calculate the range based on data to avoid issues with
+        // function-based calculations which can result in improper ranges (e.g., 1-10)
+        minValue = undefined;
+    } else if (inputAxis?.min !== undefined) {
+        // User explicitly set a min value - use it for both linear and log scales
+        minValue = inputAxis.min;
+    } else {
+        // For linear scales without explicit min:
+        // Use dynamic calculation with padding for better visualization
         // https://echarts.apache.org/en/option.html#yAxis.min
-        yAxis.min = (value)=>{
+        minValue = (value)=>{
             if (value.min >= 0 && value.min <= 1) {
                 // Helps with PercentDecimal units, or datasets that return 0 or 1 booleans
                 return 0;
@@ -220,6 +225,20 @@ function convertPanelYAxis(inputAxis = {}) {
             }
         };
     }
+    // Build the yAxis configuration
+    const yAxis = {
+        show: inputAxis?.show ?? _timeserieschartmodel.DEFAULT_Y_AXIS.show,
+        min: minValue,
+        max: inputAxis?.max
+    };
+    // Apply logarithmic scale settings if requested
+    if (inputAxis.logBase !== undefined) {
+        return {
+            ...yAxis,
+            type: 'log',
+            logBase: inputAxis.logBase
+        };
+    }
     return yAxis;
 }
 function roundDown(num) {

package/lib/cjs/utils/palette-gen.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/utils/palette.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/env.d.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/env.d.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/env.d.ts"],"sourcesContent":["// Copyright 2024 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\n/// <reference types=\"@rsbuild/core/types\" />\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,6CAA6C"}
+{"version":3,"sources":["../../src/env.d.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\n/// <reference types=\"@rsbuild/core/types\" />\n"],"names":[],"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,6CAA6C"}

package/lib/getPluginModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}
+{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}