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

package/lib/cjs/VisualOptionsEditor.js

@@ -45,61 +45,6 @@ function VisualOptionsEditor({ value, onChange }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
         title: "Visual",
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Display",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
-                    color: "primary",
-                    exclusive: true,
-                    value: value.display,
-                    onChange: (__, newValue)=>{
-                        onChange({
-                            ...value,
-                            display: newValue
-                        });
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                            value: "line",
-                            selected: value.display === undefined || value.display === 'line',
-                            "aria-label": "display line series",
-                            children: "Line"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                            value: "bar",
-                            "aria-label": "display bar series",
-                            children: "Bar"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.label,
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
-                    "data-testid": _timeserieschartmodel.VISUAL_CONFIG.lineWidth.testId,
-                    value: value.lineWidth ?? _timeserieschartmodel.DEFAULT_LINE_WIDTH,
-                    valueLabelDisplay: "auto",
-                    step: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.step,
-                    marks: true,
-                    min: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.min,
-                    max: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.max,
-                    disabled: value.display === 'bar',
-                    onChange: handleLineWidthChange
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.label,
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
-                    "data-testid": _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.testId,
-                    value: value.areaOpacity ?? _timeserieschartmodel.DEFAULT_AREA_OPACITY,
-                    valueLabelDisplay: "auto",
-                    step: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.step,
-                    marks: true,
-                    min: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.min,
-                    max: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.max,
-                    disabled: value.display === 'bar',
-                    onChange: handleAreaOpacityChange
-                })
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: _timeserieschartmodel.VISUAL_CONFIG.stack.label,
                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
@@ -124,17 +69,92 @@ function VisualOptionsEditor({ value, onChange }) {
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: _timeserieschartmodel.VISUAL_CONFIG.connectNulls.label,
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: value.connectNulls ?? _timeserieschartmodel.DEFAULT_CONNECT_NULLS,
-                    disabled: value.display === 'bar',
-                    onChange: (e)=>{
+                label: "Display",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
+                    color: "primary",
+                    exclusive: true,
+                    value: value.display ?? _timeserieschartmodel.DEFAULT_DISPLAY,
+                    onChange: (__, newValue)=>{
                         onChange({
                             ...value,
-                            connectNulls: e.target.checked
+                            display: newValue
                         });
-                    }
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                            value: "line",
+                            selected: value.display === undefined || value.display === 'line',
+                            "aria-label": "display line series",
+                            children: "Line"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                            value: "bar",
+                            "aria-label": "display bar series",
+                            children: "Bar"
+                        })
+                    ]
                 })
+            }),
+            value.display === 'line' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                        label: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.label,
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
+                            "data-testid": _timeserieschartmodel.VISUAL_CONFIG.lineWidth.testId,
+                            value: value.lineWidth ?? _timeserieschartmodel.DEFAULT_LINE_WIDTH,
+                            valueLabelDisplay: "auto",
+                            step: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.step,
+                            marks: true,
+                            min: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.min,
+                            max: _timeserieschartmodel.VISUAL_CONFIG.lineWidth.max,
+                            onChange: handleLineWidthChange
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                        label: _timeserieschartmodel.VISUAL_CONFIG.lineStyle.label,
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
+                            color: "primary",
+                            exclusive: true,
+                            value: value.lineStyle ?? _timeserieschartmodel.DEFAULT_LINE_STYLE,
+                            onChange: (__, newValue)=>{
+                                onChange({
+                                    ...value,
+                                    lineStyle: newValue
+                                });
+                            },
+                            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)(_components.OptionsEditorControl, {
+                        label: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.label,
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
+                            "data-testid": _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.testId,
+                            value: value.areaOpacity ?? _timeserieschartmodel.DEFAULT_AREA_OPACITY,
+                            valueLabelDisplay: "auto",
+                            step: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.step,
+                            marks: true,
+                            min: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.min,
+                            max: _timeserieschartmodel.VISUAL_CONFIG.areaOpacity.max,
+                            onChange: handleAreaOpacityChange
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                        label: _timeserieschartmodel.VISUAL_CONFIG.connectNulls.label,
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                            checked: value.connectNulls ?? _timeserieschartmodel.DEFAULT_CONNECT_NULLS,
+                            onChange: (e)=>{
+                                onChange({
+                                    ...value,
+                                    connectNulls: e.target.checked
+                                });
+                            }
+                        })
+                    })
+                ]
             })
         ]
     });

package/lib/cjs/index.js

@@ -22,8 +22,8 @@ Object.defineProperty(exports, "getPluginModule", {
 });
 const _getPluginModule = require("./getPluginModule");
 _export_star(require("./TimeSeriesChart"), exports);
+_export_star(require("./GeneralSettingsEditor"), exports);
 _export_star(require("./QuerySettingsEditor"), exports);
-_export_star(require("./TimeSeriesChartOptionsEditorSettings"), exports);
 _export_star(require("./VisualOptionsEditor"), exports);
 _export_star(require("./YAxisOptionsEditor"), exports);
 _export_star(require("./TimeSeriesChartPanel"), exports);

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

