fix: drilling on the categorical xaxis on the stacked barchart v2 (#21844)

superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts

@@ -73,4 +73,11 @@ export const chartLabelWeight: Record<ChartLabel, { weight: number }> = {
   },
 };
 
+export enum AxisType {
+  category = 'category',
+  value = 'value',
+  time = 'time',
+  log = 'log',
+}
+
 export default {};

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -17,7 +17,11 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { QueryObjectFilterClause } from '@superset-ui/core';
+import {
+  DTTM_ALIAS,
+  QueryObjectFilterClause,
+  AxisType,
+} from '@superset-ui/core';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
 import GlobalModel from 'echarts/types/src/model/Global';
 import ComponentModel from 'echarts/types/src/model/Component';
@@ -43,6 +47,7 @@ export default function EchartsTimeseries({
   legendData = [],
   onContextMenu,
   xValueFormatter,
+  xAxis,
 }: TimeseriesChartTransformedProps) {
   const { emitFilter, stack } = formData;
   const echartRef = useRef<EchartsHandler | null>(null);
@@ -182,16 +187,28 @@ export default function EchartsTimeseries({
         const { data } = eventParams;
         if (data) {
           const pointerEvent = eventParams.event.event;
-          const values = labelMap[eventParams.seriesName];
+          const values = [
+            ...(eventParams.name ? [eventParams.name] : []),
+            ...labelMap[eventParams.seriesName],
+          ];
           const filters: QueryObjectFilterClause[] = [];
-          filters.push({
+          if (xAxis.type === AxisType.time) {
-            col: formData.granularitySqla,
+            filters.push({
-            grain: formData.timeGrainSqla,
+              col:
-            op: '==',
+                // if the xAxis is '__timestamp', granularity_sqla will be the column of filter
-            val: data[0],
+                xAxis.label === DTTM_ALIAS
-            formattedVal: xValueFormatter(data[0]),
+                  ? formData.granularitySqla
-          });
+                  : xAxis.label,
-          formData.groupby.forEach((dimension, i) =>
+              grain: formData.timeGrainSqla,
+              op: '==',
+              val: data[0],
+              formattedVal: xValueFormatter(data[0]),
+            });
+          }
+          [
+            ...(xAxis.type === AxisType.category ? [xAxis.label] : []),
+            ...formData.groupby,
+          ].forEach((dimension, i) =>
             filters.push({
               col: dimension,
               op: '==',

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

@@ -29,6 +29,7 @@ import {
   TimeseriesChartDataResponseResult,
   t,
   getXAxis,
+  AxisType,
 } from '@superset-ui/core';
 import { isDerivedSeries } from '@superset-ui/chart-controls';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
@@ -39,7 +40,6 @@ import {
   EchartsTimeseriesSeriesType,
   TimeseriesChartTransformedProps,
   OrientationType,
-  AxisType,
 } from './types';
 import { DEFAULT_FORM_DATA } from './constants';
 import { ForecastSeriesEnum, ForecastValue } from '../types';
@@ -451,5 +451,9 @@ export default function transformProps(
     legendData,
     onContextMenu,
     xValueFormatter: tooltipFormatter,
+    xAxis: {
+      label: xAxisCol,
+      type: xAxisType,
+    },
   };
 }

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

@@ -33,6 +33,7 @@ import {
   TimeFormatter,
   TimeseriesAnnotationLayer,
   TimeseriesDataRecord,
+  AxisType,
 } from '@superset-ui/core';
 import { SeriesOption } from 'echarts';
 import {
@@ -52,12 +53,7 @@ import {
 import { MarkLine1DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel';
 
 import { extractForecastSeriesContext } from '../utils/forecast';
-import {
+import { ForecastSeriesEnum, LegendOrientation, StackType } from '../types';
-  AxisType,
-  ForecastSeriesEnum,
-  LegendOrientation,
-  StackType,
-} from '../types';
 import { EchartsTimeseriesSeriesType } from './types';
 
 import {

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

@@ -25,6 +25,7 @@ import {
   TimeGranularity,
   ContributionType,
   TimeFormatter,
+  AxisType,
 } from '@superset-ui/core';
 import {
   EchartsLegendFormData,
@@ -96,11 +97,8 @@ export interface EchartsTimeseriesChartProps
 export type TimeseriesChartTransformedProps =
   EChartTransformedProps<EchartsTimeseriesFormData> & {
     xValueFormatter: TimeFormatter | StringConstructor;
+    xAxis: {
+      label: string;
+      type: AxisType;
+    };
   };
-
-export enum AxisType {
-  category = 'category',
-  value = 'value',
-  time = 'time',
-  log = 'log',
-}

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

@@ -132,6 +132,4 @@ export interface EchartsTitleFormData {
 
 export type StackType = boolean | null | Partial<AreaChartExtraControlsValue>;
 
-export type AxisType = 'time' | 'value' | 'category';
-
 export * from './Timeseries/types';

superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts

@@ -31,8 +31,9 @@ import {
   isRecordAnnotationResult,
   isTableAnnotationLayer,
   isTimeseriesAnnotationResult,
+  AxisType,
 } from '@superset-ui/core';
-import { AxisType, EchartsTimeseriesChartProps } from '../types';
+import { EchartsTimeseriesChartProps } from '../types';
 import { EchartsMixedTimeseriesProps } from '../MixedTimeseries/types';
 
 export function evalFormula(

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -27,6 +27,7 @@ import {
   NumberFormats,
   NumberFormatter,
   TimeFormatter,
+  AxisType,
 } from '@superset-ui/core';
 import { format, LegendComponentOption, SeriesOption } from 'echarts';
 import {
@@ -34,7 +35,7 @@ import {
   NULL_STRING,
   TIMESERIES_CONSTANTS,
 } from '../constants';
-import { AxisType, LegendOrientation, LegendType, StackType } from '../types';
+import { LegendOrientation, LegendType, StackType } from '../types';
 import { defaultLegendPadding } from '../defaults';
 
 function isDefined<T>(value: T | undefined | null): boolean {
@@ -323,9 +324,9 @@ export const currentSeries = {
 
 export function getAxisType(dataType?: GenericDataType): AxisType {
   if (dataType === GenericDataType.TEMPORAL) {
-    return 'time';
+    return AxisType.time;
   }
-  return 'category';
+  return AxisType.category;
 }
 
 export function getOverMaxHiddenFormatter(

superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts

@@ -17,15 +17,16 @@
  * under the License.
  */
 import {
-  AnnotationLayer,
   AnnotationData,
+  AnnotationLayer,
   AnnotationOpacity,
   AnnotationSourceType,
   AnnotationStyle,
   AnnotationType,
+  AxisType,
+  DataRecord,
   FormulaAnnotationLayer,
   TimeseriesDataRecord,
-  DataRecord,
 } from '@superset-ui/core';
 import {
   evalFormula,
@@ -161,7 +162,7 @@ describe('evalFormula', () => {
       { __timestamp: 10 },
     ];
 
-    expect(evalFormula(layer, data, '__timestamp', 'time')).toEqual([
+    expect(evalFormula(layer, data, '__timestamp', AxisType.time)).toEqual([
       [0, 1],
       [10, 11],
     ]);
@@ -178,7 +179,7 @@ describe('evalFormula', () => {
         { ...layer, value: 'y  = x* 2   -1' },
         data,
         '__timestamp',
-        'time',
+        AxisType.time,
       ),
     ).toEqual([
       [0, -1],
@@ -190,7 +191,12 @@ describe('evalFormula', () => {
     const data: DataRecord[] = [{ gender: 'boy' }, { gender: 'girl' }];
 
     expect(
-      evalFormula({ ...layer, value: 'y = 1000' }, data, 'gender', 'category'),
+      evalFormula(
+        { ...layer, value: 'y = 1000' },
+        data,
+        'gender',
+        AxisType.category,
+      ),
     ).toEqual([
       ['boy', 1000],
       ['girl', 1000],