[ENHANCEMENT] timeserieschart: add per-query stack override

timeserieschart/schemas/time-series.cue

@@ -66,6 +66,7 @@ spec: close({
 	lineStyle?:   #lineStyle
 	areaOpacity?: #areaOpacity
 	format?:      common.#format
+	stack?:       bool
 }]
 
 #lineStyle: "solid" | "dashed" | "dotted"

timeserieschart/sdk/go/time-series.go

@@ -127,6 +127,7 @@ type QuerySettingsItem struct {
 	LineStyle   string         `json:"lineStyle,omitempty" yaml:"lineStyle,omitempty"`
 	AreaOpacity float64        `json:"areaOpacity,omitempty" yaml:"areaOpacity,omitempty"`
 	Format      *common.Format `json:"format,omitempty" yaml:"format,omitempty"`
+	Stack       *bool          `json:"stack,omitempty" yaml:"stack,omitempty"`
 }
 
 type Option func(plugin *Builder) error

timeserieschart/src/QuerySettingsEditor.tsx

@@ -19,6 +19,7 @@
   MenuItem,
   Slider,
   Stack,
+  Switch,
   TextField,
   ToggleButton,
   ToggleButtonGroup,
@@ -217,6 +218,24 @@
     });
   };
 
+  const addStack = (i: number): void => {
+    updateQuerySettings(i, (qs) => {
+      qs.stack = false;
+    });
+  };
+
+  const removeStack = (i: number): void => {
+    updateQuerySettings(i, (qs) => {
+      qs.stack = undefined;
+    });
+  };
+
+  const handleStackChange = (i: number, checked: boolean): void => {
+    updateQuerySettings(i, (qs) => {
+      qs.stack = checked;
+    });
+  };
+
   const handleFormatChange = (i: number, format?: FormatOptions): void => {
     updateQuerySettings(i, (qs) => {
       qs.format = format;
@@ -287,6 +306,9 @@
             onAddFormat={() => addFormat(i)}
             onRemoveFormat={() => removeFormat(i)}
             onFormatChange={(format) => handleFormatChange(i, format)}
+            onAddStack={() => addStack(i)}
+            onRemoveStack={() => removeStack(i)}
+            onStackChange={(checked) => handleStackChange(i, checked)}
           />
         ))
       )}
@@ -319,10 +341,13 @@
   onAddFormat: () => void;
   onRemoveFormat: () => void;
   onFormatChange: (format?: FormatOptions) => void;
+  onAddStack: () => void;
+  onRemoveStack: () => void;
+  onStackChange: (checked: boolean) => void;
 }
 
 function QuerySettingsInput({
-  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },
+  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, stack },
   availableQueryIndexes,
   onQueryIndexChange,
   onColorModeChange,
@@ -340,6 +365,9 @@
   onAddFormat,
   onRemoveFormat,
   onFormatChange,
+  onAddStack,
+  onRemoveStack,
+  onStackChange,
 }: QuerySettingsInputProps): ReactElement {
   // current query index should also be selectable
   const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);
@@ -354,8 +382,9 @@
     if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });
     if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });
     if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });
+    if (stack === undefined) options.push({ key: 'stack', label: 'Stack', action: onAddStack });
     return options;
-  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddFormat]);
+  }, [colorMode, lineStyle, areaOpacity, format, stack, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddFormat, onAddStack]);
 
   const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {
     if (availableOptions.length === 1 && availableOptions[0]) {
@@ -472,6 +501,18 @@
           </SettingsSection>
         )}
 