@@ -27,9 +27,15 @@ _export(exports, {
     DEFAULT_CONNECT_NULLS: function() {
         return DEFAULT_CONNECT_NULLS;
     },
+    DEFAULT_DISPLAY: function() {
+        return DEFAULT_DISPLAY;
+    },
     DEFAULT_FORMAT: function() {
         return DEFAULT_FORMAT;
     },
+    DEFAULT_LINE_STYLE: function() {
+        return DEFAULT_LINE_STYLE;
+    },
     DEFAULT_LINE_WIDTH: function() {
         return DEFAULT_LINE_WIDTH;
     },
@@ -42,9 +48,15 @@ _export(exports, {
     DEFAULT_Y_AXIS: function() {
         return DEFAULT_Y_AXIS;
     },
+    LINE_STYLE_CONFIG: function() {
+        return LINE_STYLE_CONFIG;
+    },
     NEGATIVE_MIN_VALUE_MULTIPLIER: function() {
         return NEGATIVE_MIN_VALUE_MULTIPLIER;
     },
+    OPACITY_CONFIG: function() {
+        return OPACITY_CONFIG;
+    },
     POINT_SIZE_OFFSET: function() {
         return POINT_SIZE_OFFSET;
     },
@@ -98,13 +110,17 @@ const Y_AXIS_CONFIG = {
         label: 'Max'
     }
 };
+const DEFAULT_DISPLAY = 'line';
 const DEFAULT_LINE_WIDTH = 1.25;
+const DEFAULT_LINE_STYLE = 'solid';
 const DEFAULT_AREA_OPACITY = 0;
 const POINT_SIZE_OFFSET = 1.5;
 const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;
 const DEFAULT_CONNECT_NULLS = false;
 const DEFAULT_VISUAL = {
+    display: DEFAULT_DISPLAY,
     lineWidth: DEFAULT_LINE_WIDTH,
+    lineStyle: DEFAULT_LINE_STYLE,
     areaOpacity: DEFAULT_AREA_OPACITY,
     pointRadius: DEFAULT_POINT_RADIUS,
     connectNulls: DEFAULT_CONNECT_NULLS
@@ -118,6 +134,9 @@ const VISUAL_CONFIG = {
         max: 3,
         step: 0.25
     },
+    lineStyle: {
+        label: 'Line Style'
+    },
     pointRadius: {
         label: 'Point Radius',
         testId: 'slider-point-radius',
@@ -153,6 +172,24 @@ const STACK_OPTIONS = Object.entries(STACK_CONFIG).map(([id, config])=>{
         ...config
     };
 });
+const LINE_STYLE_CONFIG = {
+    solid: {
+        label: 'Solid'
+    },
+    dashed: {
+        label: 'Dashes'
+    },
+    dotted: {
+        label: 'Dots'
+    }
+};
+const OPACITY_CONFIG = {
+    label: 'Opacity',
+    testId: 'slider-opacity',
+    min: 0,
+    max: 1,
+    step: 0.05
+};
 const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;
 const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;
 function createInitialTimeSeriesChartOptions() {

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

@@ -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) {
+function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings) {
     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
@@ -102,10 +102,10 @@ function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, palet
         symbolSize: pointRadius,
         lineStyle: {
             width: lineWidth,
-            opacity: 0.95
+            type: querySettings?.lineStyle ?? visual.lineStyle
         },
         areaStyle: {
-            opacity: visual.areaOpacity ?? _timeserieschartmodel.DEFAULT_AREA_OPACITY
+            opacity: querySettings?.areaOpacity ?? visual.areaOpacity ?? _timeserieschartmodel.DEFAULT_AREA_OPACITY
         },
         // https://echarts.apache.org/en/option.html#series-line.emphasis
         emphasis: {
@@ -113,7 +113,8 @@ function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, palet
             disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0,
             lineStyle: {
                 width: lineWidth + 1,
-                opacity: 1
+                opacity: 1,
+                type: visual.lineStyle
             }
         },
         selectedMode: 'single',
@@ -126,7 +127,8 @@ function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, palet
         blur: {
             lineStyle: {
                 width: lineWidth,
-                opacity: BLUR_FADEOUT_OPACITY
+                opacity: BLUR_FADEOUT_OPACITY,
+                type: visual.lineStyle
             }
         }
     };

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

@@ -39,9 +39,9 @@ function getSeriesColor(props) {
     const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
     // Use color overrides defined in query settings in priority, if applicable
     if (querySettings) {
-        if (querySettings.colorMode === 'fixed') {
+        if (querySettings.colorMode === 'fixed' && querySettings.colorValue) {
             return querySettings.colorValue;
-        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {
+        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults && querySettings.colorValue) {
             return querySettings.colorValue;
         }
     }

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export { getPluginModule } from './getPluginModule';
 export * from './TimeSeriesChart';
+export * from './GeneralSettingsEditor';
 export * from './QuerySettingsEditor';
-export * from './TimeSeriesChartOptionsEditorSettings';
 export * from './VisualOptionsEditor';
 export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';

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,uBAAuB,CAAC;AACtC,cAAc,wCAAwC,CAAC;AACvD,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;AAC1C,cAAc,kBAAkB,CAAC"}

package/lib/index.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 export { getPluginModule } from './getPluginModule';
 export * from './TimeSeriesChart';
+export * from './GeneralSettingsEditor';
 export * from './QuerySettingsEditor';
-export * from './TimeSeriesChartOptionsEditorSettings';
 export * from './VisualOptionsEditor';
 export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 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 './QuerySettingsEditor';\nexport * from './TimeSeriesChartOptionsEditorSettings';\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,oCAAoC;AACpC,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,wBAAwB;AACtC,cAAc,yCAAyC;AACvD,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 2025 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,oCAAoC;AACpC,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"}

package/lib/time-series-chart-model.d.ts

@@ -1,5 +1,9 @@
 import { Definition, ThresholdOptions, FormatOptions } from '@perses-dev/core';
 import { OptionsEditorProps, LegendSpecOptions } from '@perses-dev/plugin-system';
+/**
+ * Line style options for time series charts.
+ */
+export type LineStyleType = 'solid' | 'dashed' | 'dotted';
 /**
  * The schema for a TimeSeriesChart panel.
  */
@@ -19,8 +23,10 @@ export interface TimeSeriesChartOptions {
 }
 export interface QuerySettingsOptions {
     queryIndex: number;
-    colorMode: 'fixed' | 'fixed-single';
-    colorValue: string;
+    colorMode?: 'fixed' | 'fixed-single';
+    colorValue?: string;
+    lineStyle?: LineStyleType;
+    areaOpacity?: number;
 }
 export type TimeSeriesChartOptionsEditorProps = OptionsEditorProps<TimeSeriesChartOptions>;
 export interface TimeSeriesChartYAxisOptions {
@@ -39,6 +45,7 @@ export interface TimeSeriesChartPaletteOptions {
 export type TimeSeriesChartVisualOptions = {
     display?: 'line' | 'bar';
     lineWidth?: number;
+    lineStyle?: LineStyleType;
     areaOpacity?: number;
     showPoints?: 'auto' | 'always';
     palette?: TimeSeriesChartPaletteOptions;
@@ -65,7 +72,9 @@ export declare const Y_AXIS_CONFIG: {
         label: string;
     };
 };
+export declare const DEFAULT_DISPLAY = "line";
 export declare const DEFAULT_LINE_WIDTH = 1.25;
+export declare const DEFAULT_LINE_STYLE = "solid";
 export declare const DEFAULT_AREA_OPACITY = 0;
 export declare const POINT_SIZE_OFFSET = 1.5;
 export declare const DEFAULT_POINT_RADIUS: number;
@@ -80,6 +89,9 @@ export declare const VISUAL_CONFIG: {
         max: number;
         step: number;
     };
+    lineStyle: {
+        label: string;
+    };
     pointRadius: {
         label: string;
         testId: string;
@@ -117,6 +129,24 @@ export declare const STACK_OPTIONS: ({
     label: string;
     id: StackOptions;
 })[];
+export declare const LINE_STYLE_CONFIG: {
+    solid: {
+        label: string;
+    };
+    dashed: {
+        label: string;
+    };
+    dotted: {
+        label: string;
+    };
+};
+export declare const OPACITY_CONFIG: {
+    label: string;
+    testId: string;
+    min: number;
+    max: number;
+    step: number;
+};
 export declare const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;
 export declare const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;
 /**

package/lib/time-series-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-chart-model.d.ts","sourceRoot":"","sources":["../../src/time-series-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,UAAU,CAAC,sBAAsB,CAAC;IACnF,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,2BAA2B,CAAC;IACpC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,MAAM,CAAC,EAAE,4BAA4B,CAAC;IACtC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,aAAa,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,GAAG,cAAc,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,iCAAiC,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;AAE3F,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;CAC9B;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,6BAA6B,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAG5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,2BAM5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAMzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAGtC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,oBAAoB,QAAyC,CAAC;AAE3E,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,4BAK5B,CAAC;AAIF,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,CAAC;AAE1C,eAAO,MAAM,YAAY;;;;;;;CAKxB,CAAC;AAEF,eAAO,MAAM,aAAa;;QAEZ,YAAY;;;QAAZ,YAAY;IAGxB,CAAC;AAKH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,sBAAsB,CAE5E"}
+{"version":3,"file":"time-series-chart-model.d.ts","sourceRoot":"","sources":["../../src/time-series-chart-model.ts"],"names":[],"mappings":"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"}

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

@@ -38,14 +38,18 @@ export const Y_AXIS_CONFIG = {
         label: 'Max'
     }
 };
+export const DEFAULT_DISPLAY = 'line';
 export const DEFAULT_LINE_WIDTH = 1.25;
+export const DEFAULT_LINE_STYLE = 'solid';
 export const DEFAULT_AREA_OPACITY = 0;
 // How much larger datapoint symbols are than line width, also applied in VisualOptionsEditor.
 export const POINT_SIZE_OFFSET = 1.5;
 export const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;
 export const DEFAULT_CONNECT_NULLS = false;
 export const DEFAULT_VISUAL = {
+    display: DEFAULT_DISPLAY,
     lineWidth: DEFAULT_LINE_WIDTH,
+    lineStyle: DEFAULT_LINE_STYLE,
     areaOpacity: DEFAULT_AREA_OPACITY,
     pointRadius: DEFAULT_POINT_RADIUS,
     connectNulls: DEFAULT_CONNECT_NULLS
@@ -61,6 +65,9 @@ export const VISUAL_CONFIG = {
         max: 3,
         step: 0.25
     },
+    lineStyle: {
+        label: 'Line Style'
+    },
     pointRadius: {
         label: 'Point Radius',
         testId: 'slider-point-radius',
@@ -96,6 +103,24 @@ export const STACK_OPTIONS = Object.entries(STACK_CONFIG).map(([id, config])=>{
         ...config
     };
 });
+export const LINE_STYLE_CONFIG = {
+    solid: {
+        label: 'Solid'
+    },
+    dashed: {
+        label: 'Dashes'
+    },
+    dotted: {
+        label: 'Dots'
+    }
+};
+export const OPACITY_CONFIG = {
+    label: 'Opacity',
+    testId: 'slider-opacity',
+    min: 0,
+    max: 1,
+    step: 0.05
+};
 // Both of these constants help produce a value that is LESS THAN the initial value.
 // For positive values, we multiply by a number less than 1 to get this outcome.
 // For negative values, we multiply to a number greater than 1 to get this outcome.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/time-series-chart-model.ts"],"sourcesContent":["// Copyright 2023 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\nimport { Definition, ThresholdOptions, FormatOptions } from '@perses-dev/core';\nimport { OptionsEditorProps, LegendSpecOptions } from '@perses-dev/plugin-system';\n\n/**\n * The schema for a TimeSeriesChart panel.\n */\nexport interface TimeSeriesChartDefinition extends Definition<TimeSeriesChartOptions> {\n  kind: 'TimeSeriesChart';\n}\n\n/**\n * The Options object supported by the TimeSeriesChartPanel plugin.\n */\nexport interface TimeSeriesChartOptions {\n  legend?: LegendSpecOptions;\n  yAxis?: TimeSeriesChartYAxisOptions;\n  thresholds?: ThresholdOptions;\n  visual?: TimeSeriesChartVisualOptions;\n  tooltip?: TooltipSpecOptions;\n  querySettings?: QuerySettingsOptions[];\n}\n\nexport interface QuerySettingsOptions {\n  queryIndex: number;\n  colorMode: 'fixed' | 'fixed-single';\n  colorValue: string;\n}\n\nexport type TimeSeriesChartOptionsEditorProps = OptionsEditorProps<TimeSeriesChartOptions>;\n\nexport interface TimeSeriesChartYAxisOptions {\n  show?: boolean;\n  label?: string;\n  format?: FormatOptions;\n  min?: number;\n  max?: number;\n}\n\nexport interface TooltipSpecOptions {\n  enablePinning: boolean;\n}\n\nexport interface TimeSeriesChartPaletteOptions {\n  mode: 'auto' | 'categorical';\n}\n\nexport type TimeSeriesChartVisualOptions = {\n  display?: 'line' | 'bar';\n  lineWidth?: number;\n  areaOpacity?: number;\n  showPoints?: 'auto' | 'always';\n  palette?: TimeSeriesChartPaletteOptions;\n  pointRadius?: number;\n  stack?: StackOptions;\n  connectNulls?: boolean;\n};\n\nexport const DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\nexport const DEFAULT_Y_AXIS: TimeSeriesChartYAxisOptions = {\n  show: true,\n  label: '',\n  format: DEFAULT_FORMAT,\n  min: undefined,\n  max: undefined,\n};\n\nexport const Y_AXIS_CONFIG = {\n  show: { label: 'Show' },\n  label: { label: 'Label' },\n  unit: { label: 'Unit' },\n  min: { label: 'Min' },\n  max: { label: 'Max' },\n};\n\nexport const DEFAULT_LINE_WIDTH = 1.25;\nexport const DEFAULT_AREA_OPACITY = 0;\n\n// How much larger datapoint symbols are than line width, also applied in VisualOptionsEditor.\nexport const POINT_SIZE_OFFSET = 1.5;\nexport const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;\n\nexport const DEFAULT_CONNECT_NULLS = false;\n\nexport const DEFAULT_VISUAL: TimeSeriesChartVisualOptions = {\n  lineWidth: DEFAULT_LINE_WIDTH,\n  areaOpacity: DEFAULT_AREA_OPACITY,\n  pointRadius: DEFAULT_POINT_RADIUS,\n  connectNulls: DEFAULT_CONNECT_NULLS,\n};\n\n// Controls how often static threshold values should be plotted so threshold data shows\n// in tooltip without flicker.\nexport const THRESHOLD_PLOT_INTERVAL = 15;\n\nexport const VISUAL_CONFIG = {\n  lineWidth: {\n    label: 'Line Width',\n    testId: 'slider-line-width',\n    min: 0.25,\n    max: 3,\n    step: 0.25,\n  },\n  pointRadius: {\n    label: 'Point Radius',\n    testId: 'slider-point-radius',\n    min: 0,\n    max: 6,\n    step: 0.25,\n  },\n  areaOpacity: {\n    label: 'Area Opacity',\n    testId: 'slider-area-opacity',\n    min: 0,\n    max: 1,\n    step: 0.05,\n  },\n  stack: {\n    label: 'Stack Series',\n  },\n  connectNulls: {\n    label: 'Connect Nulls',\n  },\n};\n\n// None is equivalent to undefined since stack is optional\nexport type StackOptions = 'none' | 'all'; // TODO: add percent option support\n\nexport const STACK_CONFIG = {\n  none: { label: 'None' },\n  all: { label: 'All' },\n  // TODO: enable option after 'Percent' implemented\n  // percent: { label: 'Percent', disabled: true }, // hidden since not implemented yet\n};\n\nexport const STACK_OPTIONS = Object.entries(STACK_CONFIG).map(([id, config]) => {\n  return {\n    id: id as StackOptions,\n    ...config,\n  };\n});\n\n// Both of these constants help produce a value that is LESS THAN the initial value.\n// For positive values, we multiply by a number less than 1 to get this outcome.\n// For negative values, we multiply to a number greater than 1 to get this outcome.\nexport const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;\nexport const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;\n\n/**\n * Creates an initial/empty options object for the TimeSeriesChartPanel.\n */\nexport function createInitialTimeSeriesChartOptions(): TimeSeriesChartOptions {\n  return {};\n}\n"],"names":["DEFAULT_FORMAT","unit","shortValues","DEFAULT_Y_AXIS","show","label","format","min","undefined","max","Y_AXIS_CONFIG","DEFAULT_LINE_WIDTH","DEFAULT_AREA_OPACITY","POINT_SIZE_OFFSET","DEFAULT_POINT_RADIUS","DEFAULT_CONNECT_NULLS","DEFAULT_VISUAL","lineWidth","areaOpacity","pointRadius","connectNulls","THRESHOLD_PLOT_INTERVAL","VISUAL_CONFIG","testId","step","stack","STACK_CONFIG","none","all","STACK_OPTIONS","Object","entries","map","id","config","POSITIVE_MIN_VALUE_MULTIPLIER","NEGATIVE_MIN_VALUE_MULTIPLIER","createInitialTimeSeriesChartOptions"],"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;AA2DjC,OAAO,MAAMA,iBAAgC;IAC3CC,MAAM;IACNC,aAAa;AACf,EAAE;AAEF,OAAO,MAAMC,iBAA8C;IACzDC,MAAM;IACNC,OAAO;IACPC,QAAQN;IACRO,KAAKC;IACLC,KAAKD;AACP,EAAE;AAEF,OAAO,MAAME,gBAAgB;IAC3BN,MAAM;QAAEC,OAAO;IAAO;IACtBA,OAAO;QAAEA,OAAO;IAAQ;IACxBJ,MAAM;QAAEI,OAAO;IAAO;IACtBE,KAAK;QAAEF,OAAO;IAAM;IACpBI,KAAK;QAAEJ,OAAO;IAAM;AACtB,EAAE;AAEF,OAAO,MAAMM,qBAAqB,KAAK;AACvC,OAAO,MAAMC,uBAAuB,EAAE;AAEtC,8FAA8F;AAC9F,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,uBAAuBH,qBAAqBE,kBAAkB;AAE3E,OAAO,MAAME,wBAAwB,MAAM;AAE3C,OAAO,MAAMC,iBAA+C;IAC1DC,WAAWN;IACXO,aAAaN;IACbO,aAAaL;IACbM,cAAcL;AAChB,EAAE;AAEF,uFAAuF;AACvF,8BAA8B;AAC9B,OAAO,MAAMM,0BAA0B,GAAG;AAE1C,OAAO,MAAMC,gBAAgB;IAC3BL,WAAW;QACTZ,OAAO;QACPkB,QAAQ;QACRhB,KAAK;QACLE,KAAK;QACLe,MAAM;IACR;IACAL,aAAa;QACXd,OAAO;QACPkB,QAAQ;QACRhB,KAAK;QACLE,KAAK;QACLe,MAAM;IACR;IACAN,aAAa;QACXb,OAAO;QACPkB,QAAQ;QACRhB,KAAK;QACLE,KAAK;QACLe,MAAM;IACR;IACAC,OAAO;QACLpB,OAAO;IACT;IACAe,cAAc;QACZf,OAAO;IACT;AACF,EAAE;AAKF,OAAO,MAAMqB,eAAe;IAC1BC,MAAM;QAAEtB,OAAO;IAAO;IACtBuB,KAAK;QAAEvB,OAAO;IAAM;AAGtB,EAAE;AAEF,OAAO,MAAMwB,gBAAgBC,OAAOC,OAAO,CAACL,cAAcM,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzE,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF,GAAG;AAEH,oFAAoF;AACpF,gFAAgF;AAChF,mFAAmF;AACnF,OAAO,MAAMC,gCAAgC,IAAI;AACjD,OAAO,MAAMC,gCAAgC,IAAI;AAEjD;;CAEC,GACD,OAAO,SAASC;IACd,OAAO,CAAC;AACV"}
+{"version":3,"sources":["../../src/time-series-chart-model.ts"],"sourcesContent":["// Copyright 2023 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\nimport { Definition, ThresholdOptions, FormatOptions } from '@perses-dev/core';\nimport { OptionsEditorProps, LegendSpecOptions } from '@perses-dev/plugin-system';\n\n/**\n * Line style options for time series charts.\n */\nexport type LineStyleType = 'solid' | 'dashed' | 'dotted';\n\n/**\n * The schema for a TimeSeriesChart panel.\n */\nexport interface TimeSeriesChartDefinition extends Definition<TimeSeriesChartOptions> {\n  kind: 'TimeSeriesChart';\n}\n\n/**\n * The Options object supported by the TimeSeriesChartPanel plugin.\n */\nexport interface TimeSeriesChartOptions {\n  legend?: LegendSpecOptions;\n  yAxis?: TimeSeriesChartYAxisOptions;\n  thresholds?: ThresholdOptions;\n  visual?: TimeSeriesChartVisualOptions;\n  tooltip?: TooltipSpecOptions;\n  querySettings?: QuerySettingsOptions[];\n}\n\nexport interface QuerySettingsOptions {\n  queryIndex: number;\n  colorMode?: 'fixed' | 'fixed-single';\n  colorValue?: string;\n  lineStyle?: LineStyleType;\n  areaOpacity?: number;\n}\n\nexport type TimeSeriesChartOptionsEditorProps = OptionsEditorProps<TimeSeriesChartOptions>;\n\nexport interface TimeSeriesChartYAxisOptions {\n  show?: boolean;\n  label?: string;\n  format?: FormatOptions;\n  min?: number;\n  max?: number;\n}\n\nexport interface TooltipSpecOptions {\n  enablePinning: boolean;\n}\n\nexport interface TimeSeriesChartPaletteOptions {\n  mode: 'auto' | 'categorical';\n}\n\nexport type TimeSeriesChartVisualOptions = {\n  display?: 'line' | 'bar';\n  lineWidth?: number;\n  lineStyle?: LineStyleType;\n  areaOpacity?: number;\n  showPoints?: 'auto' | 'always';\n  palette?: TimeSeriesChartPaletteOptions;\n  pointRadius?: number;\n  stack?: StackOptions;\n  connectNulls?: boolean;\n};\n\nexport const DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\nexport const DEFAULT_Y_AXIS: TimeSeriesChartYAxisOptions = {\n  show: true,\n  label: '',\n  format: DEFAULT_FORMAT,\n  min: undefined,\n  max: undefined,\n};\n\nexport const Y_AXIS_CONFIG = {\n  show: { label: 'Show' },\n  label: { label: 'Label' },\n  unit: { label: 'Unit' },\n  min: { label: 'Min' },\n  max: { label: 'Max' },\n};\n\nexport const DEFAULT_DISPLAY = 'line';\nexport const DEFAULT_LINE_WIDTH = 1.25;\nexport const DEFAULT_LINE_STYLE = 'solid';\nexport const DEFAULT_AREA_OPACITY = 0;\n// How much larger datapoint symbols are than line width, also applied in VisualOptionsEditor.\nexport const POINT_SIZE_OFFSET = 1.5;\nexport const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;\nexport const DEFAULT_CONNECT_NULLS = false;\n\nexport const DEFAULT_VISUAL: TimeSeriesChartVisualOptions = {\n  display: DEFAULT_DISPLAY,\n  lineWidth: DEFAULT_LINE_WIDTH,\n  lineStyle: DEFAULT_LINE_STYLE,\n  areaOpacity: DEFAULT_AREA_OPACITY,\n  pointRadius: DEFAULT_POINT_RADIUS,\n  connectNulls: DEFAULT_CONNECT_NULLS,\n};\n\n// Controls how often static threshold values should be plotted so threshold data shows\n// in tooltip without flicker.\nexport const THRESHOLD_PLOT_INTERVAL = 15;\n\nexport const VISUAL_CONFIG = {\n  lineWidth: {\n    label: 'Line Width',\n    testId: 'slider-line-width',\n    min: 0.25,\n    max: 3,\n    step: 0.25,\n  },\n  lineStyle: {\n    label: 'Line Style',\n  },\n  pointRadius: {\n    label: 'Point Radius',\n    testId: 'slider-point-radius',\n    min: 0,\n    max: 6,\n    step: 0.25,\n  },\n  areaOpacity: {\n    label: 'Area Opacity',\n    testId: 'slider-area-opacity',\n    min: 0,\n    max: 1,\n    step: 0.05,\n  },\n  stack: {\n    label: 'Stack Series',\n  },\n  connectNulls: {\n    label: 'Connect Nulls',\n  },\n};\n\n// None is equivalent to undefined since stack is optional\nexport type StackOptions = 'none' | 'all'; // TODO: add percent option support\n\nexport const STACK_CONFIG = {\n  none: { label: 'None' },\n  all: { label: 'All' },\n  // TODO: enable option after 'Percent' implemented\n  // percent: { label: 'Percent', disabled: true }, // hidden since not implemented yet\n};\n\nexport const STACK_OPTIONS = Object.entries(STACK_CONFIG).map(([id, config]) => {\n  return {\n    id: id as StackOptions,\n    ...config,\n  };\n});\n\nexport const LINE_STYLE_CONFIG = {\n  solid: { label: 'Solid' },\n  dashed: { label: 'Dashes' },\n  dotted: { label: 'Dots' },\n};\n\nexport const OPACITY_CONFIG = {\n  label: 'Opacity',\n  testId: 'slider-opacity',\n  min: 0,\n  max: 1,\n  step: 0.05,\n};\n\n// Both of these constants help produce a value that is LESS THAN the initial value.\n// For positive values, we multiply by a number less than 1 to get this outcome.\n// For negative values, we multiply to a number greater than 1 to get this outcome.\nexport const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;\nexport const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;\n\n/**\n * Creates an initial/empty options object for the TimeSeriesChartPanel.\n */\nexport function createInitialTimeSeriesChartOptions(): TimeSeriesChartOptions {\n  return {};\n}\n"],"names":["DEFAULT_FORMAT","unit","shortValues","DEFAULT_Y_AXIS","show","label","format","min","undefined","max","Y_AXIS_CONFIG","DEFAULT_DISPLAY","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_AREA_OPACITY","POINT_SIZE_OFFSET","DEFAULT_POINT_RADIUS","DEFAULT_CONNECT_NULLS","DEFAULT_VISUAL","display","lineWidth","lineStyle","areaOpacity","pointRadius","connectNulls","THRESHOLD_PLOT_INTERVAL","VISUAL_CONFIG","testId","step","stack","STACK_CONFIG","none","all","STACK_OPTIONS","Object","entries","map","id","config","LINE_STYLE_CONFIG","solid","dashed","dotted","OPACITY_CONFIG","POSITIVE_MIN_VALUE_MULTIPLIER","NEGATIVE_MIN_VALUE_MULTIPLIER","createInitialTimeSeriesChartOptions"],"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;AAmEjC,OAAO,MAAMA,iBAAgC;IAC3CC,MAAM;IACNC,aAAa;AACf,EAAE;AAEF,OAAO,MAAMC,iBAA8C;IACzDC,MAAM;IACNC,OAAO;IACPC,QAAQN;IACRO,KAAKC;IACLC,KAAKD;AACP,EAAE;AAEF,OAAO,MAAME,gBAAgB;IAC3BN,MAAM;QAAEC,OAAO;IAAO;IACtBA,OAAO;QAAEA,OAAO;IAAQ;IACxBJ,MAAM;QAAEI,OAAO;IAAO;IACtBE,KAAK;QAAEF,OAAO;IAAM;IACpBI,KAAK;QAAEJ,OAAO;IAAM;AACtB,EAAE;AAEF,OAAO,MAAMM,kBAAkB,OAAO;AACtC,OAAO,MAAMC,qBAAqB,KAAK;AACvC,OAAO,MAAMC,qBAAqB,QAAQ;AAC1C,OAAO,MAAMC,uBAAuB,EAAE;AACtC,8FAA8F;AAC9F,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,uBAAuBJ,qBAAqBG,kBAAkB;AAC3E,OAAO,MAAME,wBAAwB,MAAM;AAE3C,OAAO,MAAMC,iBAA+C;IAC1DC,SAASR;IACTS,WAAWR;IACXS,WAAWR;IACXS,aAAaR;IACbS,aAAaP;IACbQ,cAAcP;AAChB,EAAE;AAEF,uFAAuF;AACvF,8BAA8B;AAC9B,OAAO,MAAMQ,0BAA0B,GAAG;AAE1C,OAAO,MAAMC,gBAAgB;IAC3BN,WAAW;QACTf,OAAO;QACPsB,QAAQ;QACRpB,KAAK;QACLE,KAAK;QACLmB,MAAM;IACR;IACAP,WAAW;QACThB,OAAO;IACT;IACAkB,aAAa;QACXlB,OAAO;QACPsB,QAAQ;QACRpB,KAAK;QACLE,KAAK;QACLmB,MAAM;IACR;IACAN,aAAa;QACXjB,OAAO;QACPsB,QAAQ;QACRpB,KAAK;QACLE,KAAK;QACLmB,MAAM;IACR;IACAC,OAAO;QACLxB,OAAO;IACT;IACAmB,cAAc;QACZnB,OAAO;IACT;AACF,EAAE;AAKF,OAAO,MAAMyB,eAAe;IAC1BC,MAAM;QAAE1B,OAAO;IAAO;IACtB2B,KAAK;QAAE3B,OAAO;IAAM;AAGtB,EAAE;AAEF,OAAO,MAAM4B,gBAAgBC,OAAOC,OAAO,CAACL,cAAcM,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzE,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,OAAO;QAAEnC,OAAO;IAAQ;IACxBoC,QAAQ;QAAEpC,OAAO;IAAS;IAC1BqC,QAAQ;QAAErC,OAAO;IAAO;AAC1B,EAAE;AAEF,OAAO,MAAMsC,iBAAiB;IAC5BtC,OAAO;IACPsB,QAAQ;IACRpB,KAAK;IACLE,KAAK;IACLmB,MAAM;AACR,EAAE;AAEF,oFAAoF;AACpF,gFAAgF;AAChF,mFAAmF;AACnF,OAAO,MAAMgB,gCAAgC,IAAI;AACjD,OAAO,MAAMC,gCAAgC,IAAI;AAEjD;;CAEC,GACD,OAAO,SAASC;IACd,OAAO,CAAC;AACV"}

package/lib/utils/data-transform.d.ts

@@ -3,7 +3,7 @@ import { LineSeriesOption } from 'echarts/charts';
 import { StepOptions, TimeScale, TimeSeries, TimeSeriesData } from '@perses-dev/core';
 import { LegacyTimeSeries, EChartsDataFormat, TimeSeriesOption } from '@perses-dev/components';
 import { useTimeSeriesQueries, PanelData } from '@perses-dev/plugin-system';
-import { TimeSeriesChartVisualOptions, TimeSeriesChartYAxisOptions } from '../time-series-chart-model';
+import { TimeSeriesChartVisualOptions, TimeSeriesChartYAxisOptions, LineStyleType } from '../time-series-chart-model';
 export type RunningQueriesState = ReturnType<typeof useTimeSeriesQueries>;
 export declare const EMPTY_GRAPH_DATA: EChartsDataFormat;
 export declare const HIDE_DATAPOINTS_LIMIT = 70;
@@ -17,7 +17,10 @@ export declare function getCommonTimeScaleForQueries(queries: Array<PanelData<Ti
 /**
  * Gets ECharts line series option properties for regular trends
  */
-export declare function getTimeSeries(id: string, datasetIndex: number, formattedName: string, visual: TimeSeriesChartVisualOptions, timeScale: TimeScale, paletteColor: string): TimeSeriesOption;
+export declare function getTimeSeries(id: string, datasetIndex: number, formattedName: string, visual: TimeSeriesChartVisualOptions, timeScale: TimeScale, paletteColor: string, querySettings?: {
+    lineStyle?: LineStyleType;
+    areaOpacity?: number;
+}): TimeSeriesOption;
 /**
  * Gets threshold-specific line series styles
  * markLine cannot be used since it does not update yAxis max / min

package/lib/utils/data-transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-transform.d.ts","sourceRoot":"","sources":["../../../src/utils/data-transform.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAmB,MAAM,gBAAgB,CAAC;AACnE,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EAGV,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,gBAAgB,EAChB,iBAAiB,EAEjB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAQL,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE1E,eAAO,MAAM,gBAAgB,EAAE,iBAI9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS,CAG7G;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,4BAA4B,EACpC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,MAAM,GACnB,gBAAgB,CAuElB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,gBAAgB,CA2B9G;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,EACvC,GAAG,CAAC,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,MAAM,GACX,MAAM,CAMR;AA4BD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,GAAE,2BAAgC,GAAG,oBAAoB,CA8BnG;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI7C"}
+{"version":3,"file":"data-transform.d.ts","sourceRoot":"","sources":["../../../src/utils/data-transform.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAmB,MAAM,gBAAgB,CAAC;AACnE,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EAGV,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,gBAAgB,EAChB,iBAAiB,EAEjB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAQL,4BAA4B,EAC5B,2BAA2B,EAC3B,aAAa,EACd,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAE1E,eAAO,MAAM,gBAAgB,EAAE,iBAI9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS,CAG7G;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,4BAA4B,EACpC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,MAAM,EACpB,aAAa,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,aAAa,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAClE,gBAAgB,CAyElB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,gBAAgB,CA2B9G;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,EACvC,GAAG,CAAC,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,MAAM,GACX,MAAM,CAMR;AA4BD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,GAAE,2BAAgC,GAAG,oBAAoB,CA8BnG;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI7C"}

package/lib/utils/data-transform.js

@@ -30,7 +30,7 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
 }
 /**
  * Gets ECharts line series option properties for regular trends
- */ export function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor) {
+ */ export function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings) {
     const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;
     const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;
     // Shows datapoint symbols when selected time range is roughly 15 minutes or less
@@ -69,10 +69,10 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
         symbolSize: pointRadius,
         lineStyle: {
             width: lineWidth,
-            opacity: 0.95
+            type: querySettings?.lineStyle ?? visual.lineStyle
         },
         areaStyle: {
-            opacity: visual.areaOpacity ?? DEFAULT_AREA_OPACITY
+            opacity: querySettings?.areaOpacity ?? visual.areaOpacity ?? DEFAULT_AREA_OPACITY
         },
         // https://echarts.apache.org/en/option.html#series-line.emphasis
         emphasis: {
@@ -80,7 +80,8 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
             disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0,
             lineStyle: {
                 width: lineWidth + 1,
-                opacity: 1
+                opacity: 1,
+                type: visual.lineStyle
             }
         },
         selectedMode: 'single',
@@ -93,7 +94,8 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
         blur: {
             lineStyle: {
                 width: lineWidth,
-                opacity: BLUR_FADEOUT_OPACITY
+                opacity: BLUR_FADEOUT_OPACITY,
+                type: visual.lineStyle
             }
         }
     };