@perses-dev/timeseries-chart-plugin 0.10.0 → 0.10.2

package/lib/cjs/QuerySettingsEditor.js

@@ -14,37 +14,78 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    QuerySettingsEditor: function() {
+Object.defineProperty(exports, "QuerySettingsEditor", {
+    enumerable: true,
+    get: function() {
         return QuerySettingsEditor;
-    },
-    QuerySettingsInput: function() {
-        return QuerySettingsInput;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _immer = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _timeserieschartmodel = require("./time-series-chart-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const DEFAULT_COLOR_MODE = 'fixed';
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const DEFAULT_COLOR_VALUE = '#555';
 const NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available
-function QuerySettingsEditor({ querySettingsList, onChange }) {
+function QuerySettingsEditor(props) {
+    const { onChange, value } = props;
+    const querySettingsList = value.querySettings;
+    const handleQuerySettingsChange = (newQuerySettings)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.querySettings = newQuerySettings;
+        }));
+    };
     // Every time a new query settings input is added, we want to focus the recently added input
     const recentlyAddedInputRef = (0, _react.useRef)(null);
     const focusRef = (0, _react.useRef)(false);
@@ -57,7 +98,7 @@ function QuerySettingsEditor({ querySettingsList, onChange }) {
     ]);
     const handleQueryIndexChange = (e, i)=>{
         if (querySettingsList !== undefined) {
-            onChange((0, _immer.produce)(querySettingsList, (draft)=>{
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
                 const querySettings = draft?.[i];
                 if (querySettings) {
                     querySettings.queryIndex = parseInt(e.target.value);
@@ -67,11 +108,17 @@ function QuerySettingsEditor({ querySettingsList, onChange }) {
     };
     const handleColorModeChange = (e, i)=>{
         if (querySettingsList !== undefined) {
-            onChange((0, _immer.produce)(querySettingsList, (draft)=>{
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
                 if (draft !== undefined) {
                     const querySettings = draft[i];
                     if (querySettings) {
-                        querySettings.colorMode = e.target.value;
+                        const newColorMode = e.target.value;
+                        if (!newColorMode) {
+                            querySettings.colorMode = undefined;
+                            querySettings.colorValue = undefined;
+                        } else {
+                            querySettings.colorMode = newColorMode;
+                        }
                     }
                 }
             }));
@@ -79,7 +126,7 @@ function QuerySettingsEditor({ querySettingsList, onChange }) {
     };
     const handleColorValueChange = (colorValue, i)=>{
         if (querySettingsList !== undefined) {
-            onChange((0, _immer.produce)(querySettingsList, (draft)=>{
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
                 if (draft !== undefined) {
                     const querySettings = draft[i];
                     if (querySettings) {
@@ -89,14 +136,82 @@ function QuerySettingsEditor({ querySettingsList, onChange }) {
             }));
         }
     };
+    const handleLineStyleChange = (lineStyle, i)=>{
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
+                if (draft !== undefined) {
+                    const querySettings = draft[i];
+                    if (querySettings) {
+                        querySettings.lineStyle = lineStyle;
+                    }
+                }
+            }));
+        }
+    };
+    const handleAreaOpacityChange = (_, sliderValue, i)=>{
+        const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
+                if (draft !== undefined) {
+                    const querySettings = draft[i];
+                    if (querySettings) {
+                        querySettings.areaOpacity = newValue;
+                    }
+                }
+            }));
+        }
+    };
+    // Helper function to update query settings at a specific index
+    const updateQuerySettings = (i, updater)=>{
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
+                const qs = draft[i];
+                if (qs) {
+                    updater(qs);
+                }
+            }));
+        }
+    };
     const deleteQuerySettingsInput = (i)=>{
         if (querySettingsList !== undefined) {
             const updatedQuerySettingsList = (0, _immer.produce)(querySettingsList, (draft)=>{
                 draft.splice(i, 1);
             });
-            onChange(updatedQuerySettingsList);
+            handleQuerySettingsChange(updatedQuerySettingsList);
         }
     };
+    const addColor = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.colorMode = 'fixed-single';
+            qs.colorValue = DEFAULT_COLOR_VALUE;
+        });
+    };
+    const removeColor = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.colorMode = undefined;
+            qs.colorValue = undefined;
+        });
+    };
+    const addLineStyle = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.lineStyle = 'solid';
+        });
+    };
+    const removeLineStyle = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.lineStyle = undefined;
+        });
+    };
+    const addAreaOpacity = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.areaOpacity = _timeserieschartmodel.DEFAULT_AREA_OPACITY;
+        });
+    };
+    const removeAreaOpacity = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.areaOpacity = undefined;
+        });
+    };
     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)
