feat(plugin-chart-echarts): x-filtering improvement in radar chart (#…

…1205) * fix(plugin-chart-echarts): x-filtering improvement for radar chart * fix(plugin-chart-echarts): opacity constants * fix(plugin-chart-echarts): improve constant * fix(plugin-chart-echarts): place treemap constant
apache · Nov 26, 2021 · 6d52c44 · 6d52c44
1 parent e96428e
commit 6d52c44
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/EchartsRadar.tsx b/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/EchartsRadar.tsx
@@ -74,7 +74,7 @@ export default function EchartsRadar({
       if (values.includes(name)) {
         handleChange(values.filter(v => v !== name));
       } else {
-        handleChange([...values, name]);
+        handleChange([name]);
       }
     },
   };

diff --git a/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
@@ -37,6 +37,7 @@ import {
 import { DEFAULT_LEGEND_FORM_DATA } from '../types';
 import { extractGroupbyLabel, getColtypesMapping, getLegendProps } from '../utils/series';
 import { defaultGrid, defaultTooltip } from '../defaults';
+import { OpacityEnum } from '../constants';
 
 export function formatLabel({
   params,
@@ -114,12 +115,19 @@ export default function transformProps(
       groupby.map(col => datum[col]),
     );
 
+    const isFiltered =
+      filterState.selectedValues && !filterState.selectedValues.includes(joinedName);
+
     // generate transformedData
     transformedData.push({
       value: metricsLabel.map(metricLabel => datum[metricLabel]),
       name: joinedName,
       itemStyle: {
         color: colorFn(joinedName),
+        opacity: isFiltered ? OpacityEnum.Transparent : OpacityEnum.NonTransparent,
+      },
+      lineStyle: {
+        opacity: isFiltered ? OpacityEnum.SemiTransparent : OpacityEnum.NonTransparent,
       },
       label: {
         show: showLabels,

diff --git a/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/constants.ts b/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/constants.ts
@@ -23,7 +23,6 @@ export const COLOR_SATURATION = [0.7, 0.4];
 export const LABEL_FONTSIZE = 11;
 export const BORDER_WIDTH = 2;
 export const GAP_WIDTH = 2;
-export const COLOR_ALPHA = 0.3;
 export const BORDER_COLOR = '#fff';
 
 export const extractTreePathInfo = (treePathInfo: TreePathInfo[] | undefined) => {

diff --git a/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -40,14 +40,14 @@ import {
 import { formatSeriesName, getColtypesMapping } from '../utils/series';
 import { defaultTooltip } from '../defaults';
 import {
-  COLOR_ALPHA,
   COLOR_SATURATION,
   BORDER_WIDTH,
   GAP_WIDTH,
   LABEL_FONTSIZE,
   extractTreePathInfo,
   BORDER_COLOR,
 } from './constants';
+import { OpacityEnum } from '../constants';
 
 export function formatLabel({
   params,
@@ -169,10 +169,10 @@ export default function transformProps(
             columnsLabelMap.set(joinedName, path.concat(name));
             if (filterState.selectedValues && !filterState.selectedValues.includes(joinedName)) {
               item.itemStyle = {
-                colorAlpha: COLOR_ALPHA,
+                colorAlpha: OpacityEnum.SemiTransparent,
               };
               item.label = {
-                color: `rgba(0, 0, 0, ${COLOR_ALPHA})`,
+                color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
               };
             }
             result.push(item);

diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/constants.ts b/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/constants.ts
@@ -53,3 +53,9 @@ export const LABEL_POSITION: [LabelPositionEnum, string][] = [
   [LabelPositionEnum.InsideTopRight, 'Inside top right'],
   [LabelPositionEnum.InsideBottomRight, 'Inside bottom right'],
 ];
+
+export enum OpacityEnum {
+  Transparent = 0,
+  SemiTransparent = 0.3,
+  NonTransparent = 1,
+}