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

* chore: Removes hard-coded colors from the plugins - iteration 2 * Fixes lint errors
2026-04-19 08:04:53 +00:00 · 2022-05-12 10:12:17 -03:00
parent ca9766c109
commit c4c714fffb
12 changed files with 61 additions and 44 deletions
--- 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'),
            },
          },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/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,
                },
              ]),
            },
--- 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[] = [
--- 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: {
--- 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;

--- 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,
          ),
        );
--- 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,
--- 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,
--- 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,
          ),
        );
--- 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,7 +299,7 @@ export function transformIntervalAnnotation(
    const intervalLabel: SeriesLabelOption = showLabel
      ? {
          show: true,
-          color: '#000000',
+          color: theme.colors.grayscale.dark2,
          position: 'insideTop',
          verticalAlign: 'top',
          fontWeight: 'bold',
@@ -305,19 +307,19 @@ export function transformIntervalAnnotation(
          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,
          },
        };

--- 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: {
--- 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 },
  },