fix: drilling on the categorical xaxis on the mixed chart (#21845)

This commit is contained in:
Yongjie Zhao 2022-10-19 09:08:28 +08:00 committed by GitHub
parent f41d0b0cbf
commit f38115489b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 12 deletions

View File

@ -17,7 +17,12 @@
* under the License. * under the License.
*/ */
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { DataRecordValue, QueryObjectFilterClause } from '@superset-ui/core'; import {
AxisType,
DataRecordValue,
DTTM_ALIAS,
QueryObjectFilterClause,
} from '@superset-ui/core';
import { EchartsMixedTimeseriesChartTransformedProps } from './types'; import { EchartsMixedTimeseriesChartTransformedProps } from './types';
import Echart from '../components/Echart'; import Echart from '../components/Echart';
import { EventHandlers } from '../types'; import { EventHandlers } from '../types';
@ -37,6 +42,7 @@ export default function EchartsMixedTimeseries({
seriesBreakdown, seriesBreakdown,
onContextMenu, onContextMenu,
xValueFormatter, xValueFormatter,
xAxis,
}: EchartsMixedTimeseriesChartTransformedProps) { }: EchartsMixedTimeseriesChartTransformedProps) {
const isFirstQuery = useCallback( const isFirstQuery = useCallback(
(seriesIndex: number) => seriesIndex < seriesBreakdown, (seriesIndex: number) => seriesIndex < seriesBreakdown,
@ -116,18 +122,31 @@ export default function EchartsMixedTimeseries({
const { data, seriesIndex } = eventParams; const { data, seriesIndex } = eventParams;
if (data) { if (data) {
const pointerEvent = eventParams.event.event; const pointerEvent = eventParams.event.event;
const values = labelMap[eventParams.seriesName]; const values = [
const { queryIndex } = (echartOptions.series as any)[seriesIndex]; ...(eventParams.name ? [eventParams.name] : []),
const groupby = queryIndex > 0 ? formData.groupbyB : formData.groupby; ...(isFirstQuery(seriesIndex) ? labelMap : labelMapB)[
eventParams.seriesName
],
];
const filters: QueryObjectFilterClause[] = []; const filters: QueryObjectFilterClause[] = [];
filters.push({ if (xAxis.type === AxisType.time) {
col: formData.granularitySqla, filters.push({
grain: formData.timeGrainSqla, col:
op: '==', xAxis.label === DTTM_ALIAS
val: data[0], ? formData.granularitySqla
formattedVal: xValueFormatter(data[0]), : xAxis.label,
}); grain: formData.timeGrainSqla,
groupby.forEach((dimension, i) => op: '==',
val: data[0],
formattedVal: xValueFormatter(data[0]),
});
}
[
...(xAxis.type === AxisType.category ? [xAxis.label] : []),
...(isFirstQuery(seriesIndex)
? formData.groupby
: formData.groupbyB),
].forEach((dimension, i) =>
filters.push({ filters.push({
col: dimension, col: dimension,
op: '==', op: '==',

View File

@ -499,5 +499,9 @@ export default function transformProps(
selectedValues: filterState.selectedValues || [], selectedValues: filterState.selectedValues || [],
onContextMenu, onContextMenu,
xValueFormatter: tooltipFormatter, xValueFormatter: tooltipFormatter,
xAxis: {
label: xAxisCol,
type: xAxisType,
},
}; };
} }

View File

@ -25,6 +25,7 @@ import {
QueryFormColumn, QueryFormColumn,
ContributionType, ContributionType,
TimeFormatter, TimeFormatter,
AxisType,
} from '@superset-ui/core'; } from '@superset-ui/core';
import { import {
EchartsLegendFormData, EchartsLegendFormData,
@ -144,4 +145,8 @@ export type EchartsMixedTimeseriesChartTransformedProps =
labelMapB: Record<string, string[]>; labelMapB: Record<string, string[]>;
seriesBreakdown: number; seriesBreakdown: number;
xValueFormatter: TimeFormatter | StringConstructor; xValueFormatter: TimeFormatter | StringConstructor;
xAxis: {
label: string;
type: AxisType;
};
}; };