fix: custom SQL in the XAxis (#21847)

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

@@ -21,7 +21,7 @@ import {
   getColumnLabel,
   getMetricLabel,
   PostProcessingPivot,
-  getXAxis,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { PostProcessingFactory } from './types';
 
@@ -30,7 +30,7 @@ export const pivotOperator: PostProcessingFactory<PostProcessingPivot> = (
   queryObject,
 ) => {
   const metricLabels = ensureIsArray(queryObject.metrics).map(getMetricLabel);
-  const xAxis = getXAxis(formData);
+  const xAxis = getXAxisLabel(formData);
 
   if (xAxis && metricLabels.length) {
     return {

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitationsxw
  * under the License.
  */
-import { PostProcessingProphet, getXAxis } from '@superset-ui/core';
+import { PostProcessingProphet, getXAxisLabel } from '@superset-ui/core';
 import { PostProcessingFactory } from './types';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -24,7 +24,7 @@ export const prophetOperator: PostProcessingFactory<PostProcessingProphet> = (
   formData,
   queryObject,
 ) => {
-  const xAxis = getXAxis(formData);
+  const xAxis = getXAxisLabel(formData);
   if (formData.forecastEnabled && xAxis) {
     return {
       operation: 'prophet',

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

@@ -22,7 +22,7 @@ import {
   ensureIsArray,
   getMetricLabel,
   ComparisionType,
-  getXAxis,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { PostProcessingFactory } from './types';
 import { getMetricOffsetsMap, isTimeComparison } from './utils';
@@ -34,7 +34,7 @@ export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
   const metrics = ensureIsArray(queryObject.metrics);
   const columns = ensureIsArray(queryObject.columns);
   const { truncate_metric } = formData;
-  const xAxis = getXAxis(formData);
+  const xAxis = getXAxisLabel(formData);
   // remove or rename top level of column name(metric name) in the MultiIndex when
   // 1) only 1 metric
   // 2) exist dimentsion

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

@@ -22,7 +22,7 @@ import {
   getColumnLabel,
   NumpyFunction,
   PostProcessingPivot,
-  getXAxis,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { getMetricOffsetsMap, isTimeComparison } from './utils';
 import { PostProcessingFactory } from './types';
@@ -30,7 +30,7 @@ import { PostProcessingFactory } from './types';
 export const timeComparePivotOperator: PostProcessingFactory<PostProcessingPivot> =
   (formData, queryObject) => {
     const metricOffsetMap = getMetricOffsetsMap(formData, queryObject);
-    const xAxis = getXAxis(formData);
+    const xAxis = getXAxisLabel(formData);
 
     if (isTimeComparison(formData, queryObject) && xAxis) {
       const aggregates = Object.fromEntries(

superset-frontend/packages/superset-ui-core/src/query/getXAxis.ts

@@ -23,6 +23,8 @@ import {
   getColumnLabel,
   isQueryFormColumn,
   QueryFormData,
+  QueryFormColumn,
+  Optional,
 } from '@superset-ui/core';
 
 export const isXAxisSet = (formData: QueryFormData) =>
@@ -32,14 +34,24 @@ export const hasGenericChartAxes = isFeatureEnabled(
   FeatureFlag.GENERIC_CHART_AXES,
 );
 
-export const getXAxis = (formData: QueryFormData): string | undefined => {
+export const getXAxisColumn = (
+  formData: QueryFormData,
+): Optional<QueryFormColumn> => {
   // The formData should be "raw form_data" -- the snake_case version of formData rather than camelCase.
   if (!(formData.granularity_sqla || formData.x_axis)) {
     return undefined;
   }
 
   if (isXAxisSet(formData)) {
-    return getColumnLabel(formData.x_axis);
+    return formData.x_axis;
   }
   return DTTM_ALIAS;
 };
+
+export const getXAxisLabel = (formData: QueryFormData): Optional<string> => {
+  const col = getXAxisColumn(formData);
+  if (col) {
+    return getColumnLabel(col);
+  }
+  return undefined;
+};

superset-frontend/packages/superset-ui-core/src/query/index.ts

@@ -29,7 +29,12 @@ export { default as getMetricLabel } from './getMetricLabel';
 export { default as DatasourceKey } from './DatasourceKey';
 export { default as normalizeOrderBy } from './normalizeOrderBy';
 export { normalizeTimeColumn } from './normalizeTimeColumn';
-export { getXAxis, isXAxisSet, hasGenericChartAxes } from './getXAxis';
+export {
+  getXAxisLabel,
+  getXAxisColumn,
+  isXAxisSet,
+  hasGenericChartAxes,
+} from './getXAxis';
 
 export * from './types/AnnotationLayer';
 export * from './types/QueryFormData';

superset-frontend/packages/superset-ui-core/src/types/index.ts

@@ -20,4 +20,6 @@ export * from '../query/types';
 
 export type Maybe<T> = T | null;
 
+export type Optional<T> = T | undefined;
+
 export type ValueOf<T> = T[keyof T];

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts

@@ -19,7 +19,7 @@
 import {
   buildQueryContext,
   ensureIsArray,
-  getXAxis,
+  getXAxisColumn,
   isXAxisSet,
   QueryFormData,
 } from '@superset-ui/core';
@@ -35,7 +35,9 @@ export default function buildQuery(formData: QueryFormData) {
     {
       ...baseQueryObject,
       columns: [
-        ...(isXAxisSet(formData) ? ensureIsArray(getXAxis(formData)) : []),
+        ...(isXAxisSet(formData)
+          ? ensureIsArray(getXAxisColumn(formData))
+          : []),
       ],
       ...(isXAxisSet(formData) ? {} : { is_timeseries: true }),
       post_processing: [

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

@@ -26,7 +26,7 @@ import {
   smartDateVerboseFormatter,
   NumberFormatter,
   TimeFormatter,
-  getXAxis,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { EChartsCoreOption, graphic } from 'echarts';
 import {
@@ -102,7 +102,7 @@ export default function transformProps(
   const { r, g, b } = colorPicker;
   const mainColor = `rgb(${r}, ${g}, ${b})`;
 
-  const timeColumn = getXAxis(rawFormData) as string;
+  const timeColumn = getXAxisLabel(rawFormData) as string;
   let trendLineData;
   let percentChange = 0;
   let bigNumber = data.length === 0 ? null : data[0][metricName];

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/buildQuery.ts

@@ -23,8 +23,8 @@ import {
   PostProcessingPivot,
   QueryFormData,
   QueryObject,
-  getXAxis,
   isXAxisSet,
+  getXAxisColumn,
 } from '@superset-ui/core';
 import {
   pivotOperator,
@@ -54,7 +54,9 @@ export default function buildQuery(formData: QueryFormData) {
       const queryObject = {
         ...baseQueryObject,
         columns: [
-          ...(isXAxisSet(formData) ? ensureIsArray(getXAxis(formData)) : []),
+          ...(isXAxisSet(formData)
+            ? ensureIsArray(getXAxisColumn(formData))
+            : []),
           ...ensureIsArray(fd.groupby),
         ],
         series_columns: fd.groupby,

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

@@ -29,7 +29,7 @@ import {
   QueryFormData,
   TimeseriesChartDataResponseResult,
   TimeseriesDataRecord,
-  getXAxis,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
 import {
@@ -152,7 +152,9 @@ export default function transformProps(
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
 
-  const xAxisCol = getXAxis(chartProps.rawFormData as QueryFormData) as string;
+  const xAxisCol = getXAxisLabel(
+    chartProps.rawFormData as QueryFormData,
+  ) as string;
 
   const rebasedDataA = rebaseForecastDatum(data1, verboseMap);
   const rawSeriesA = extractSeries(rebasedDataA, {

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

@@ -22,7 +22,7 @@ import {
   normalizeOrderBy,
   PostProcessingPivot,
   QueryFormData,
-  getXAxis,
+  getXAxisColumn,
   isXAxisSet,
 } from '@superset-ui/core';
 import {
@@ -72,7 +72,9 @@ export default function buildQuery(formData: QueryFormData) {
       {
         ...baseQueryObject,
         columns: [
-          ...(isXAxisSet(formData) ? ensureIsArray(getXAxis(formData)) : []),
+          ...(isXAxisSet(formData)
+            ? ensureIsArray(getXAxisColumn(formData))
+            : []),
           ...ensureIsArray(groupby),
         ],
         series_columns: groupby,

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

@@ -28,8 +28,8 @@ import {
   isTimeseriesAnnotationLayer,
   TimeseriesChartDataResponseResult,
   t,
-  getXAxis,
   AxisType,
+  getXAxisLabel,
 } from '@superset-ui/core';
 import { isDerivedSeries } from '@superset-ui/chart-controls';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
@@ -148,7 +148,7 @@ export default function transformProps(
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseForecastDatum(data, verboseMap);
-  const xAxisCol = getXAxis(chartProps.rawFormData) as string;
+  const xAxisCol = getXAxisLabel(chartProps.rawFormData) as string;
   const isHorizontal = orientation === OrientationType.horizontal;
   const { totalStackedValues, thresholdValues } = extractDataTotalValues(
     rebasedData,