From f405ba033e04e2694f869738163d33e1d3991297 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 1 Dec 2023 10:04:53 -0300
Subject: [PATCH] feat: Adds legacy time support for Waterfall chart (#26136)

---
 .../plugin-chart-echarts/src/Waterfall/buildQuery.ts      | 7 +++----
 .../plugin-chart-echarts/src/Waterfall/controlPanel.tsx   | 8 +++++---
 .../plugins/plugin-chart-echarts/src/Waterfall/index.ts   | 2 +-
 .../plugin-chart-echarts/src/Waterfall/transformProps.ts  | 6 +++++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
index e47effb3c272..deb3571938bf 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
@@ -19,15 +19,14 @@
 import {
   buildQueryContext,
   ensureIsArray,
-  getXAxisColumn,
-  isXAxisSet,
   QueryFormData,
 } from '@superset-ui/core';
 
 export default function buildQuery(formData: QueryFormData) {
+  const { x_axis, granularity_sqla, groupby } = formData;
   const columns = [
-    ...(isXAxisSet(formData) ? ensureIsArray(getXAxisColumn(formData)) : []),
-    ...ensureIsArray(formData.groupby),
+    ...ensureIsArray(x_axis || granularity_sqla),
+    ...ensureIsArray(groupby),
   ];
   return buildQueryContext(formData, baseQueryObject => [
     {
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 7a71dd4fcba5..d07e5175e657 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -17,25 +17,27 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { hasGenericChartAxes, t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   ControlSubSectionHeader,
   D3_TIME_FORMAT_DOCS,
   DEFAULT_TIME_FORMAT,
   formatSelectOptions,
+  sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
 import { showValueControl } from '../controls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    sections.genericTime,
     {
       label: t('Query'),
       expanded: true,
       controlSetRows: [
-        ['x_axis'],
-        ['time_grain_sqla'],
+        [hasGenericChartAxes ? 'x_axis' : null],
+        [hasGenericChartAxes ? 'time_grain_sqla' : null],
         ['groupby'],
         ['metric'],
         ['adhoc_filters'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
index c0d7a1106742..b8c66fabb1aa 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
@@ -61,7 +61,7 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
           { url: example3 },
         ],
         name: t('Waterfall Chart'),
-        tags: [t('Categorical'), t('Comparison'), t('ECharts')],
+        tags: [t('Categorical'), t('Comparison'), t('ECharts'), t('Popular')],
         thumbnail,
       }),
       transformProps,
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 7b5faed1b20a..84fbbf6cb9f9 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,7 @@ export default function transformProps(
   const { setDataMask = () => {}, onContextMenu, onLegendStateChanged } = hooks;
   const {
     currencyFormat,
+    granularitySqla = '',
     groupby,
     increaseColor,
     decreaseColor,
@@ -213,7 +214,10 @@ export default function transformProps(
   const breakdownName = isAdhocColumn(breakdownColumn)
     ? breakdownColumn.label!
     : breakdownColumn;
-  const xAxisName = isAdhocColumn(xAxis) ? xAxis.label! : xAxis;
+  const xAxisColumn = xAxis || granularitySqla;
+  const xAxisName = isAdhocColumn(xAxisColumn)
+    ? xAxisColumn.label!
+    : xAxisColumn;
   const metricLabel = getMetricLabel(metric);
 
   const transformedData = transformer({