QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 16:14:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* chore: Removes hard-coded colors from the plugins - iteration 2

* Fixes lint errors
This commit is contained in:
Michael S. Molina
2022-05-12 10:12:17 -03:00
committed by GitHub
parent ca9766c109
commit c4c714fffb
12 changed files with 61 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
View File

@@ -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,
},
]),
},

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

@@ -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[] = [

15
superset-frontend/plugins/plugin-chart-echarts/src/Gauge/constants.ts
View File

@@ -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: {

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

@@ -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;

3
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
View File

@@ -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,
),
);

6
superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
View File

@@ -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,

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

@@ -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,

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

@@ -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,
),
);

19
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
View File

@@ -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,
},
};

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

@@ -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: {