fix(plugin-chart-echarts): support adhoc x-axis

superset-frontend/packages/superset-ui-chart-controls/src/operators/pivotOperator.ts

@@ -31,11 +31,13 @@ export const pivotOperator: PostProcessingFactory<PostProcessingPivot> = (
 ) => {
   const metricLabels = ensureIsArray(queryObject.metrics).map(getMetricLabel);
   const { x_axis: xAxis } = formData;
+
   if ((xAxis || queryObject.is_timeseries) && metricLabels.length) {
+    const index = [getColumnLabel(xAxis || DTTM_ALIAS)];
     return {
       operation: 'pivot',
       options: {
-        index: [xAxis || DTTM_ALIAS],
+        index,
         columns: ensureIsArray(queryObject.columns).map(getColumnLabel),
         // Create 'dummy' mean aggregates to assign cell values in pivot table
         // use the 'mean' aggregates to avoid drop NaN. PR: https://github.com/apache-superset/superset-ui/pull/1231

superset-frontend/packages/superset-ui-chart-controls/src/operators/prophetOperator.ts

@@ -16,13 +16,18 @@
  * specific language governing permissions and limitationsxw
  * under the License.
  */
-import { DTTM_ALIAS, PostProcessingProphet } from '@superset-ui/core';
+import {
+  DTTM_ALIAS,
+  getColumnLabel,
+  PostProcessingProphet,
+} from '@superset-ui/core';
 import { PostProcessingFactory } from './types';
 
 export const prophetOperator: PostProcessingFactory<PostProcessingProphet> = (
   formData,
   queryObject,
 ) => {
+  const index = getColumnLabel(formData.x_axis || DTTM_ALIAS);
   if (formData.forecastEnabled) {
     return {
       operation: 'prophet',
@@ -33,7 +38,7 @@ export const prophetOperator: PostProcessingFactory<PostProcessingProphet> = (
         yearly_seasonality: formData.forecastSeasonalityYearly,
         weekly_seasonality: formData.forecastSeasonalityWeekly,
         daily_seasonality: formData.forecastSeasonalityDaily,
-        index: formData.x_axis || DTTM_ALIAS,
+        index,
       },
     };
   }

superset-frontend/packages/superset-ui-chart-controls/src/operators/timeComparePivotOperator.ts

@@ -39,11 +39,12 @@ export const timeComparePivotOperator: PostProcessingFactory<PostProcessingPivot
           { operator: 'mean' as NumpyFunction },
         ]),
       );
+      const index = [getColumnLabel(formData.x_axis || DTTM_ALIAS)];
 
       return {
         operation: 'pivot',
         options: {
-          index: [formData.x_axis || DTTM_ALIAS],
+          index,
           columns: ensureIsArray(queryObject.columns).map(getColumnLabel),
           drop_missing_columns: false,
           flatten_columns: false,

superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/pivotOperator.test.ts

@@ -136,3 +136,35 @@ test('pivot by x_axis with groupby', () => {
     },
   });
 });
+
+test('pivot by adhoc x_axis', () => {
+  expect(
+    pivotOperator(
+      {
+        ...formData,
+        x_axis: {
+          label: 'my_case_expr',
+          expressionType: 'SQL',
+          expression: 'case when a = 1 then 1 else 0 end',
+        },
+      },
+      {
+        ...queryObject,
+        columns: ['foo', 'bar'],
+      },
+    ),
+  ).toEqual({
+    operation: 'pivot',
+    options: {
+      index: ['my_case_expr'],
+      columns: ['foo', 'bar'],
+      aggregates: {
+        'count(*)': { operator: 'mean' },
+        'sum(val)': { operator: 'mean' },
+      },
+      drop_missing_columns: false,
+      flatten_columns: false,
+      reset_index: false,
+    },
+  });
+});

superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/prophetOperator.test.ts

@@ -98,3 +98,36 @@ test('should do prophetOperator over named column', () => {
     },
   });
 });
+
+test('should do prophetOperator over adhoc column', () => {
+  expect(
+    prophetOperator(
+      {
+        ...formData,
+        x_axis: {
+          label: 'my_case_expr',
+          expressionType: 'SQL',
+          expression: 'case when a = 1 then 1 else 0 end',
+        },
+        forecastEnabled: true,
+        forecastPeriods: '3',
+        forecastInterval: '5',
+        forecastSeasonalityYearly: true,
+        forecastSeasonalityWeekly: false,
+        forecastSeasonalityDaily: false,
+      },
+      queryObject,
+    ),
+  ).toEqual({
+    operation: 'prophet',
+    options: {
+      time_grain: 'P1Y',
+      periods: 3.0,
+      confidence_interval: 5.0,
+      yearly_seasonality: true,
+      weekly_seasonality: false,
+      daily_seasonality: false,
+      index: 'my_case_expr',
+    },
+  });
+});

superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeComparePivotOperator.test.ts

@@ -135,3 +135,44 @@ test('should pivot on x-axis', () => {
     },
   });
 });
+
+test('should pivot on adhoc x-axis', () => {
+  expect(
+    timeComparePivotOperator(
+      {
+        ...formData,
+        comparison_type: 'values',
+        time_compare: ['1 year ago', '1 year later'],
+        x_axis: {
+          label: 'my_case_expr',
+          expressionType: 'SQL',
+          expression: 'case when a = 1 then 1 else 0 end',
+        },
+      },
+      queryObject,
+    ),
+  ).toEqual({
+    operation: 'pivot',
+    options: {
+      aggregates: {
+        'count(*)': { operator: 'mean' },
+        'count(*)__1 year ago': { operator: 'mean' },
+        'count(*)__1 year later': { operator: 'mean' },
+        'sum(val)': {
+          operator: 'mean',
+        },
+        'sum(val)__1 year ago': {
+          operator: 'mean',
+        },
+        'sum(val)__1 year later': {
+          operator: 'mean',
+        },
+      },
+      drop_missing_columns: false,
+      columns: ['foo', 'bar'],
+      index: ['my_case_expr'],
+      flatten_columns: false,
+      reset_index: false,
+    },
+  });
+});

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

@@ -23,6 +23,7 @@ import {
   DataRecordValue,
   DTTM_ALIAS,
   GenericDataType,
+  getColumnLabel,
   getNumberFormatter,
   isEventAnnotationLayer,
   isFormulaAnnotationLayer,
@@ -141,7 +142,8 @@ export default function transformProps(
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseForecastDatum(data, verboseMap);
-  const xAxisCol = verboseMap[xAxisOrig] || xAxisOrig || DTTM_ALIAS;
+  const xAxisCol =
+    verboseMap[xAxisOrig] || getColumnLabel(xAxisOrig || DTTM_ALIAS);
   const rawSeries = extractSeries(rebasedData, {
     fillNeighborValue: stack && !forecastEnabled ? 0 : undefined,
     xAxis: xAxisCol,