You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2026/08/27 03:29:34 UTC
(superset) branch master updated: feat(waterfall): add show/hide toggles for X and Y axes (#42371)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 0e172a6ff3c feat(waterfall): add show/hide toggles for X and Y axes (#42371)
0e172a6ff3c is described below
commit 0e172a6ff3c8f846766ebf166122e9dad247fab9
Author: Greg Neighbors <gk...@mac.com>
AuthorDate: Wed Aug 26 23:29:26 2026 -0400
feat(waterfall): add show/hide toggles for X and Y axes (#42371)
Co-authored-by: Greg Neighbors <gr...@Gregs-MacBook-Air-2.local>
Co-authored-by: Claude Opus 4.8 <no...@anthropic.com>
Co-authored-by: Greg Neighbors <gr...@Gregs-Air-2.lan>
---
.../src/Waterfall/controlPanel.tsx | 38 ++++++++++++++++
.../src/Waterfall/transformProps.ts | 10 +++-
.../plugin-chart-echarts/src/Waterfall/types.ts | 4 ++
.../test/Waterfall/transformProps.test.ts | 53 ++++++++++++++++++++++
4 files changed, 103 insertions(+), 2 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
index d5c1fd35e78..a1434e21b23 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -175,6 +175,18 @@ const config: ControlPanelConfig = {
label: t('X Axis'),
expanded: true,
controlSetRows: [
+ [
+ {
+ name: 'show_x_axis',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Show X axis'),
+ renderTrigger: true,
+ default: true,
+ description: t('Show or hide the X axis line, ticks, and labels'),
+ },
+ },
+ ],
[
{
name: 'x_axis_label',
@@ -183,6 +195,8 @@ const config: ControlPanelConfig = {
label: t('X Axis Label'),
renderTrigger: true,
default: '',
+ visibility: ({ controls }) =>
+ controls?.show_x_axis?.value !== false,
},
},
],
@@ -193,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,
},
},
],
@@ -213,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,
},
},
],
@@ -222,6 +240,20 @@ const config: ControlPanelConfig = {
label: t('Y Axis'),
expanded: true,
controlSetRows: [
+ [
+ {
+ name: 'show_y_axis',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Show Y axis'),
+ renderTrigger: true,
+ default: true,
+ description: t(
+ 'Show or hide the Y axis line, ticks, gridlines, and labels',
+ ),
+ },
+ },
+ ],
[
{
name: 'y_axis_label',
@@ -230,6 +262,8 @@ const config: ControlPanelConfig = {
label: t('Y Axis Label'),
renderTrigger: true,
default: '',
+ visibility: ({ controls }) =>
+ controls?.show_y_axis?.value !== false,
},
},
],
@@ -239,6 +273,10 @@ const config: ControlPanelConfig = {
},
],
controlOverrides: {
+ // Note: y_axis_format and currency_format are intentionally NOT gated on
+ // show_y_axis. They drive `defaultFormatter`, which formats the bar labels
+ // and tooltips as well as the axis, so they must stay configurable even
+ // when the Y axis itself is hidden.
groupby: {
label: t('Breakdowns'),
description:
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
index 4a82498fd59..7abeba2135f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -185,6 +185,8 @@ export default function transformProps(
xTicksLayout,
xAxisTimeFormat,
showLegend,
+ showXAxis = true,
+ showYAxis = true,
yAxisLabel,
xAxisLabel,
yAxisFormat,
@@ -433,8 +435,10 @@ export default function transformProps(
grid: {
...defaultGrid,
top: theme.sizeUnit * 7,
- bottom: theme.sizeUnit * 7,
- left: theme.sizeUnit * 5,
+ // Reclaim the axis-oriented padding when an axis is hidden so an
+ // axis-free chart gets a clean, tight layout instead of empty margins.
+ bottom: theme.sizeUnit * (showXAxis ? 7 : 3),
+ left: theme.sizeUnit * (showYAxis ? 5 : 2),
right: theme.sizeUnit * 7,
},
legend: {
@@ -443,6 +447,7 @@ export default function transformProps(
data: [legendNames.INCREASE, legendNames.DECREASE, legendNames.TOTAL],
},
xAxis: {
+ show: showXAxis,
data: xAxisData,
type: 'category',
name: xAxisLabel,
@@ -454,6 +459,7 @@ export default function transformProps(
},
yAxis: {
...defaultYAxis,
+ show: showYAxis,
type: 'value',
nameTextStyle: {
padding: [0, 0, theme.sizeUnit * 5, 0],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
index 9ca53991486..883abe2f0ac 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
@@ -55,8 +55,10 @@ export type EchartsWaterfallFormData = QueryFormData &
xAxisLabel: string;
xAxisTimeFormat?: string;
xTicksLayout?: WaterfallFormXTicksLayout;
+ showXAxis: boolean;
yAxisLabel: string;
yAxisFormat: string;
+ showYAxis: boolean;
increaseLabel?: string;
decreaseLabel?: string;
totalLabel?: string;
@@ -65,6 +67,8 @@ export type EchartsWaterfallFormData = QueryFormData &
export const DEFAULT_FORM_DATA: Partial<EchartsWaterfallFormData> = {
showLegend: true,
+ showXAxis: true,
+ showYAxis: true,
};
export interface EchartsWaterfallChartProps extends ChartProps {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
index ab5cbd8de43..b1d6f4f3f17 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
@@ -166,3 +166,56 @@ test('hide totals', () => {
['-', '-'],
]);
});
+
+const buildAxes = (extraFormData: Record<string, unknown>) => {
+ const chartProps = new ChartProps({
+ formData: { ...formData, ...extraFormData },
+ width: 800,
+ height: 600,
+ queriesData: [{ data }],
+ theme: supersetTheme,
+ });
+ const transformedProps = transformProps(
+ chartProps as unknown as EchartsWaterfallChartProps,
+ );
+ return {
+ xAxis: transformedProps.echartOptions.xAxis as any,
+ yAxis: transformedProps.echartOptions.yAxis as any,
+ grid: transformedProps.echartOptions.grid as any,
+ };
+};
+
+test('shows both axes by default', () => {
+ const { xAxis, yAxis } = buildAxes({});
+ expect(xAxis.show).not.toBe(false);
+ expect(yAxis.show).not.toBe(false);
+});
+
+test('hides the whole X axis when showXAxis is false', () => {
+ const { xAxis } = buildAxes({ showXAxis: false });
+ // 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 whole Y axis when showYAxis is false', () => {
+ const { yAxis } = buildAxes({ showYAxis: false });
+ expect(yAxis.show).toBe(false);
+});
+
+test('reclaims the bottom grid margin when the X axis is hidden', () => {
+ const { grid: shown } = buildAxes({ showXAxis: true });
+ const { grid: hidden } = buildAxes({ showXAxis: false });
+ // The bottom margin reserves room for the X-axis labels and name; with the
+ // axis hidden that space should be reclaimed for a clean, axis-free layout.
+ expect(hidden.bottom).toBeLessThan(shown.bottom);
+ // Hiding the X axis must not shrink the Y-axis (left) margin.
+ expect(hidden.left).toBe(shown.left);
+});
+
+test('reclaims the left grid margin when the Y axis is hidden', () => {
+ const { grid: shown } = buildAxes({ showYAxis: true });
+ const { grid: hidden } = buildAxes({ showYAxis: false });
+ expect(hidden.left).toBeLessThan(shown.left);
+ expect(hidden.bottom).toBe(shown.bottom);
+});