chore: Removes hard-coded colors from the plugins - iteration 2 (#20006)

* chore: Removes hard-coded colors from the plugins - iteration 2 * Fixes lint errors
apache · May 12, 2022 · c4c714f · c4c714f
1 parent ca9766c
commit c4c714f
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 44 deletions.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
@@ -38,6 +38,15 @@ const columnsConfig = isFeatureEnabled(FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP)
   ? dndEntity
   : allColumns;
 
+const colorChoices = [
+  ['rgb(0, 139, 139)', 'Dark Cyan'],
+  ['rgb(128, 0, 128)', 'Purple'],
+  ['rgb(255, 215, 0)', 'Gold'],
+  ['rgb(69, 69, 69)', 'Dim Gray'],
+  ['rgb(220, 20, 60)', 'Crimson'],
+  ['rgb(34, 139, 34)', 'Forest Green'],
+];
+
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
@@ -249,15 +258,8 @@ const config: ControlPanelConfig = {
               type: 'SelectControl',
               freeForm: true,
               label: t('RGB Color'),
-              default: 'rgb(0, 122, 135)',
-              choices: [
-                ['rgb(0, 139, 139)', 'Dark Cyan'],
-                ['rgb(128, 0, 128)', 'Purple'],
-                ['rgb(255, 215, 0)', 'Gold'],
-                ['rgb(69, 69, 69)', 'Dim Gray'],
-                ['rgb(220, 20, 60)', 'Crimson'],
-                ['rgb(34, 139, 34)', 'Forest Green'],
-              ],
+              default: colorChoices[0][0],
+              choices: colorChoices,
               description: t('The color for points and clusters in RGB'),
             },
           },

