feat(plugin-chart-echarts): implement x-filter opacity in ts chart (a…

…pache#1244) * feat(plugin-chart-echarts): implement x-filter opacity in ts chart * address comments
zhaoyongjie · Nov 24, 2021 · 10abc63 · 10abc63
1 parent 9b471a5
commit 10abc63
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 48 deletions.
diff --git a/...uperset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/...uperset_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_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/...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<string, number>, 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/...ary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/...ary_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<string, number>, 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/...orary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/...orary_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/...nd/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/...nd/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<string, DataRecordValue[]>;
-  groupby: string[];
-}
+export type TimeseriesChartTransformedProps = EChartTransformedProps<EchartsTimeseriesFormData>;