fix(plugin-chart-echarts): support forced categorical x-axis (apache#…

…26404)

superset-frontend/packages/superset-ui-chart-controls/src/constants.ts

@@ -17,12 +17,11 @@
  * under the License.
  */
 import {
-  t,
-  QueryMode,
   DTTM_ALIAS,
   GenericDataType,
   QueryColumn,
-  DatasourceType,
+  QueryMode,
+  t,
 } from '@superset-ui/core';
 import { ColumnMeta, SortSeriesData, SortSeriesType } from './types';
 
@@ -43,6 +42,7 @@ export const COLUMN_NAME_ALIASES: Record<string, string> = {
 export const DATASET_TIME_COLUMN_OPTION: ColumnMeta = {
   verbose_name: COLUMN_NAME_ALIASES[DTTM_ALIAS],
   column_name: DTTM_ALIAS,
+  type: 'TIMESTAMP',
   type_generic: GenericDataType.TEMPORAL,
   description: t(
     'A reference to the [Time] configuration, taking granularity into account',
@@ -51,8 +51,9 @@ export const DATASET_TIME_COLUMN_OPTION: ColumnMeta = {
 
 export const QUERY_TIME_COLUMN_OPTION: QueryColumn = {
   column_name: DTTM_ALIAS,
-  type: DatasourceType.Query,
-  is_dttm: false,
+  is_dttm: true,
+  type: 'TIMESTAMP',
+  type_generic: GenericDataType.TEMPORAL,
 };
 
 export const QueryModeLabel = {

superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatasourceType } from '@superset-ui/core';
+import { DatasourceType, GenericDataType } from '@superset-ui/core';
 import { Dataset } from './types';
 
 export const TestDataset: Dataset = {
@@ -37,7 +37,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'BIGINT',
-      type_generic: 0,
+      type_generic: GenericDataType.NUMERIC,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -55,7 +55,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(16)',
-      type_generic: 1,
+      type_generic: GenericDataType.STRING,
       verbose_name: '',
       warning_markdown: null,
     },
@@ -73,7 +73,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(10)',
-      type_generic: 1,
+      type_generic: GenericDataType.STRING,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -91,7 +91,7 @@ export const TestDataset: Dataset = {
       is_dttm: true,
       python_date_format: null,
       type: 'TIMESTAMP WITHOUT TIME ZONE',
-      type_generic: 2,
+      type_generic: GenericDataType.TEMPORAL,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -109,7 +109,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(255)',
-      type_generic: 1,
+      type_generic: GenericDataType.STRING,
       verbose_name: null,
       warning_markdown: null,
     },

superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx

@@ -20,6 +20,7 @@ import { hasGenericChartAxes, t } from '@superset-ui/core';
 import { ControlPanelSectionConfig, ControlSetRow } from '../types';
 import {
   contributionModeControl,
+  xAxisForceCategoricalControl,
   xAxisSortAscControl,
   xAxisSortControl,
   xAxisSortSeriesAscendingControl,
@@ -55,6 +56,7 @@ export const echartsTimeSeriesQueryWithXAxisSort: ControlPanelSectionConfig = {
   controlSetRows: [
     [hasGenericChartAxes ? 'x_axis' : null],
     [hasGenericChartAxes ? 'time_grain_sqla' : null],
+    [hasGenericChartAxes ? xAxisForceCategoricalControl : null],
     [hasGenericChartAxes ? xAxisSortControl : null],
     [hasGenericChartAxes ? xAxisSortAscControl : null],
     [hasGenericChartAxes ? xAxisSortSeriesControl : null],

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx

@@ -20,9 +20,9 @@
 import {
   ContributionType,
   ensureIsArray,
+  GenericDataType,
   getColumnLabel,
   getMetricLabel,
-  isDefined,
   QueryFormColumn,
   QueryFormMetric,
   t,
@@ -38,6 +38,7 @@ import {
   DEFAULT_XAXIS_SORT_SERIES_DATA,
   SORT_SERIES_CHOICES,
 } from '../constants';
+import { checkColumnType } from '../utils/checkColumnType';
 
 export const contributionModeControl = {
   name: 'contributionMode',
@@ -54,18 +55,29 @@ export const contributionModeControl = {
   },
 };
 
-function isTemporal(controls: ControlStateMapping): boolean {
-  return !(
-    isDefined(controls?.x_axis?.value) &&
-    !isTemporalColumn(
+function isForcedCategorical(controls: ControlStateMapping): boolean {
+  return (
+    checkColumnType(
       getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
       controls?.datasource?.datasource,
+      [GenericDataType.NUMERIC],
+    ) && !!controls?.xAxisForceCategorical?.value
+  );
+}
+
+function isSortable(controls: ControlStateMapping): boolean {
+  return (
+    isForcedCategorical(controls) ||
+    checkColumnType(
+      getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
+      controls?.datasource?.datasource,
+      [GenericDataType.STRING, GenericDataType.BOOLEAN],
     )
   );
 }
 
 const xAxisSortVisibility = ({ controls }: { controls: ControlStateMapping }) =>
-  !isTemporal(controls) &&
+  isSortable(controls) &&
   ensureIsArray(controls?.groupby?.value).length === 0 &&
   ensureIsArray(controls?.metrics?.value).length === 1;
 
@@ -74,7 +86,7 @@ const xAxisMultiSortVisibility = ({
 }: {
   controls: ControlStateMapping;
 }) =>
-  !isTemporal(controls) &&
+  isSortable(controls) &&
   (!!ensureIsArray(controls?.groupby?.value).length ||
     ensureIsArray(controls?.metrics?.value).length > 1);
 
@@ -141,7 +153,29 @@ export const xAxisSortAscControl = {
         : t('X-Axis Sort Ascending'),
     default: true,
     description: t('Whether to sort ascending or descending on the base Axis.'),
-    visibility: xAxisSortVisibility,
+    visibility: ({ controls }: { controls: ControlStateMapping }) =>
+      controls?.x_axis_sort?.value !== undefined &&
+      xAxisSortVisibility({ controls }),
+  },
+};
+
+export const xAxisForceCategoricalControl = {
+  name: 'xAxisForceCategorical',
+  config: {
+    type: 'CheckboxControl',
+    label: () => t('Force categorical'),
+    default: false,
+    description: t('Treat values as categorical.'),
+    initialValue: (control: ControlState, state: ControlPanelState | null) =>
+      state?.form_data?.x_axis_sort !== undefined || control.value,
+    renderTrigger: true,
+    visibility: ({ controls }: { controls: ControlStateMapping }) =>
+      checkColumnType(
+        getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
+        controls?.datasource?.datasource,
+        [GenericDataType.NUMERIC],
+      ),
+    shouldMapStateToProps: () => true,
   },
 };
 
@@ -173,6 +207,8 @@ export const xAxisSortSeriesAscendingControl = {
     default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_ascending,
     description: t('Whether to sort ascending or descending on the base Axis.'),
     renderTrigger: true,
-    visibility: xAxisMultiSortVisibility,
+    visibility: ({ controls }: { controls: ControlStateMapping }) =>
+      controls?.x_axis_sort_series?.value !== undefined &&
+      xAxisMultiSortVisibility({ controls }),
   },
 };

superset-frontend/packages/superset-ui-chart-controls/src/types.ts

@@ -479,13 +479,15 @@ export function isControlPanelSectionConfig(
 export function isDataset(
   datasource: Dataset | QueryResponse | null | undefined,
 ): datasource is Dataset {
-  return !!datasource && 'columns' in datasource;
+  return (
+    !!datasource && 'columns' in datasource && !('sqlEditorId' in datasource)
+  );
 }
 
 export function isQueryResponse(
   datasource: Dataset | QueryResponse | null | undefined,
 ): datasource is QueryResponse {
-  return !!datasource && 'results' in datasource && 'sql' in datasource;
+  return !!datasource && 'results' in datasource && 'sqlEditorId' in datasource;
 }
 
 export enum SortSeriesType {

superset-frontend/packages/superset-ui-chart-controls/src/utils/checkColumnType.ts

@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ensureIsArray, GenericDataType, ValueOf } from '@superset-ui/core';
+import {
+  ControlPanelState,
+  isDataset,
+  isQueryResponse,
+} from '@superset-ui/chart-controls';
+
+export function checkColumnType(
+  columnName: string,
+  datasource: ValueOf<Pick<ControlPanelState, 'datasource'>>,
+  columnTypes: GenericDataType[],
+): boolean {
+  if (isDataset(datasource)) {
+    return ensureIsArray(datasource.columns).some(
+      c =>
+        c.type_generic !== undefined &&
+        columnTypes.includes(c.type_generic) &&
+        columnName === c.column_name,
+    );
+  }
+  if (isQueryResponse(datasource)) {
+    return ensureIsArray(datasource.columns)
+      .filter(
+        c =>
+          c.type_generic !== undefined && columnTypes.includes(c.type_generic),
+      )
+      .map(c => c.column_name)
+      .some(c => columnName === c);
+  }
+  return false;
+}

superset-frontend/packages/superset-ui-chart-controls/src/utils/columnChoices.ts

@@ -17,19 +17,21 @@
  * under the License.
  */
 import { QueryResponse } from '@superset-ui/core';
-import { Dataset, isColumnMeta, isDataset } from '../types';
+import { Dataset, isDataset, isQueryResponse } from '../types';
 
 /**
  * Convert Datasource columns to column choices
  */
 export default function columnChoices(
   datasource?: Dataset | QueryResponse | null,
 ): [string, string][] {
-  if (isDataset(datasource) && isColumnMeta(datasource.columns[0])) {
+  if (isDataset(datasource) || isQueryResponse(datasource)) {
     return datasource.columns
       .map((col): [string, string] => [
         col.column_name,
-        col.verbose_name || col.column_name,
+        'verbose_name' in col
+          ? col.verbose_name || col.column_name
+          : col.column_name,
       ])
       .sort((opt1, opt2) =>
         opt1[1].toLowerCase() > opt2[1].toLowerCase() ? 1 : -1,

superset-frontend/packages/superset-ui-chart-controls/src/utils/index.ts

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+export * from './checkColumnType';
 export * from './selectOptions';
 export * from './D3Formatting';
 export * from './expandControlConfig';

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

@@ -0,0 +1,48 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { GenericDataType, testQueryResponse } from '@superset-ui/core';
+import { checkColumnType, TestDataset } from '../../src';
+
+test('checkColumnType columns from a Dataset', () => {
+  expect(
+    checkColumnType('num', TestDataset, [GenericDataType.NUMERIC]),
+  ).toEqual(true);
+  expect(checkColumnType('num', TestDataset, [GenericDataType.STRING])).toEqual(
+    false,
+  );
+  expect(
+    checkColumnType('gender', TestDataset, [GenericDataType.STRING]),
+  ).toEqual(true);
+  expect(
+    checkColumnType('gender', TestDataset, [GenericDataType.NUMERIC]),
+  ).toEqual(false);
+});
+
+test('checkColumnType from a QueryResponse', () => {
+  expect(
+    checkColumnType('Column 1', testQueryResponse, [GenericDataType.STRING]),
+  ).toEqual(true);
+  expect(
+    checkColumnType('Column 1', testQueryResponse, [GenericDataType.NUMERIC]),
+  ).toEqual(false);
+});
+
+test('checkColumnType from null', () => {
+  expect(checkColumnType('col', null, [])).toEqual(false);
+});