diff --git a/...ntend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/...ntend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -62,7 +62,8 @@ const formatPercentChange = getNumberFormatter(
 export default function transformProps(
   chartProps: BigNumberWithTrendlineChartProps,
 ) {
-  const { width, height, queriesData, formData, rawFormData } = chartProps;
+  const { width, height, queriesData, formData, rawFormData, theme } =
+    chartProps;
   const {
     colorPicker,
     compareLag: compareLag_,
@@ -194,7 +195,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: 'white',
+                  color: theme.colors.grayscale.light5,
                 },
               ]),
             },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -83,7 +83,7 @@ export function formatFunnelLabel({
 export default function transformProps(
   chartProps: EchartsFunnelChartProps,
 ): FunnelChartTransformedProps {
-  const { formData, height, hooks, filterState, queriesData, width } =
+  const { formData, height, hooks, filterState, queriesData, width, theme } =
     chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
 
@@ -173,7 +173,7 @@ export default function transformProps(
   const defaultLabel = {
     formatter,
     show: showLabels,
-    color: '#000000',
+    color: theme.colors.grayscale.dark2,
   };
 
   const series: FunnelSeriesOption[] = [

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts
@@ -16,32 +16,35 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { SupersetTheme } from '@superset-ui/core';
 import { GaugeSeriesOption } from 'echarts';
 
-export const DEFAULT_GAUGE_SERIES_OPTION: GaugeSeriesOption = {
+export const defaultGaugeSeriesOption = (
+  theme: SupersetTheme,
+): GaugeSeriesOption => ({
   splitLine: {
     lineStyle: {
-      color: '#63677A',
+      color: theme.colors.primary.base,
     },
   },
   axisLine: {
     lineStyle: {
-      color: [[1, '#E6EBF8']],
+      color: [[1, theme.colors.primary.light4]],
     },
   },
   axisLabel: {
-    color: '#464646',
+    color: theme.colors.grayscale.dark1,
   },
   axisTick: {
     lineStyle: {
       width: 2,
-      color: '#63677A',
+      color: theme.colors.primary.base,
     },
   },
   detail: {
     color: 'auto',
   },
-};
+});
 
 export const INTERVAL_GAUGE_SERIES_OPTION: GaugeSeriesOption = {
   splitLine: {

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -38,7 +38,7 @@ import {
   EchartsGaugeChartProps,
 } from './types';
 import {
-  DEFAULT_GAUGE_SERIES_OPTION,
+  defaultGaugeSeriesOption,
   INTERVAL_GAUGE_SERIES_OPTION,
   OFFSETS,
   FONT_SIZE_MULTIPLIERS,
@@ -83,8 +83,11 @@ const calculateAxisLineWidth = (
 export default function transformProps(
   chartProps: EchartsGaugeChartProps,
 ): GaugeChartTransformedProps {
-  const { width, height, formData, queriesData, hooks, filterState } =
+  const { width, height, formData, queriesData, hooks, filterState, theme } =
     chartProps;
+
+  const gaugeSeriesOptions = defaultGaugeSeriesOption(theme);
+
   const {
     groupby,
     metric,
@@ -205,14 +208,14 @@ export default function transformProps(
     length: splitLineLength,
     lineStyle: {
       width: FONT_SIZE_MULTIPLIERS.splitLineWidth * fontSize,
-      color: DEFAULT_GAUGE_SERIES_OPTION.splitLine?.lineStyle?.color,
+      color: gaugeSeriesOptions.splitLine?.lineStyle?.color,
     },
   };
   const axisLine = {
     roundCap,
     lineStyle: {
       width: axisLineWidth,
-      color: DEFAULT_GAUGE_SERIES_OPTION.axisLine?.lineStyle?.color,
+      color: gaugeSeriesOptions.axisLine?.lineStyle?.color,
     },
   };
   const axisLabel = {
@@ -227,19 +230,18 @@ export default function transformProps(
       OFFSETS.ticksFromLine,
     fontSize,
     formatter: numberFormatter,
-    color: DEFAULT_GAUGE_SERIES_OPTION.axisLabel?.color,
+    color: gaugeSeriesOptions.axisLabel?.color,
   };
   const axisTick = {
     show: showAxisTick,
     distance: -axisLineWidth - axisTickLength - OFFSETS.ticksFromLine,
     length: axisTickLength,
-    lineStyle: DEFAULT_GAUGE_SERIES_OPTION.axisTick
-      ?.lineStyle as AxisTickLineStyle,
+    lineStyle: gaugeSeriesOptions.axisTick?.lineStyle as AxisTickLineStyle,
   };
   const detail = {
     valueAnimation: animation,
     formatter: (value: number) => formatValue(value),
-    color: DEFAULT_GAUGE_SERIES_OPTION.detail?.color,
+    color: gaugeSeriesOptions.detail?.color,
   };
   let pointer;
 

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -75,6 +75,7 @@ export default function transformProps(
     hooks,
     filterState,
     datasource,
+    theme,
   } = chartProps;
   const { annotation_data: annotationData_ } = queriesData[0];
   const annotationData = annotationData_ || {};
@@ -216,6 +217,7 @@ export default function transformProps(
             data1,
             annotationData,
             colorScale,
+            theme,
             sliceId,
           ),
         );
@@ -226,6 +228,7 @@ export default function transformProps(
             data1,
             annotationData,
             colorScale,
+            theme,
             sliceId,
           ),
         );

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
@@ -135,7 +135,7 @@ function getTotalValuePadding({
 export default function transformProps(
   chartProps: EchartsPieChartProps,
 ): PieChartTransformedProps {
-  const { formData, height, hooks, filterState, queriesData, width } =
+  const { formData, height, hooks, filterState, queriesData, width, theme } =
     chartProps;
   const { data = [] } = queriesData[0];
   const coltypeMapping = getColtypesMapping(queriesData[0]);
@@ -251,7 +251,7 @@ export default function transformProps(
   const defaultLabel = {
     formatter,
     show: showLabels,
-    color: '#000000',
+    color: theme.colors.grayscale.dark2,
   };
 
   const chartPadding = getChartPadding(
@@ -285,7 +285,7 @@ export default function transformProps(
         label: {
           show: true,
           fontWeight: 'bold',
-          backgroundColor: 'white',
+          backgroundColor: theme.colors.grayscale.light5,
         },
       },
       data: transformedData,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
@@ -71,7 +71,7 @@ export function formatLabel({
 export default function transformProps(
   chartProps: EchartsRadarChartProps,
 ): RadarChartTransformedProps {
-  const { formData, height, hooks, filterState, queriesData, width } =
+  const { formData, height, hooks, filterState, queriesData, width, theme } =
     chartProps;
   const { data = [] } = queriesData[0];
   const coltypeMapping = getColtypesMapping(queriesData[0]);
@@ -210,7 +210,7 @@ export default function transformProps(
         label: {
           show: true,
           fontWeight: 'bold',
-          backgroundColor: 'white',
+          backgroundColor: theme.colors.grayscale.light5,
         },
       },
       data: transformedData,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -89,6 +89,7 @@ export default function transformProps(
     hooks,
     queriesData,
     datasource,
+    theme,
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const [queryData] = queriesData;
@@ -239,6 +240,7 @@ export default function transformProps(
             data,
             annotationData,
             colorScale,
+            theme,
             sliceId,
           ),
         );
@@ -249,6 +251,7 @@ export default function transformProps(
             data,
             annotationData,
             colorScale,
+            theme,
             sliceId,
           ),
         );

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
@@ -29,6 +29,7 @@ import {
   NumberFormatter,
   smartDateDetailedFormatter,
   smartDateFormatter,
+  SupersetTheme,
   TimeFormatter,
   TimeseriesAnnotationLayer,
   TimeseriesDataRecord,
@@ -272,6 +273,7 @@ export function transformIntervalAnnotation(
   data: TimeseriesDataRecord[],
   annotationData: AnnotationData,
   colorScale: CategoricalColorScale,
+  theme: SupersetTheme,
   sliceId?: number,
 ): SeriesOption[] {
   const series: SeriesOption[] = [];
@@ -297,27 +299,27 @@ export function transformIntervalAnnotation(
     const intervalLabel: SeriesLabelOption = showLabel
       ? {
           show: true,
-          color: '#000000',
+          color: theme.colors.grayscale.dark2,
           position: 'insideTop',
           verticalAlign: 'top',
           fontWeight: 'bold',
           // @ts-ignore
           emphasis: {
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.colors.grayscale.light5,
           },
         }
       : {
           show: false,
-          color: '#000000',
+          color: theme.colors.grayscale.dark2,
           // @ts-ignore
           emphasis: {
             fontWeight: 'bold',
             show: true,
             position: 'insideTop',
             verticalAlign: 'top',
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.colors.grayscale.light5,
           },
         };
     series.push({
@@ -346,6 +348,7 @@ export function transformEventAnnotation(
   data: TimeseriesDataRecord[],
   annotationData: AnnotationData,
   colorScale: CategoricalColorScale,
+  theme: SupersetTheme,
   sliceId?: number,
 ): SeriesOption[] {
   const series: SeriesOption[] = [];
@@ -375,25 +378,25 @@ export function transformEventAnnotation(
     const eventLabel: SeriesLineLabelOption = showLabel
       ? {
           show: true,
-          color: '#000000',
+          color: theme.colors.grayscale.dark2,
           position: 'insideEndTop',
           fontWeight: 'bold',
           formatter: (params: CallbackDataParams) => params.name,
           // @ts-ignore
           emphasis: {
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.colors.grayscale.light5,
           },
         }
       : {
           show: false,
-          color: '#000000',
+          color: theme.colors.grayscale.dark2,
           position: 'insideEndTop',
           // @ts-ignore
           emphasis: {
             formatter: (params: CallbackDataParams) => params.name,
             fontWeight: 'bold',
             show: true,
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.colors.grayscale.light5,
           },
         };
 

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -109,7 +109,7 @@ export function formatTooltip({
 export default function transformProps(
   chartProps: EchartsTreemapChartProps,
 ): TreemapTransformedProps {
-  const { formData, height, queriesData, width, hooks, filterState } =
+  const { formData, height, queriesData, width, hooks, filterState, theme } =
     chartProps;
   const { data = [] } = queriesData[0];
   const { setDataMask = () => {} } = hooks;
@@ -260,7 +260,7 @@ export default function transformProps(
         show: false,
       },
       itemStyle: {
-        color: '#1FA8C9',
+        color: theme.colors.primary.base,
       },
     },
   ];
@@ -286,7 +286,7 @@ export default function transformProps(
         show: showLabels,
         position: labelPosition,
         formatter,
-        color: '#000',
+        color: theme.colors.grayscale.dark2,
         fontSize: LABEL_FONTSIZE,
       },
       upperLabel: {

diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/Line/Encoder.ts b/superset-frontend/plugins/preset-chart-xy/src/components/Line/Encoder.ts
@@ -46,7 +46,7 @@ export const lineEncoderFactory = createEncoderFactory<LineEncodingConfig>({
     x: { field: 'x', type: 'quantitative' },
     y: { field: 'y', type: 'quantitative' },
     fill: { value: false, legend: false },
-    stroke: { value: '#222' },
+    stroke: { value: '#222' }, // eslint-disable-line theme-colors/no-literal-colors
     strokeDasharray: { value: '' },
     strokeWidth: { value: 1 },
   },