echarts theming

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -227,7 +227,9 @@ export default function transformProps(
   const defaultLabel = {
     formatter,
     show: showLabels,
-    color: theme.colors.grayscale.dark2,
+    color: theme.colorText,
+    textBorderColor: theme.colorBgBase,
+    textBorderWidth: 1,
   };
 
   const series: FunnelSeriesOption[] = [
@@ -245,7 +247,6 @@ export default function transformProps(
       label: {
         ...defaultLabel,
         position: labelLine ? 'outer' : 'inner',
-        textBorderColor: 'transparent',
       },
       emphasis: {
         label: {

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -183,6 +183,7 @@ export default function transformProps(
             `${index * titleOffsetFromTitle + OFFSETS.titleFromCenter}%`,
           ],
           fontSize,
+          color: theme.colorTextSecondary,
         },
         detail: {
           offsetCenter: [

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

@@ -275,6 +275,23 @@ export default function transformProps(
     radar: {
       shape: isCircle ? 'circle' : 'polygon',
       indicator,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: theme.colorSplit,
+        },
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: [theme.colorBgLayout, theme.colorBgContainer],
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: theme.colorSplit,
+        },
+      },
     },
   };
 

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts

@@ -274,7 +274,11 @@ export default function transformProps(
   } else {
     linearColorScale(totalSecondaryValue / totalValue);
   }
-
+  const labelProps = {
+    color: theme.colorText,
+    textBorderColor: theme.colorBgBase,
+    textBorderWidth: 1,
+  };
   const traverse = (
     treeNodes: TreeNode[],
     path: string[],
@@ -316,7 +320,7 @@ export default function transformProps(
             opacity: OpacityEnum.SemiTransparent,
           },
           label: {
-            color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
+            ...labelProps,
           },
         };
       }
@@ -356,10 +360,10 @@ export default function transformProps(
           },
         },
         label: {
+          ...labelProps,
           width: (radius * 0.6) / (columns.length || 1),
           show: showLabels,
           formatter,
-          color: theme.colors.grayscale.dark2,
           minAngle: minShowLabelAngle,
           overflow: 'breakAll',
         },
@@ -381,7 +385,6 @@ export default function transformProps(
         }
       : null,
   };
-
   return {
     formData,
     width,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -669,7 +669,6 @@ export default function transformProps(
   const onFocusedSeries = (seriesName: string | null) => {
     focusedSeries = seriesName;
   };
-
   return {
     echartOptions,
     emitCrossFilters,

superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts

@@ -27,7 +27,6 @@ export const DEFAULT_TREE_SERIES_OPTION: TreeSeriesOption = {
   animation: true,
   animationDuration: 500,
   animationEasing: 'cubicOut',
-  lineStyle: { color: 'source', width: 1.5 },
 };
 
 export const DEFAULT_FORM_DATA: Partial<EchartsTreeFormData> = {

superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts

@@ -199,7 +199,10 @@ export default function transformProps(
       symbol,
       roam,
       symbolSize,
-      lineStyle: DEFAULT_TREE_SERIES_OPTION.lineStyle,
+      lineStyle: {
+        color: theme.colorText,
+        width: 1.5,
+      },
       select: DEFAULT_TREE_SERIES_OPTION.select,
       leaves: { label: { position: childLabelPosition } },
     },

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -163,6 +163,11 @@ export default function transformProps(
   const metricLabel = getMetricLabel(metric);
   const groupbyLabels = groupby.map(getColumnLabel);
   const treeData = treeBuilder(data, groupbyLabels, metricLabel);
+  const labelProps = {
+    color: theme.colorText,
+    borderColor: theme.colorBgBase,
+    borderWidth: 1,
+  };
   const traverse = (treeNodes: TreeNode[], path: string[]) =>
     treeNodes.map(treeNode => {
       const { name: nodeName, value, groupBy } = treeNode;
@@ -201,9 +206,12 @@ export default function transformProps(
             ...item,
             itemStyle: {
               colorAlpha: OpacityEnum.SemiTransparent,
+              color: theme.colorText,
+              borderColor: theme.colorBgBase,
+              borderWidth: 2,
             },
             label: {
-              color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
+              ...labelProps,
             },
           };
         }
@@ -256,18 +264,20 @@ export default function transformProps(
       },
       emphasis: {
         label: {
+          ...labelProps,
           show: true,
         },
       },
       levels,
       label: {
+        ...labelProps,
         show: showLabels,
         position: labelPosition,
         formatter,
-        color: theme.colors.grayscale.dark2,
         fontSize: LABEL_FONTSIZE,
       },
       upperLabel: {
+        ...labelProps,
         show: showUpperLabels,
         formatter,
         textBorderColor: 'transparent',
@@ -290,7 +300,6 @@ export default function transformProps(
     },
     series,
   };
-
   return {
     formData,
     width,

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts

@@ -355,7 +355,13 @@ export default function transformProps(
       disabled: true,
     },
   };
-
+  const labelProps = {
+    show: showValue,
+    formatter: seriesformatter,
+    color: theme.colorText,
+    borderColor: theme.colorBgBase,
+    borderWidth: 1,
+  };
   const barSeries: BarSeriesOption[] = [
     {
       ...seriesProps,
@@ -366,9 +372,8 @@ export default function transformProps(
       ...seriesProps,
       name: LEGEND.INCREASE,
       label: {
-        show: showValue,
+        ...labelProps,
         position: 'top',
-        formatter: seriesformatter,
       },
       itemStyle: {
         color: rgbToHex(increaseColor.r, increaseColor.g, increaseColor.b),
@@ -379,9 +384,8 @@ export default function transformProps(
       ...seriesProps,
       name: LEGEND.DECREASE,
       label: {
-        show: showValue,
+        ...labelProps,
         position: 'bottom',
-        formatter: seriesformatter,
       },
       itemStyle: {
         color: rgbToHex(decreaseColor.r, decreaseColor.g, decreaseColor.b),
@@ -392,9 +396,8 @@ export default function transformProps(
       ...seriesProps,
       name: LEGEND.TOTAL,
       label: {
-        show: showValue,
+        ...labelProps,
         position: 'top',
-        formatter: seriesformatter,
       },
       itemStyle: {
         color: rgbToHex(totalColor.r, totalColor.g, totalColor.b),

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -440,8 +440,8 @@ export function getLegendProps(
     selectorLabel: {
       fontFamily: theme.fontFamily,
       fontSize: theme.fontSizeSM,
-      color: theme.colors.grayscale.base,
-      borderColor: theme.colors.grayscale.base,
+      color: theme.colorText,
+      borderColor: theme.colorBgBase,
     },
   };
   const MIN_LEGEND_WIDTH = 0;