@@ -116,106 +231,306 @@ function QuerySettingsEditor({ querySettingsList, onChange }) {
         availableQueryIndexes
     ]);
     const defaultQuerySettings = {
-        queryIndex: firstAvailableQueryIndex,
-        colorMode: DEFAULT_COLOR_MODE,
-        colorValue: DEFAULT_COLOR_VALUE
+        queryIndex: firstAvailableQueryIndex
     };
     const addQuerySettingsInput = ()=>{
         focusRef.current = true;
         if (querySettingsList === undefined) {
-            onChange([
+            handleQuerySettingsChange([
                 defaultQuerySettings
             ]);
         } else {
-            onChange((0, _immer.produce)(querySettingsList, (draft)=>{
+            handleQuerySettingsChange((0, _immer.produce)(querySettingsList, (draft)=>{
                 draft.push(defaultQuerySettings);
             }));
         }
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
-        title: "Query settings",
-        icon: firstAvailableQueryIndex !== NO_INDEX_AVAILABLE ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-            description: "Add query settings",
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                size: "small",
-                "aria-label": "add query settings",
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        children: [
+            queryCount === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                mb: 2,
+                fontStyle: "italic",
+                children: "No query defined"
+            }) : querySettingsList?.length && querySettingsList.map((querySettings, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(QuerySettingsInput, {
+                    inputRef: i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined,
+                    querySettings: querySettings,
+                    availableQueryIndexes: availableQueryIndexes,
+                    onQueryIndexChange: (e)=>{
+                        handleQueryIndexChange(e, i);
+                    },
+                    onColorModeChange: (e)=>handleColorModeChange(e, i),
+                    onColorValueChange: (color)=>handleColorValueChange(color, i),
+                    onLineStyleChange: (lineStyle)=>handleLineStyleChange(lineStyle, i),
+                    onAreaOpacityChange: (event, value)=>handleAreaOpacityChange(event, value, i),
+                    onDelete: ()=>{
+                        deleteQuerySettingsInput(i);
+                    },
+                    onAddColor: ()=>addColor(i),
+                    onRemoveColor: ()=>removeColor(i),
+                    onAddLineStyle: ()=>addLineStyle(i),
+                    onRemoveLineStyle: ()=>removeLineStyle(i),
+                    onAddAreaOpacity: ()=>addAreaOpacity(i),
+                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i)
+                }, i)),
+            queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                sx: {
+                    marginTop: 1
+                },
                 onClick: addQuerySettingsInput,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                children: "Add Query Settings"
             })
-        }) : null,
-        children: querySettingsList && querySettingsList.length > 0 ? querySettingsList.map((querySettings, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(QuerySettingsInput, {
-                inputRef: i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined,
-                querySettings: querySettings,
-                availableQueryIndexes: availableQueryIndexes,
-                onQueryIndexChange: (e)=>{
-                    handleQueryIndexChange(e, i);
-                },
-                onColorModeChange: (e)=>handleColorModeChange(e, i),
-                onColorValueChange: (color)=>handleColorValueChange(color, i),
-                onDelete: ()=>{
-                    deleteQuerySettingsInput(i);
-                }
-            }, i)) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-            mb: 2,
-            fontStyle: "italic",
-            children: "No query settings defined"
-        })
+        ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onDelete, inputRef }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        flex: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        spacing: 1,
+    // State for dropdown menu
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    // Calculate available options
+    const availableOptions = (0, _react.useMemo)(()=>{
+        const options = [];
+        if (!colorMode) options.push({
+            key: 'color',
+            label: 'Color',
+            action: onAddColor
+        });
+        if (!lineStyle) options.push({
+            key: 'lineStyle',
+            label: 'Line Style',
+            action: onAddLineStyle
+        });
+        if (areaOpacity === undefined) options.push({
+            key: 'opacity',
+            label: 'Opacity',
+            action: onAddAreaOpacity
+        });
+        return options;
+    }, [
+        colorMode,
+        lineStyle,
+        areaOpacity,
+        onAddColor,
+        onAddLineStyle,
+        onAddAreaOpacity
+    ]);
+    const handleAddMenuClick = (event)=>{
+        if (availableOptions.length === 1 && availableOptions[0]) {
+            // If only one option left, add it directly
+            availableOptions[0].action();
+        } else {
+            // Show dropdown
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    const handleMenuClose = ()=>{
+        setAnchorEl(null);
+    };
+    const handleMenuItemClick = (action)=>{
+        action();
+        handleMenuClose();
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        spacing: 2,
+        sx: {
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                flexWrap: 'wrap',
+                gap: 1
+            },
+            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
+                            }
+                        })
+                    ]
+                }),
+                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: {
+                        flexGrow: 1
+                    }
+                }),
+                /*#__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
+function SettingsSection(props) {
+    const { label, children, onRemove } = props;
+    const theme = (0, _material.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            position: 'relative',
+            minWidth: '250px'
+        },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                select: true,
-                inputRef: inputRef,
-                value: queryIndex,
-                label: "Query",
-                onChange: onQueryIndexChange,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "caption",
                 sx: {
-                    minWidth: '75px'
+                    position: 'absolute',
+                    top: -8,
+                    left: 12,
+                    backgroundColor: theme.palette.background.code,
+                    px: 0.5,
+                    color: 'text.secondary',
+                    zIndex: 1
                 },
-                children: selectableQueryIndexes.map((queryIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                        value: queryIndex,
-                        children: [
-                            "#",
-                            queryIndex + 1
-                        ]
-                    }, `query-${queryIndex}`))
+                children: label
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
-                select: true,
-                value: colorMode,
-                fullWidth: true,
-                label: "Color mode",
-                onChange: onColorModeChange,
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                sx: {
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    p: 1
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "fixed-single",
-                        children: "Fixed (single)"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "fixed",
-                        children: "Fixed"
+                    children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        onClick: onRemove,
+                        "aria-label": `Remove ${label}`,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
                     })
                 ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
-                label: 'Query n°' + queryIndex,
-                color: colorValue,
-                onColorChange: onColorValueChange
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": `delete settings for query n°${queryIndex + 1}`,
-                size: "small",
-                onClick: onDelete,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
             })
         ]
     });

package/lib/cjs/TimeSeriesChart.js

@@ -21,7 +21,8 @@ Object.defineProperty(exports, "TimeSeriesChart", {
     }
 });
 const _timeserieschartmodel = require("./time-series-chart-model");
-const _TimeSeriesChartOptionsEditorSettings = require("./TimeSeriesChartOptionsEditorSettings");
+const _GeneralSettingsEditor = require("./GeneralSettingsEditor");
+const _QuerySettingsEditor = require("./QuerySettingsEditor");
 const _TimeSeriesChartPanel = require("./TimeSeriesChartPanel");
 const _TimeSeriesExportAction = require("./TimeSeriesExportAction");
 const TimeSeriesChart = {
@@ -31,8 +32,12 @@ const TimeSeriesChart = {
     ],
     panelOptionsEditorComponents: [
         {
-            label: 'Settings',
-            content: _TimeSeriesChartOptionsEditorSettings.TimeSeriesChartOptionsEditorSettings
+            label: 'General Settings',
+            content: _GeneralSettingsEditor.TimeSeriesChartGeneralSettings
+        },
+        {
+            label: 'Query Settings',
+            content: _QuerySettingsEditor.QuerySettingsEditor
         }
     ],
     createInitialOptions: _timeserieschartmodel.createInitialTimeSeriesChartOptions,

package/lib/cjs/TimeSeriesChartPanel.js

@@ -148,7 +148,7 @@ function TimeSeriesChartPanel(props) {
                         const datasetIndex = timeChartData.length;
                         // 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));
+                        timeSeriesMapping.push((0, _datatransform.getTimeSeries)(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings));
                         timeChartData.push({
                             name: formattedSeriesName,
                             values: (0, _core.getTimeSeriesValues)(timeSeries, timeScale)