mirror of https://github.com/apache/superset.git
fix: drilling on the categorical xaxis on the stacked barchart v2 (#21844)
This commit is contained in:
parent
383dc29ad1
commit
f41d0b0cbf
|
@ -73,4 +73,11 @@ export const chartLabelWeight: Record<ChartLabel, { weight: number }> = {
|
|||
},
|
||||
};
|
||||
|
||||
export enum AxisType {
|
||||
category = 'category',
|
||||
value = 'value',
|
||||
time = 'time',
|
||||
log = 'log',
|
||||
}
|
||||
|
||||
export default {};
|
||||
|
|
|
@ -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({
|
||||
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: '==',
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -132,6 +132,4 @@ export interface EchartsTitleFormData {
|
|||
|
||||
export type StackType = boolean | null | Partial<AreaChartExtraControlsValue>;
|
||||
|
||||
export type AxisType = 'time' | 'value' | 'category';
|
||||
|
||||
export * from './Timeseries/types';
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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],
|
||||
|
|
Loading…
Reference in New Issue