feat: adding XAxis to BigNumberTrend (#21577)

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

@@ -18,7 +18,9 @@
  */
 import {
   buildQueryContext,
-  DTTM_ALIAS,
+  ensureIsArray,
+  getXAxis,
+  isXAxisSet,
   QueryFormData,
 } from '@superset-ui/core';
 import {
@@ -29,25 +31,19 @@ import {
 } from '@superset-ui/chart-controls';
 
 export default function buildQuery(formData: QueryFormData) {
-  return buildQueryContext(formData, baseQueryObject => {
-    const { x_axis } = formData;
-    const is_timeseries = x_axis === DTTM_ALIAS || !x_axis;
-
-    return [
-      {
-        ...baseQueryObject,
-        is_timeseries: true,
-        post_processing: [
-          pivotOperator(formData, {
-            ...baseQueryObject,
-            index: x_axis,
-            is_timeseries,
-          }),
-          rollingWindowOperator(formData, baseQueryObject),
-          resampleOperator(formData, baseQueryObject),
-          flattenOperator(formData, baseQueryObject),
-        ],
-      },
-    ];
-  });
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+      columns: [
+        ...(isXAxisSet(formData) ? ensureIsArray(getXAxis(formData)) : []),
+      ],
+      ...(isXAxisSet(formData) ? {} : { is_timeseries: true }),
+      post_processing: [
+        pivotOperator(formData, baseQueryObject),
+        rollingWindowOperator(formData, baseQueryObject),
+        resampleOperator(formData, baseQueryObject),
+        flattenOperator(formData, baseQueryObject),
+      ],
+    },
+  ]);
 }

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

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { smartDateFormatter, t } from '@superset-ui/core';
+import {
+  FeatureFlag,
+  isFeatureEnabled,
+  smartDateFormatter,
+  t,
+} from '@superset-ui/core';
 import {
   ControlPanelConfig,
   D3_FORMAT_DOCS,
@@ -24,17 +29,27 @@ import {
   formatSelectOptions,
   getStandardizedControls,
   sections,
+  temporalColumnMixin,
 } from '@superset-ui/chart-controls';
 import React from 'react';
 import { headerFontSize, subheaderFontSize } from '../sharedControls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
-    sections.legacyTimeseriesTime,
+    sections.genericTime,
     {
       label: t('Query'),
       expanded: true,
-      controlSetRows: [['metric'], ['adhoc_filters']],
+      controlSetRows: [
+        [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null],
+        [
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+            ? 'time_grain_sqla'
+            : null,
+        ],
+        ['metric'],
+        ['adhoc_filters'],
+      ],
     },
     {
       label: t('Options'),
@@ -270,6 +285,10 @@ const config: ControlPanelConfig = {
     y_axis_format: {
       label: t('Number format'),
     },
+    x_axis: {
+      label: t('TEMPORAL X-AXIS'),
+      ...temporalColumnMixin,
+    },
   },
   formDataOverrides: formData => ({
     ...formData,

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

@@ -17,17 +17,16 @@
  * under the License.
  */
 import {
-  DTTM_ALIAS,
   extractTimegrain,
   getNumberFormatter,
   NumberFormats,
-  QueryFormData,
   GenericDataType,
   getMetricLabel,
   t,
   smartDateVerboseFormatter,
   NumberFormatter,
   TimeFormatter,
+  getXAxis,
 } from '@superset-ui/core';
 import { EChartsCoreOption, graphic } from 'echarts';
 import {
@@ -88,7 +87,7 @@ export default function transformProps(
     yAxisFormat,
     timeRangeFixed,
   } = formData;
-  const granularity = extractTimegrain(rawFormData as QueryFormData);
+  const granularity = extractTimegrain(rawFormData);
   const {
     data = [],
     colnames = [],
@@ -103,10 +102,11 @@ export default function transformProps(
   const { r, g, b } = colorPicker;
   const mainColor = `rgb(${r}, ${g}, ${b})`;
 
+  const timeColumn = getXAxis(rawFormData) as string;
   let trendLineData;
   let percentChange = 0;
   let bigNumber = data.length === 0 ? null : data[0][metricName];
-  let timestamp = data.length === 0 ? null : data[0][DTTM_ALIAS];
+  let timestamp = data.length === 0 ? null : data[0][timeColumn];
   let bigNumberFallback;
 
   const metricColtypeIndex = colnames.findIndex(name => name === metricName);
@@ -115,7 +115,7 @@ export default function transformProps(
 
   if (data.length > 0) {
     const sortedData = (data as BigNumberDatum[])
-      .map(d => [d[DTTM_ALIAS], parseMetricValue(d[metricName])])
+      .map(d => [d[timeColumn], parseMetricValue(d[metricName])])
       // sort in time descending order
       .sort((a, b) => (a[0] !== null && b[0] !== null ? b[0] - a[0] : 0));
 

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

@@ -43,7 +43,7 @@ export type BigNumberWithTrendlineFormData = BigNumberTotalFormData & {
   compareLag?: string | number;
 };
 
-export type BigNumberTotalChartProps = ChartProps & {
+export type BigNumberTotalChartProps = ChartProps<QueryFormData> & {
   formData: BigNumberTotalFormData;
   queriesData: (ChartDataResponseResult & {
     data?: BigNumberDatum[];