From f41d0b0cbf47042bf510dc2b0b24b68e3fa11d37 Mon Sep 17 00:00:00 2001 From: Yongjie Zhao Date: Tue, 18 Oct 2022 19:47:53 +0800 Subject: [PATCH] fix: drilling on the categorical xaxis on the stacked barchart v2 (#21844) --- .../superset-ui-core/src/chart/types/Base.ts | 7 ++++ .../src/Timeseries/EchartsTimeseries.tsx | 37 ++++++++++++++----- .../src/Timeseries/transformProps.ts | 6 ++- .../src/Timeseries/transformers.ts | 8 +--- .../src/Timeseries/types.ts | 12 +++--- .../plugins/plugin-chart-echarts/src/types.ts | 2 - .../src/utils/annotation.ts | 3 +- .../plugin-chart-echarts/src/utils/series.ts | 7 ++-- .../test/utils/annotation.test.ts | 16 +++++--- 9 files changed, 63 insertions(+), 35 deletions(-) diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts index 0bfae7777e..e647038593 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts +++ b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts @@ -73,4 +73,11 @@ export const chartLabelWeight: Record = { }, }; +export enum AxisType { + category = 'category', + value = 'value', + time = 'time', + log = 'log', +} + export default {}; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index 9ae39bead5..74a1646e4e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/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(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({ - col: formData.granularitySqla, - grain: formData.timeGrainSqla, - op: '==', - val: data[0], - formattedVal: xValueFormatter(data[0]), - }); - formData.groupby.forEach((dimension, i) => + if (xAxis.type === AxisType.time) { + filters.push({ + col: + // if the xAxis is '__timestamp', granularity_sqla will be the column of filter + xAxis.label === DTTM_ALIAS + ? formData.granularitySqla + : xAxis.label, + 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: '==', diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 177b14a35e..22fcd8ccff 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/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, + }, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 5b5514da74..bc84b8d655 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/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 { - AxisType, - ForecastSeriesEnum, - LegendOrientation, - StackType, -} from '../types'; +import { ForecastSeriesEnum, LegendOrientation, StackType } from '../types'; import { EchartsTimeseriesSeriesType } from './types'; import { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 93e173e669..f8545307ef 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/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 & { xValueFormatter: TimeFormatter | StringConstructor; + xAxis: { + label: string; + type: AxisType; + }; }; - -export enum AxisType { - category = 'category', - value = 'value', - time = 'time', - log = 'log', -} diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts index 72d626f1d5..9fc8997120 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts @@ -132,6 +132,4 @@ export interface EchartsTitleFormData { export type StackType = boolean | null | Partial; -export type AxisType = 'time' | 'value' | 'category'; - export * from './Timeseries/types'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts index c99df9ebf2..d3d858d979 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts +++ b/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( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts index 663254a2ea..c1b61233b6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/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(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( diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts index 59dc133322..bef98483be 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts +++ b/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],