From 5bff9a4dd0c55c9f35741f50041412ad7698622d Mon Sep 17 00:00:00 2001 From: Ville Brofeldt <33317356+villebro@users.noreply.github.com> Date: Wed, 28 Jul 2021 14:58:12 +0300 Subject: [PATCH] feat(plugin-chart-echarts): implement x-filter opacity in ts chart (#1244) * feat(plugin-chart-echarts): implement x-filter opacity in ts chart * address comments --- .../src/MixedTimeseries/transformProps.ts | 4 +-- .../src/Timeseries/EchartsTimeseries.tsx | 24 +++++---------- .../src/Timeseries/transformProps.ts | 30 +++++++++++++------ .../src/Timeseries/transformers.ts | 21 +++++++++---- .../src/Timeseries/types.ts | 16 ++-------- 5 files changed, 47 insertions(+), 48 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 3d0ad16085a1..8079b0ddfa2c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -126,7 +126,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps { area, markerEnabled, markerSize, - opacity, + areaOpacity: opacity, seriesType, stack, yAxisIndex, @@ -138,7 +138,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps { area: areaB, markerEnabled: markerEnabledB, markerSize: markerSizeB, - opacity: opacityB, + areaOpacity: opacityB, seriesType: seriesTypeB, stack: stackB, yAxisIndex: yAxisIndexB, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index 4ff9931f24a0..309fcb93e1f3 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -29,9 +29,9 @@ export default function EchartsTimeseries({ echartOptions, groupby, labelMap, + selectedValues, setDataMask, }: TimeseriesChartTransformedProps) { - const { filterState } = formData; const handleChange = useCallback( (values: string[]) => { if (!formData.emitFilter) { @@ -61,31 +61,21 @@ export default function EchartsTimeseries({ filterState: { label: groupbyValues.length ? groupbyValues : undefined, value: groupbyValues.length ? groupbyValues : null, + selectedValues: values.length ? values : null, }, }); }, [groupby, labelMap, setDataMask], ); - const selectedValues = (filterState || []).reduce( - (acc: Record, selectedValue: string) => { - const index = Object.keys(labelMap).indexOf(selectedValue); - return { - ...acc, - [index]: selectedValue, - }; - }, - {}, - ); - const eventHandlers: EventHandlers = { click: props => { - const { seriesId } = props; - const values: string[] = Object.values(selectedValues); - if (values.includes(seriesId)) { - handleChange(values.filter(v => v !== seriesId)); + const { seriesName: name } = props; + const values = Object.values(selectedValues); + if (values.includes(name)) { + handleChange(values.filter(v => v !== name)); } else { - handleChange([...values, seriesId]); + handleChange([name]); } }, }; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index d4316789cef6..7a5944b3395f 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -61,7 +61,7 @@ import { TIMESERIES_CONSTANTS } from '../constants'; export default function transformProps( chartProps: EchartsTimeseriesChartProps, ): TimeseriesChartTransformedProps { - const { width, height, formData, hooks, queriesData } = chartProps; + const { width, height, filterState, formData, hooks, queriesData } = chartProps; const { annotation_data: annotationData_, data = [], @@ -108,16 +108,28 @@ export default function transformProps( rawSeries.forEach(entry => { const transformedSeries = transformSeries(entry, colorScale, { area, + filterState, forecastEnabled, markerEnabled, markerSize, - opacity, + areaOpacity: opacity, seriesType, stack, }); if (transformedSeries) series.push(transformedSeries); }); + const selectedValues = (filterState.selectedValues || []).reduce( + (acc: Record, selectedValue: string) => { + const index = series.findIndex(({ name }) => name === selectedValue); + return { + ...acc, + [index]: selectedValue, + }; + }, + {}, + ); + annotationLayers .filter((layer: AnnotationLayer) => layer.show) .forEach((layer: AnnotationLayer) => { @@ -212,8 +224,7 @@ export default function transformProps( data: rawSeries .filter( entry => - extractForecastSeriesContext((entry.name || '') as string).type === - ForecastSeriesEnum.Observation, + extractForecastSeriesContext(entry.name || '').type === ForecastSeriesEnum.Observation, ) .map(entry => entry.name || '') .concat(extractAnnotationLabels(annotationLayers, annotationData)), @@ -246,13 +257,14 @@ export default function transformProps( }; return { - formData, - width, - height, echartOptions, - setDataMask, emitFilter, - labelMap, + formData, groupby, + height, + labelMap, + selectedValues, + setDataMask, + width, }; } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index c02bbbb6ee0e..d690d9c2a7aa 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -22,6 +22,7 @@ import { AnnotationOpacity, CategoricalColorScale, EventAnnotationLayer, + FilterState, getTimeFormatter, IntervalAnnotationLayer, isTimeseriesAnnotationResult, @@ -57,17 +58,18 @@ import { parseAnnotationOpacity, } from '../utils/annotation'; import { getChartPadding } from '../utils/series'; -import { TIMESERIES_CONSTANTS } from '../constants'; +import { OpacityEnum, TIMESERIES_CONSTANTS } from '../constants'; export function transformSeries( series: SeriesOption, colorScale: CategoricalColorScale, opts: { area?: boolean; + filterState?: FilterState; forecastEnabled?: boolean; markerEnabled?: boolean; markerSize?: number; - opacity?: number; + areaOpacity?: number; seriesType?: EchartsTimeseriesSeriesType; stack?: boolean; yAxisIndex?: number; @@ -76,18 +78,22 @@ export function transformSeries( const { name } = series; const { area, + filterState, forecastEnabled, markerEnabled, markerSize, - opacity, + areaOpacity = 1, seriesType, stack, yAxisIndex = 0, } = opts; + const forecastSeries = extractForecastSeriesContext(name || ''); const isConfidenceBand = forecastSeries.type === ForecastSeriesEnum.ForecastLower || forecastSeries.type === ForecastSeriesEnum.ForecastUpper; + const isFiltered = filterState?.selectedValues && !filterState?.selectedValues.includes(name); + const opacity = isFiltered ? OpacityEnum.SemiTransparent : OpacityEnum.NonTransparent; // don't create a series if doing a stack or area chart and the result // is a confidence band @@ -113,14 +119,14 @@ export function transformSeries( } else { plotType = seriesType === 'bar' ? 'bar' : 'line'; } - const lineStyle = isConfidenceBand ? { opacity: 0 } : {}; - + const lineStyle = isConfidenceBand ? { opacity: OpacityEnum.Transparent } : { opacity }; return { ...series, yAxisIndex, name: forecastSeries.name, itemStyle: { color: colorScale(forecastSeries.name), + opacity, }, // @ts-ignore type: plotType, @@ -130,7 +136,10 @@ export function transformSeries( stack: stackId, lineStyle, areaStyle: { - opacity: forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area ? opacity : 0, + opacity: + forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area + ? opacity * areaOpacity + : 0, }, showSymbol: !isConfidenceBand && diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 7347e4eeee42..0d7f7bfda515 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -20,13 +20,10 @@ import { AnnotationLayer, ChartDataResponseResult, ChartProps, - DataRecordValue, QueryFormData, - SetDataMaskHook, TimeGranularity, } from '@superset-ui/core'; -import { EChartsOption } from 'echarts'; -import { DEFAULT_LEGEND_FORM_DATA, EchartsLegendFormData } from '../types'; +import { DEFAULT_LEGEND_FORM_DATA, EchartsLegendFormData, EChartTransformedProps } from '../types'; export enum EchartsTimeseriesContributionType { Row = 'row', @@ -115,13 +112,4 @@ export interface EchartsTimeseriesChartProps extends ChartProps { queriesData: ChartDataResponseResult[]; } -export interface TimeseriesChartTransformedProps { - formData: EchartsTimeseriesFormData; - height: number; - width: number; - echartOptions: EChartsOption; - emitFilter: boolean; - setDataMask: SetDataMaskHook; - labelMap: Record; - groupby: string[]; -} +export type TimeseriesChartTransformedProps = EChartTransformedProps;