feat(plugin-chart-echarts): support non-timeseries x-axis (#17917)

* feat(plugin-chart-echarts): support non-timeseries x-axis * fix tests * change formula return type from Date to number * add x_axis test coverage * rename func and improve coverage * add x-axis control to bar chart * remove redundant console.log * fix description * make x-axis control mandatory * 🙃 * fix x-axis formatter * fix showValues * fix implicit rDTTM_ALIAS references in postProcessing * replace TIME_COLUMN with DTTM_ALIAS * fix remaining implicit indexes * fix: Disable filtering on wide result sets (#18021) * fix: handle null values in time-series table (#18039) * cleanup column_type_mappings (#17569) Signed-off-by: Đặng Minh Dũng <dungdm93@live.com> * important change to MakeFile (#18037) * add missing is_timeseries to pivot op Co-authored-by: Erik Ritter <erik.ritter@airbnb.com> Co-authored-by: Grace Guo <grace.guo@airbnb.com> Co-authored-by: Đặng Minh Dũng <dungdm93@live.com> Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
2026-04-24 18:44:53 +00:00 · 2022-01-21 21:23:23 +02:00
parent b083b3421f
commit e9651ea52f
42 changed files with 489 additions and 201 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
@@ -35,6 +35,7 @@ import {
  legendSection,
  richTooltipSection,
  showValueSection,
+  xAxisControl,
 } from '../../../controls';

 const {
@@ -56,6 +57,7 @@ const config: ControlPanelConfig = {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
+        isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? [xAxisControl] : [],
        ['metrics'],
        ['groupby'],
        [
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -17,11 +17,13 @@
 * under the License.
 */
 import {
-  t,
-  ChartMetadata,
-  ChartPlugin,
  AnnotationType,
  Behavior,
+  ChartMetadata,
+  ChartPlugin,
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
 } from '@superset-ui/core';
 import buildQuery from '../../buildQuery';
 import controlPanel from './controlPanel';
@@ -58,9 +60,11 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
        behaviors: [Behavior.INTERACTIVE_CHART],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
-        description: t(
-          'Time-series Bar Charts are used to show the changes in a metric over time as a series of bars.',
-        ),
+        description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t('Bar Charts are used to show metrics as a series of bars.')
+          : t(
+              'Time-series Bar Charts are used to show the changes in a metric over time as a series of bars.',
+            ),
        exampleGallery: [
          { url: example1 },
          { url: example2 },
@@ -72,7 +76,9 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
          AnnotationType.Interval,
          AnnotationType.Timeseries,
        ],
-        name: t('Time-series Bar Chart v2'),
+        name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t('Bar Chart v2')
+          : t('Time-series Bar Chart v2'),
        tags: [
          t('ECharts'),
          t('Predictive'),
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -17,11 +17,13 @@
 * under the License.
 */
 import {
-  t,
-  ChartMetadata,
-  ChartPlugin,
  AnnotationType,
  Behavior,
+  ChartMetadata,
+  ChartPlugin,
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
 } from '@superset-ui/core';
 import buildQuery from '../../buildQuery';
 import controlPanel from '../controlPanel';
@@ -57,9 +59,13 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
        behaviors: [Behavior.INTERACTIVE_CHART],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
-        description: t(
-          'Time-series line chart is used to visualize repeated measurements taken over regular time intervals. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
-        ),
+        description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t(
+              'Line chart is used to visualize measurements taken over a given category. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
+            )
+          : t(
+              'Time-series line chart is used to visualize repeated measurements taken over regular time intervals. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
+            ),
        exampleGallery: [{ url: example1 }, { url: example2 }],
        supportedAnnotationTypes: [
          AnnotationType.Event,
@@ -67,7 +73,9 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
          AnnotationType.Interval,
          AnnotationType.Timeseries,
        ],
-        name: t('Time-series Line Chart'),
+        name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t('Line Chart')
+          : t('Time-series Line Chart'),
        tags: [
          t('ECharts'),
          t('Predictive'),
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
@@ -32,6 +32,7 @@ import {
  legendSection,
  richTooltipSection,
  showValueSection,
+  xAxisControl,
 } from '../../../controls';

 const {
@@ -52,6 +53,7 @@ const config: ControlPanelConfig = {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
+        isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? [xAxisControl] : [],
        ['metrics'],
        ['groupby'],
        ['adhoc_filters'],
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -17,11 +17,13 @@
 * under the License.
 */
 import {
-  t,
-  ChartMetadata,
-  ChartPlugin,
  AnnotationType,
  Behavior,
+  ChartMetadata,
+  ChartPlugin,
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
 } from '@superset-ui/core';
 import buildQuery from '../../buildQuery';
 import controlPanel from './controlPanel';
@@ -56,9 +58,13 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
        behaviors: [Behavior.INTERACTIVE_CHART],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
-        description: t(
-          'Time-series Scatter Plot has time on the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.',
-        ),
+        description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t(
+              'Scatter Plot has the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.',
+            )
+          : t(
+              'Time-series Scatter Plot has time on the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.',
+            ),
        exampleGallery: [{ url: example1 }],
        supportedAnnotationTypes: [
          AnnotationType.Event,
@@ -66,7 +72,9 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
          AnnotationType.Interval,
          AnnotationType.Timeseries,
        ],
-        name: t('Time-series Scatter Plot'),
+        name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t('Scatter Plot')
+          : t('Time-series Scatter Plot'),
        tags: [
          t('ECharts'),
          t('Predictive'),
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -17,11 +17,13 @@
 * under the License.
 */
 import {
-  t,
-  ChartMetadata,
-  ChartPlugin,
  AnnotationType,
  Behavior,
+  ChartMetadata,
+  ChartPlugin,
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
 } from '@superset-ui/core';
 import buildQuery from '../../buildQuery';
 import controlPanel from '../controlPanel';
@@ -56,9 +58,13 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
        behaviors: [Behavior.INTERACTIVE_CHART],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
-        description: t(
-          'Time-series Smooth-line is a variation of line chart. Without angles and hard edges, Smooth-line looks more smarter and more professional.',
-        ),
+        description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t(
+              'Smooth-line is a variation of the line chart. Without angles and hard edges, Smooth-line sometimes looks smarter and more professional.',
+            )
+          : t(
+              'Time-series Smooth-line is a variation of the line chart. Without angles and hard edges, Smooth-line sometimes looks smarter and more professional.',
+            ),
        exampleGallery: [{ url: example1 }],
        supportedAnnotationTypes: [
          AnnotationType.Event,
@@ -66,7 +72,9 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
          AnnotationType.Interval,
          AnnotationType.Timeseries,
        ],
-        name: t('Time-series Smooth Line'),
+        name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+          ? t('Smooth Line')
+          : t('Time-series Smooth Line'),
        tags: [
          t('ECharts'),
          t('Predictive'),
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
@@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
@@ -31,7 +31,8 @@ import { DEFAULT_FORM_DATA, EchartsTimeseriesContributionType } from '../types';
 import {
  legendSection,
  richTooltipSection,
-  showValueSection,
+  showValueSectionWithoutStack,
+  xAxisControl,
 } from '../../controls';

 const {
@@ -53,6 +54,7 @@ const config: ControlPanelConfig = {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
+        isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? [xAxisControl] : [],
        ['metrics'],
        ['groupby'],
        [
@@ -100,7 +102,7 @@ const config: ControlPanelConfig = {
      expanded: true,
      controlSetRows: [
        ['color_scheme'],
-        ...showValueSection,
+        ...showValueSectionWithoutStack,
        [
          {
            name: 'markerEnabled',