feat(timeseries): remove stream style for bar charts (#37532)

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -35,7 +35,7 @@ import {
   minorTicks,
   richTooltipSection,
   seriesOrderSection,
-  showValueSection,
+  showValueSectionWithoutStream,
   truncateXAxis,
   xAxisBounds,
   xAxisLabelRotation,
@@ -327,7 +327,7 @@ const config: ControlPanelConfig = {
         ...seriesOrderSection,
         ['color_scheme'],
         ['time_shift_color'],
-        ...showValueSection,
+        ...showValueSectionWithoutStream,
         [
           {
             name: 'stackDimension',
@@ -375,11 +375,18 @@ const config: ControlPanelConfig = {
       ],
     },
   ],
-  formDataOverrides: formData => ({
+  formDataOverrides: formData => {
-    ...formData,
+    // Reset stack to null if it's Stream when switching to Bar chart
-    metrics: getStandardizedControls().popAllMetrics(),
+    const formDataWithStack = formData as Record<string, unknown>;
-    groupby: getStandardizedControls().popAllColumns(),
+    return {
-  }),
+      ...formData,
+      metrics: getStandardizedControls().popAllMetrics(),
+      groupby: getStandardizedControls().popAllColumns(),
+      ...(formDataWithStack.stack === StackControlsValue.Stream && {
+        stack: null,
+      }),
+    };
+  },
 };
 
 export default config;

superset-frontend/plugins/plugin-chart-echarts/src/constants.ts

@@ -76,6 +76,14 @@ export const AreaChartStackControlOptions: [
   Exclude<ReactNode, null | undefined | boolean>,
 ][] = [...StackControlOptions, [StackControlsValue.Expand, t('Expand')]];
 
+export const StackControlOptionsWithoutStream: [
+  JsonValue,
+  Exclude<ReactNode, null | undefined | boolean>,
+][] = [
+  [null, t('None')],
+  [StackControlsValue.Stack, t('Stack')],
+];
+
 export const TIMEGRAIN_TO_TIMESTAMP = {
   [TimeGranularity.HOUR]: 3600 * 1000,
   [TimeGranularity.DAY]: 3600 * 1000 * 24,

superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx

@@ -28,7 +28,11 @@ import {
   SORT_SERIES_CHOICES,
   sharedControls,
 } from '@superset-ui/chart-controls';
-import { DEFAULT_LEGEND_FORM_DATA, StackControlOptions } from './constants';
+import {
+  DEFAULT_LEGEND_FORM_DATA,
+  StackControlOptions,
+  StackControlOptionsWithoutStream,
+} from './constants';
 import { DEFAULT_FORM_DATA } from './Timeseries/constants';
 import { defaultXAxis } from './defaults';
 
@@ -148,6 +152,14 @@ export const stackControl: ControlSetItem = {
   },
 };
 
+export const stackControlWithoutStream: ControlSetItem = {
+  ...stackControl,
+  config: {
+    ...stackControl.config,
+    choices: StackControlOptionsWithoutStream,
+  },
+};
+
 export const onlyTotalControl: ControlSetItem = {
   name: 'only_total',
   config: {
@@ -193,6 +205,13 @@ export const showValueSectionWithoutStack: ControlSetRow[] = [
   [onlyTotalControl],
 ];
 
+export const showValueSectionWithoutStream: ControlSetRow[] = [
+  [showValueControl],
+  [stackControlWithoutStream],
+  [onlyTotalControl],
+  [percentageThresholdControl],
+];
+
 const richTooltipControl: ControlSetItem = {
   name: 'rich_tooltip',
   config: {

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/Bar/controlPanel.test.ts

@@ -17,188 +17,204 @@
  * under the License.
  */
 import controlPanel from '../../../src/Timeseries/Regular/Bar/controlPanel';
+import {
+  StackControlOptionsWithoutStream,
+  StackControlsValue,
+} from '../../../src/constants';
 
-describe('Bar Chart Control Panel', () => {
+const config = controlPanel;
-  describe('x_axis_time_format control', () => {
-    test('should include x_axis_time_format control in the panel', () => {
-      const config = controlPanel;
 
-      // Look for x_axis_time_format control in all sections and rows
+const getControl = (controlName: string) => {
-      let foundTimeFormatControl = false;
+  for (const section of config.controlPanelSections) {
-
+    if (section && section.controlSetRows) {
-      for (const section of config.controlPanelSections) {
+      for (const row of section.controlSetRows) {
-        if (section && section.controlSetRows) {
+        for (const control of row) {
-          for (const row of section.controlSetRows) {
+          if (
-            for (const control of row) {
+            typeof control === 'object' &&
-              if (
+            control !== null &&
-                typeof control === 'object' &&
+            'name' in control &&
-                control !== null &&
+            control.name === controlName
-                'name' in control &&
+          ) {
-                control.name === 'x_axis_time_format'
+            return control;
-              ) {
-                foundTimeFormatControl = true;
-                break;
-              }
-            }
-            if (foundTimeFormatControl) break;
           }
-          if (foundTimeFormatControl) break;
         }
       }
+    }
+  }
 
-      expect(foundTimeFormatControl).toBe(true);
+  return null;
-    });
+};
 
-    test('should have correct default value for x_axis_time_format', () => {
+// Mock getStandardizedControls
-      const config = controlPanel;
+jest.mock('@superset-ui/chart-controls', () => {
-
+  const actual = jest.requireActual('@superset-ui/chart-controls');
-      // Find the x_axis_time_format control
+  return {
-      let timeFormatControl: any = null;
+    ...actual,
-
+    getStandardizedControls: jest.fn(() => ({
-      for (const section of config.controlPanelSections) {
+      popAllMetrics: jest.fn(() => []),
-        if (section && section.controlSetRows) {
+      popAllColumns: jest.fn(() => []),
-          for (const row of section.controlSetRows) {
+    })),
-            for (const control of row) {
+  };
-              if (
+});
-                typeof control === 'object' &&
+
-                control !== null &&
+test('should include x_axis_time_format control in the panel', () => {
-                'name' in control &&
+  const timeFormatControl = getControl('x_axis_time_format');
-                control.name === 'x_axis_time_format'
+  expect(timeFormatControl).toBeDefined();
-              ) {
+});
-                timeFormatControl = control;
+
-                break;
+test('should have correct default value for x_axis_time_format', () => {
-              }
+  const timeFormatControl: any = getControl('x_axis_time_format');
-            }
+  expect(timeFormatControl).toBeDefined();
-            if (timeFormatControl) break;
+  expect(timeFormatControl.config).toBeDefined();
-          }
+  expect(timeFormatControl.config.default).toBe('smart_date');
-          if (timeFormatControl) break;
+});
-        }
+
-      }
+test('should have visibility function for x_axis_time_format', () => {
-
+  const timeFormatControl: any = getControl('x_axis_time_format');
-      expect(timeFormatControl).toBeDefined();
+  expect(timeFormatControl).toBeDefined();
-      expect(timeFormatControl.config).toBeDefined();
+  expect(timeFormatControl.config.visibility).toBeDefined();
-      expect(timeFormatControl.config.default).toBe('smart_date');
+  expect(typeof timeFormatControl.config.visibility).toBe('function');
-    });
+});
-
+
-    test('should have visibility function for x_axis_time_format', () => {
+test('should have proper control configuration for x_axis_time_format', () => {
-      const config = controlPanel;
+  const timeFormatControl: any = getControl('x_axis_time_format');
-
+  expect(timeFormatControl).toBeDefined();
-      // Find the x_axis_time_format control
+  expect(timeFormatControl.config).toMatchObject({
-      let timeFormatControl: any = null;
+    default: 'smart_date',
-
+    disableStash: true,
-      for (const section of config.controlPanelSections) {
+    resetOnHide: false,
-        if (section && section.controlSetRows) {
+  });
-          for (const row of section.controlSetRows) {
+  expect(timeFormatControl.config.description).toContain('D3');
-            for (const control of row) {
+});
-              if (
+
-                typeof control === 'object' &&
+test('should have Chart Orientation section', () => {
-                control !== null &&
+  const orientationSection = config.controlPanelSections.find(
-                'name' in control &&
+    section => section && section.label === 'Chart Orientation',
-                control.name === 'x_axis_time_format'
+  );
-              ) {
+  expect(orientationSection).toBeDefined();
-                timeFormatControl = control;
+  expect(orientationSection!.expanded).toBe(true);
-                break;
+});
-              }
+
-            }
+test('should have Chart Options section with X Axis controls', () => {
-            if (timeFormatControl) break;
+  const chartOptionsSection = config.controlPanelSections.find(
-          }
+    section => section && section.label === 'Chart Options',
-          if (timeFormatControl) break;
+  );
-        }
+  expect(chartOptionsSection).toBeDefined();
-      }
+  expect(chartOptionsSection!.expanded).toBe(true);
-
+  expect(chartOptionsSection!.controlSetRows).toBeDefined();
-      expect(timeFormatControl).toBeDefined();
+  expect(chartOptionsSection!.controlSetRows!.length).toBeGreaterThan(0);
-      expect(timeFormatControl.config.visibility).toBeDefined();
+});
-      expect(typeof timeFormatControl.config.visibility).toBe('function');
+
-
+test('should have proper form data overrides', () => {
-      // The visibility function exists - the exact logic is tested implicitly through UI behavior
+  expect(config.formDataOverrides).toBeDefined();
-      // The important part is that the control has proper visibility configuration
+  expect(typeof config.formDataOverrides).toBe('function');
-    });
+
-
+  const mockFormData = {
-    test('should have proper control configuration', () => {
+    datasource: '1__table',
-      const config = controlPanel;
+    viz_type: 'echarts_timeseries_bar',
-
+    metrics: ['test_metric'],
-      // Find the x_axis_time_format control
+    groupby: ['test_column'],
-      let timeFormatControl: any = null;
+    other_field: 'test',
-
+  };
-      for (const section of config.controlPanelSections) {
+
-        if (section && section.controlSetRows) {
+  const result = config.formDataOverrides!(mockFormData);
-          for (const row of section.controlSetRows) {
+
-            for (const control of row) {
+  expect(result).toHaveProperty('metrics');
-              if (
+  expect(result).toHaveProperty('groupby');
-                typeof control === 'object' &&
+  expect(result).toHaveProperty('other_field', 'test');
-                control !== null &&
+});
-                'name' in control &&
+
-                control.name === 'x_axis_time_format'
+test('should include stack control in the panel', () => {
-              ) {
+  const stackControl = getControl('stack');
-                timeFormatControl = control;
+  expect(stackControl).toBeDefined();
-                break;
+});
-              }
+
-            }
+test('should use StackControlOptionsWithoutStream for stack control', () => {
-            if (timeFormatControl) break;
+  const stackControl: any = getControl('stack');
-          }
+  expect(stackControl).toBeDefined();
-          if (timeFormatControl) break;
+  expect(stackControl.config).toBeDefined();
-        }
+  expect(stackControl.config.choices).toBe(StackControlOptionsWithoutStream);
-      }
+});
-
+
-      expect(timeFormatControl).toBeDefined();
+test('should not include Stream option in stack control choices', () => {
-      expect(timeFormatControl.config).toMatchObject({
+  const stackControl: any = getControl('stack');
-        default: 'smart_date',
+  expect(stackControl).toBeDefined();
-        disableStash: true,
+  const { choices } = stackControl.config;
-        resetOnHide: false,
+  const streamOption = choices.find(
-      });
+    (choice: any[]) => choice[0] === StackControlsValue.Stream,
-
+  );
-      // Should have a description that includes D3 time format docs
+  expect(streamOption).toBeUndefined();
-      expect(timeFormatControl.config.description).toContain('D3');
+});
-    });
+
-  });
+test('should include None and Stack options in stack control choices', () => {
-
+  const stackControl: any = getControl('stack');
-  describe('Control panel structure for bar charts', () => {
+  expect(stackControl).toBeDefined();
-    test('should have Chart Orientation section', () => {
+  const { choices } = stackControl.config;
-      const config = controlPanel;
+  const noneOption = choices.find((choice: any[]) => choice[0] === null);
-
+  const stackOption = choices.find(
-      const orientationSection = config.controlPanelSections.find(
+    (choice: any[]) => choice[0] === StackControlsValue.Stack,
-        section => section && section.label === 'Chart Orientation',
+  );
-      );
+  expect(noneOption).toBeDefined();
-
+  expect(stackOption).toBeDefined();
-      expect(orientationSection).toBeDefined();
+});
-      expect(orientationSection!.expanded).toBe(true);
+
-    });
+test('should have correct default value for stack control', () => {
-
+  const stackControl: any = getControl('stack');
-    test('should have Chart Options section with X Axis controls', () => {
+  expect(stackControl).toBeDefined();
-      const config = controlPanel;
+  expect(stackControl.config.default).toBe(null);
-
+});
-      const chartOptionsSection = config.controlPanelSections.find(
+
-        section => section && section.label === 'Chart Options',
+test('should reset stack to null when formData has Stream value', () => {
-      );
+  const mockFormData = {
-
+    datasource: '1__table',
-      expect(chartOptionsSection).toBeDefined();
+    viz_type: 'echarts_timeseries_bar',
-      expect(chartOptionsSection!.expanded).toBe(true);
+    metrics: ['test_metric'],
-
+    groupby: ['test_column'],
-      // Should contain X Axis subsection header - this is sufficient proof
+    stack: StackControlsValue.Stream,
-      expect(chartOptionsSection!.controlSetRows).toBeDefined();
+  };
-      expect(chartOptionsSection!.controlSetRows!.length).toBeGreaterThan(0);
+
-    });
+  const result = config.formDataOverrides!(mockFormData);
-
+
-    test('should have proper form data overrides', () => {
+  expect(result.stack).toBe(null);
-      const config = controlPanel;
+});
-
+
-      expect(config.formDataOverrides).toBeDefined();
+test('should preserve stack value when formData has Stack value', () => {
-      expect(typeof config.formDataOverrides).toBe('function');
+  const mockFormData = {
-
+    datasource: '1__table',
-      // Test the form data override function
+    viz_type: 'echarts_timeseries_bar',
-      const mockFormData = {
+    metrics: ['test_metric'],
-        datasource: '1__table',
+    groupby: ['test_column'],
-        viz_type: 'echarts_timeseries_bar',
+    stack: StackControlsValue.Stack,
-        metrics: ['test_metric'],
+  };
-        groupby: ['test_column'],
+
-        other_field: 'test',
+  const result = config.formDataOverrides!(mockFormData);
-      };
+
-
+  expect(result.stack).toBe(StackControlsValue.Stack);
-      const result = config.formDataOverrides!(mockFormData);
+});
-
+
-      expect(result).toHaveProperty('metrics');
+test('should preserve stack value when formData has null value', () => {
-      expect(result).toHaveProperty('groupby');
+  const mockFormData = {
-      expect(result).toHaveProperty('other_field', 'test');
+    datasource: '1__table',
-    });
+    viz_type: 'echarts_timeseries_bar',
-  });
+    metrics: ['test_metric'],
+    groupby: ['test_column'],
+    stack: null,
+  };
+
+  const result = config.formDataOverrides!(mockFormData);
+
+  expect(result.stack).toBe(null);
+});
+
+test('should preserve stack value when formData does not have stack property', () => {
+  const mockFormData = {
+    datasource: '1__table',
+    viz_type: 'echarts_timeseries_bar',
+    metrics: ['test_metric'],
+    groupby: ['test_column'],
+  };
+
+  const result = config.formDataOverrides!(mockFormData);
+
+  expect(result).not.toHaveProperty('stack');
 });