+        {/* Stack section */}
+        {stack !== undefined && (
+          <SettingsSection label="Stack" onRemove={onRemoveStack}>
+            <Switch
+              checked={stack}
+              onChange={(e) => onStackChange(e.target.checked)}
+              slotProps={{ input: { 'aria-label': 'stack override' } }}
+            />
+            <Box sx={{ flexGrow: 1 }} />
+          </SettingsSection>
+        )}
+
         {/* Add Options Button - only show if there are available options */}
         {availableOptions.length > 0 && (
           <>

timeserieschart/src/TimeSeriesChartBase.tsx

@@ -37,6 +37,7 @@ import {
   TooltipComponent,
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
+import { getCommonTimeScale } from '@perses-dev/core';
 import {
   ChartInstance,
   ChartInstanceFocusOpts,
@@ -48,7 +49,6 @@ import {
   enableDataZoom,
   FormatOptions,
   getClosestTimestamp,
-  getCommonTimeScale,
   getFormattedAxis,
   getPointInGrid,
   OnEventsType,

timeserieschart/src/TimeSeriesChartPanel.tsx

@@ -42,8 +42,8 @@ import {
   DEFAULT_LEGEND,
   StepOptions,
   formatValue,
-  getTimeSeriesValues,
 } from '@perses-dev/components';
+import { getTimeSeriesValues } from '@perses-dev/core';
 import { TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';
 import {
   TimeSeriesChartOptions,

timeserieschart/src/VisualOptionsEditor.tsx

@@ -74,7 +74,7 @@ export function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProp
             onChange={(__, newValue) => {
               const updatedValue: TimeSeriesChartVisualOptions = {
                 ...value,
-                stack: newValue.id === 'none' ? undefined : newValue.id, // stack is optional so remove property when 'None' is selected
+                stack: newValue.id === 'none' ? undefined : newValue.id,
               };
               // stacked area chart preset to automatically set area under a curve shading
               if (newValue.id === 'all' && !value.areaOpacity) {

timeserieschart/src/time-series-chart-model.ts

@@ -46,6 +46,7 @@ export interface QuerySettingsOptions {
   lineStyle?: LineStyleType;
   areaOpacity?: number;
   format?: FormatOptions;
+  stack?: boolean;
 }
 
 export type TimeSeriesChartOptionsEditorProps = OptionsEditorProps<TimeSeriesChartOptions>;

timeserieschart/src/utils/data-transform.ts

@@ -13,14 +13,14 @@
 
 import type { YAXisComponentOption } from 'echarts';
 import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
+import { getCommonTimeScale } from '@perses-dev/core';
 import {
   OPTIMIZED_MODE_SERIES_LIMIT,
   LegacyTimeSeries,
   EChartsDataFormat,
   EChartsValues,
   TimeSeriesOption,
   StepOptions,
-  getCommonTimeScale,
 } from '@perses-dev/components';
 import { useTimeSeriesQueries, PanelData } from '@perses-dev/plugin-system';
 import { TimeScale, TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';
@@ -69,11 +69,13 @@
   visual: TimeSeriesChartVisualOptions,
   timeScale: TimeScale,
   paletteColor: string,
-  querySettings?: { lineStyle?: LineStyleType; areaOpacity?: number },
+  querySettings?: { lineStyle?: LineStyleType; areaOpacity?: number; stack?: boolean },
   yAxisIndex?: number
 ): TimeSeriesOption {
   const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;
   const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;
+  const shouldStack =
+    querySettings?.stack !== undefined ? querySettings.stack : visual.stack === 'all';
 
   // Shows datapoint symbols when selected time range is roughly 15 minutes or less
   const minuteMs = 60000;
@@ -90,7 +92,7 @@
       datasetIndex,
       name: formattedName,
       color: paletteColor,
-      stack: visual.stack === 'all' ? visual.stack : undefined,
+      stack: shouldStack ? 'all' : undefined,
       yAxisIndex: yAxisIndex,
       label: {
         show: false,
@@ -106,7 +108,7 @@
     name: formattedName,
     connectNulls: visual.connectNulls ?? DEFAULT_CONNECT_NULLS,
     color: paletteColor,
-    stack: visual.stack === 'all' ? visual.stack : undefined,
+    stack: shouldStack ? 'all' : undefined,
     yAxisIndex: yAxisIndex,
     sampling: 'lttb',
     progressiveThreshold: OPTIMIZED_MODE_SERIES_LIMIT, // https://echarts.apache.org/en/option.html#series-lines.progressiveThreshold