From c4c714fffb83b2a5236202ee43d837f218685b15 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 12 May 2022 10:12:17 -0300 Subject: [PATCH] chore: Removes hard-coded colors from the plugins - iteration 2 (#20006) * chore: Removes hard-coded colors from the plugins - iteration 2 * Fixes lint errors --- .../src/controlPanel.ts | 20 ++++++++++--------- .../BigNumberWithTrendline/transformProps.ts | 5 +++-- .../src/Funnel/transformProps.ts | 4 ++-- .../src/Gauge/constants.ts | 15 ++++++++------ .../src/Gauge/transformProps.ts | 18 +++++++++-------- .../src/MixedTimeseries/transformProps.ts | 3 +++ .../src/Pie/transformProps.ts | 6 +++--- .../src/Radar/transformProps.ts | 4 ++-- .../src/Timeseries/transformProps.ts | 3 +++ .../src/Timeseries/transformers.ts | 19 ++++++++++-------- .../src/Treemap/transformProps.ts | 6 +++--- .../src/components/Line/Encoder.ts | 2 +- 12 files changed, 61 insertions(+), 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 index 1e0dbf3ff47e2..8642e8946fe03 100644 --- 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/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index 892a81e5c11a5..913dc8c095985 100644 --- 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, }, ]), }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts index 88a0fe75c215f..3d0b279cc12fd 100644 --- 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 index 677f7c565b6e1..2e72350f7a9b9 100644 --- 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 index 0486ddf67298b..899417a6390e3 100644 --- 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 index 593ac053cc16e..5072aedf71411 100644 --- 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 index cf40ce7e1be94..c0466e6bba562 100644 --- 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 index b668e340350a8..01a20b82b436e 100644 --- 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 index 16007e1bb22b9..da3d13820cbe4 100644 --- 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 index e574ad4cc7091..48b7763458e3c 100644 --- 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, }, }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index 25f3910b92c81..5dd7d55467f72 100644 --- 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 index a2b3aaf58e845..0efb2fcb70791 100644 --- 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({ 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 }, },