refactor(waterfall): use single echarts axis show flag per review

Address review feedback (@SBIN2010): echarts `xAxis.show` / `yAxis.show`
hides the entire axis component — line, ticks, labels, name and
gridlines — in one flag (CartesianAxisView returns early when `show` is
false), so the previous per-sub-flag approach was redundant. Also gate
the axis-specific settings (labels, formats, tick layout) with
`visibility` so they no longer clutter the panel once an axis is hidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: 2 people

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

@@ -195,6 +195,8 @@ const config: ControlPanelConfig = {
               label: t('X Axis Label'),
               renderTrigger: true,
               default: '',
+              visibility: ({ controls }) =>
+                controls?.show_x_axis?.value !== false,
             },
           },
         ],
@@ -205,6 +207,8 @@ const config: ControlPanelConfig = {
               ...sharedControls.x_axis_time_format,
               default: DEFAULT_TIME_FORMAT,
               description: `${D3_TIME_FORMAT_DOCS}.`,
+              visibility: ({ controls }) =>
+                controls?.show_x_axis?.value !== false,
             },
           },
         ],
@@ -225,6 +229,8 @@ const config: ControlPanelConfig = {
               clearable: false,
               renderTrigger: true,
               description: t('The way the ticks are laid out on the X-axis'),
+              visibility: ({ controls }) =>
+                controls?.show_x_axis?.value !== false,
             },
           },
         ],
@@ -256,6 +262,8 @@ const config: ControlPanelConfig = {
               label: t('Y Axis Label'),
               renderTrigger: true,
               default: '',
+              visibility: ({ controls }) =>
+                controls?.show_y_axis?.value !== false,
             },
           },
         ],
@@ -265,6 +273,12 @@ const config: ControlPanelConfig = {
     },
   ],
   controlOverrides: {
+    y_axis_format: {
+      visibility: ({ controls }) => controls?.show_y_axis?.value !== false,
+    },
+    currency_format: {
+      visibility: ({ controls }) => controls?.show_y_axis?.value !== false,
+    },
     groupby: {
       label: t('Breakdowns'),
       description:

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts

@@ -372,7 +372,6 @@ export default function transformProps(
   }
   axisLabel.formatter = xAxisFormatter;
   axisLabel.hideOverlap = false;
-  axisLabel.show = showXAxis;
 
   const seriesProps: Pick<BarSeriesOption, 'type' | 'stack' | 'emphasis'> = {
     type: 'bar',
@@ -446,29 +445,26 @@ export default function transformProps(
       data: [legendNames.INCREASE, legendNames.DECREASE, legendNames.TOTAL],
     },
     xAxis: {
+      show: showXAxis,
       data: xAxisData,
       type: 'category',
-      name: showXAxis ? xAxisLabel : '',
+      name: xAxisLabel,
       nameTextStyle: {
         padding: [theme.sizeUnit * 4, 0, 0, 0],
       },
       nameLocation: 'middle',
       axisLabel,
-      axisLine: { show: showXAxis },
-      axisTick: { show: showXAxis },
     },
     yAxis: {
       ...defaultYAxis,
+      show: showYAxis,
       type: 'value',
       nameTextStyle: {
         padding: [0, 0, theme.sizeUnit * 5, 0],
       },
       nameLocation: 'middle',
-      name: showYAxis ? yAxisLabel : '',
-      axisLabel: { show: showYAxis, formatter: defaultFormatter },
-      axisLine: { show: showYAxis },
-      axisTick: { show: showYAxis },
-      splitLine: { show: showYAxis },
+      name: yAxisLabel,
+      axisLabel: { formatter: defaultFormatter },
     },
     tooltip: {
       ...getDefaultTooltip(refs),

superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts

@@ -186,25 +186,18 @@ const buildAxes = (extraFormData: Record<string, unknown>) => {
 
 test('shows both axes by default', () => {
   const { xAxis, yAxis } = buildAxes({});
-  expect(xAxis.axisLabel.show).not.toBe(false);
-  expect(xAxis.axisLine.show).not.toBe(false);
-  expect(yAxis.axisLabel.show).not.toBe(false);
-  expect(yAxis.splitLine.show).not.toBe(false);
+  expect(xAxis.show).not.toBe(false);
+  expect(yAxis.show).not.toBe(false);
 });
 
-test('hides the X axis chrome when showXAxis is false', () => {
+test('hides the whole X axis when showXAxis is false', () => {
   const { xAxis } = buildAxes({ showXAxis: false });
-  expect(xAxis.axisLabel.show).toBe(false);
-  expect(xAxis.axisLine.show).toBe(false);
-  expect(xAxis.axisTick.show).toBe(false);
-  expect(xAxis.name).toBe('');
+  // echarts hides the axis line, ticks, labels, name, and gridlines when
+  // `show` is false — a single flag rather than a set of sub-flags.
+  expect(xAxis.show).toBe(false);
 });
 
-test('hides the Y axis chrome when showYAxis is false', () => {
+test('hides the whole Y axis when showYAxis is false', () => {
   const { yAxis } = buildAxes({ showYAxis: false });
-  expect(yAxis.axisLabel.show).toBe(false);
-  expect(yAxis.axisLine.show).toBe(false);
-  expect(yAxis.axisTick.show).toBe(false);
-  expect(yAxis.splitLine.show).toBe(false);
-  expect(yAxis.name).toBe('');
+  expect(yAxis.show).toBe(false);
 });