feat(plugin-chart-echarts): crossfilter with single selection in the …

…funnel chart (#1211)
apache · Nov 26, 2021 · 178986a · 178986a
1 parent f9a7226
commit 178986a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx
@@ -74,7 +74,7 @@ export default function EchartsFunnel({
       if (values.includes(name)) {
         handleChange(values.filter(v => v !== name));
       } else {
-        handleChange([...values, name]);
+        handleChange([name]);
       }
     },
   };

diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -42,6 +42,7 @@ import {
   sanitizeHtml,
 } from '../utils/series';
 import { defaultGrid, defaultTooltip } from '../defaults';
+import { OpacityEnum } from '../constants';
 
 const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
 
@@ -124,11 +125,13 @@ export default function transformProps(
 
   const transformedData: FunnelSeriesOption[] = data.map(datum => {
     const name = extractGroupbyLabel({ datum, groupby, coltypeMapping: {} });
+    const isFiltered = filterState.selectedValues && !filterState.selectedValues.includes(name);
     return {
       value: datum[metricLabel],
       name,
       itemStyle: {
         color: colorFn(name),
+        opacity: isFiltered ? OpacityEnum.SemiTransparent : OpacityEnum.NonTransparent,
       },
     };
   });