From 6bcc4a820b9f70e09670c38502c6d541c197f99b Mon Sep 17 00:00:00 2001 From: Ljry-yiyi Date: Mon, 23 Oct 2023 18:25:16 +0800 Subject: [PATCH] feat: use option colors --- src/helper.ts | 10 ++++++++++ src/model/echarts_base.ts | 5 +++++ src/model/echarts_column.ts | 7 +++++-- src/model/echarts_line.ts | 7 +++++-- src/model/echarts_pie.ts | 20 ++++++++++++++------ src/model/echarts_scatter.ts | 4 +++- src/ui_schema.tsx | 5 +++++ strings.json | 8 ++++++++ 8 files changed, 55 insertions(+), 11 deletions(-) diff --git a/src/helper.ts b/src/helper.ts index 78fd5be..23c78d5 100644 --- a/src/helper.ts +++ b/src/helper.ts @@ -902,3 +902,13 @@ export const sortSeries = (props: { max: 0, }; }; + +/** + * Retrieves the colors of options for a given field. + * @param {Field | undefined} field - The field object. + * @returns {Map} - A map containing the names of options as keys and their respective color values as values. + */ +export const getOptionColors = (field: Field | undefined) => { + if (field?.entityType !== 'SingleSelect') return new Map(); + return new Map(field.property.options.map(x => [x.name, x.color.value])); +}; diff --git a/src/model/echarts_base.ts b/src/model/echarts_base.ts index 3083f8a..29102b6 100644 --- a/src/model/echarts_base.ts +++ b/src/model/echarts_base.ts @@ -290,6 +290,11 @@ export abstract class EchartsBase { type: 'boolean', description: t(Strings.exclude_zero_point_describle), }, + useOptionColors: { + title: t(Strings.use_option_colors), + type: 'boolean', + description: t(Strings.use_option_colors_describle), + }, theme: { title: t(Strings.select_theme_color), type: 'string', diff --git a/src/model/echarts_column.ts b/src/model/echarts_column.ts index 98d3655..ee3433f 100644 --- a/src/model/echarts_column.ts +++ b/src/model/echarts_column.ts @@ -1,7 +1,7 @@ import { Field, Record } from '@apitable/widget-sdk'; import { ChartType, StackType } from "./interface"; import { Strings, t } from "../i18n"; -import { formatterValue, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper'; +import { formatterValue, getOptionColors, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper'; import { BarSeriesOption } from 'echarts'; import { EchartsBase } from './echarts_base'; @@ -146,7 +146,7 @@ export class EchartsColumn extends EchartsBase { const isColumn = this.type === ChartType.EchartsColumn; const isPercent = this.stackType === StackType.Percent - const { axisSortType, isCountNullValue, excludeZeroPoint } = chartStyle; + const { axisSortType, isCountNullValue, excludeZeroPoint, useOptionColors } = chartStyle; const dimensionMetricsMap = this.getFormDimensionMetricsMap(); const yKey = dimensionMetricsMap.metrics.key; // Statistical dimension attribute, statistical value attribute, statistical value name. @@ -199,6 +199,7 @@ export class EchartsColumn extends EchartsBase { chartStyle, { noFormatMetric, metricsField, axisLength: axisNames.length } ); + const colorMap = getOptionColors(seriesFieldInstance); const series: BarSeriesOption[] = []; if (axisSortType && seriesFieldInstance) { @@ -216,11 +217,13 @@ export class EchartsColumn extends EchartsBase { [axisKey]: sereisItem[dataIndex], barWidth, } : {}; + const itemStyle = { color: colorMap.get(item.sortKey) || '#000000' }; series.push({ ...styleOption.series, name: item.sortKey, data: [sereisItem], ...extraField, + ...(useOptionColors ? { itemStyle } : {}), }); } } diff --git a/src/model/echarts_line.ts b/src/model/echarts_line.ts index 85f0a71..fbb1fe5 100644 --- a/src/model/echarts_line.ts +++ b/src/model/echarts_line.ts @@ -1,7 +1,7 @@ import { LineSeriesOption } from 'echarts'; import { ChartType, StackType } from "./interface"; import { Strings, t } from '../i18n'; -import { formatterValue, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper'; +import { formatterValue, getOptionColors, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper'; import { EchartsBase } from './echarts_base'; import { Field } from '@apitable/widget-sdk'; @@ -103,7 +103,7 @@ export class EchartsLine extends EchartsBase { const { seriesField, dimension, metrics, metricsType, isSplitMultipleValue, isFormatDatetime: _isFormatDatetime, datetimeFormatter } = chartStructure; - const { axisSortType, isCountNullValue, excludeZeroPoint } = chartStyle; + const { axisSortType, isCountNullValue, excludeZeroPoint, useOptionColors } = chartStyle; const dimensionMetricsMap = this.getFormDimensionMetricsMap(); // Statistical dimension attribute, statistical value attribute, statistical value name. const dimensionField = fields.find(field => field.id === dimension) as Field; @@ -153,15 +153,18 @@ export class EchartsLine extends EchartsBase { metricsField, isColumn: true, }); + const colorMap = getOptionColors(seriesFieldInstance); const series: LineSeriesOption[] = []; if (axisSortType && seriesFieldInstance) { for (let i = 0; i < sortedSeries.length; i++) { const item = sortedSeries[i]; + const itemStyle = { color: colorMap.get(item.sortKey) || '#000000' }; series.push({ ...styleOption.series, name: item.sortKey, data: item.series.slice(0, maxRenderNum), + ...(useOptionColors ? { itemStyle } : {}), }); } } else { diff --git a/src/model/echarts_pie.ts b/src/model/echarts_pie.ts index e036298..898978a 100644 --- a/src/model/echarts_pie.ts +++ b/src/model/echarts_pie.ts @@ -3,7 +3,7 @@ import { EchartsBase } from './echarts_base'; import { ChartType, StackType } from './interface'; import { Strings, t } from '../i18n'; import { sortBy } from '../sortBy'; -import { getNumberBaseFieldPrecision, maxRenderNum, processChartData, processRecords } from '../helper'; +import { getNumberBaseFieldPrecision, getOptionColors, maxRenderNum, processChartData, processRecords } from '../helper'; export class EchartsPie extends EchartsBase { type = ChartType.EchartsPie; @@ -56,11 +56,13 @@ export class EchartsPie extends EchartsBase { } getChartStyleFormJSON() { + const commonFormConfigJson = this.getCommonFormConfigJson(); + delete commonFormConfigJson.excludeZeroPoint; return { title: t(Strings.design_chart_style), type: 'object', properties: { - ...this.getCommonFormConfigJson(), + ...commonFormConfigJson, }, }; } @@ -156,7 +158,7 @@ export class EchartsPie extends EchartsBase { // Statistic field id, type of statistic specified field (sum, average), // type of statistic value, whether to cut multi-selected values, date formatting. const { dimension, metrics, metricsType, isSplitMultipleValue, isFormatDatetime: _isFormatDatetime, datetimeFormatter } = chartStructure; - const { isCountNullValue } = chartStyle; + const { isCountNullValue, useOptionColors } = chartStyle; const dimensionMetricsMap = this.getFormDimensionMetricsMap(); // Statistical dimensional attributes, statistical numerical attributes. const dimensionField = fields.find(field => field.id === dimension); @@ -194,17 +196,23 @@ export class EchartsPie extends EchartsBase { data = data.slice(0, maxRenderNum); const styleOption = this.getChartStyleOptions(chartStructure, chartStyle, { metricsType, data, metricsField }); + const dataWithColors = (() => { + if (!useOptionColors) return data; + const colorMap = getOptionColors(dimensionField); + if (!colorMap.size) return data; + return data.map(item => ({ ...item, itemStyle: { color: colorMap.get(item.name) || '#000000' }})); + })(); const options = { ...styleOption.commonOption, - series: [{ ...styleOption.series, data }], + series: [{ ...styleOption.series, data: dataWithColors }], }; if (this.stackType === StackType.Stack) { return { ...options, series: [ - { ...styleOption.series, data}, - { ...styleOption.stackSeries, data } + { ...styleOption.series, data: dataWithColors}, + { ...styleOption.stackSeries, data: dataWithColors } ] }; } diff --git a/src/model/echarts_scatter.ts b/src/model/echarts_scatter.ts index 41a1665..4d001a5 100644 --- a/src/model/echarts_scatter.ts +++ b/src/model/echarts_scatter.ts @@ -28,11 +28,13 @@ export class EchartsScatter extends EchartsBase { getChartStyleFormJSON(fields: Field[]) { const dimensionMetricsMap = this.getFormDimensionMetricsMap(); + const commonFormConfigJson = this.getCommonFormConfigJson(); + delete commonFormConfigJson.useOptionColors; return { title: t(Strings.design_chart_style), type: 'object', properties: { - ...this.getCommonFormConfigJson(), + ...commonFormConfigJson, axisSortType: { title: t(Strings.chart_sort), type: 'object', diff --git a/src/ui_schema.tsx b/src/ui_schema.tsx index ce69875..e595a0d 100644 --- a/src/ui_schema.tsx +++ b/src/ui_schema.tsx @@ -112,6 +112,11 @@ export const getUiSchema = (viewId: string) => { showTitle: false, }, }, + useOptionColors: { + 'ui:options': { + showTitle: false, + }, + }, theme: { 'ui:widget': (props) => { return ; diff --git a/strings.json b/strings.json index 465a1a6..e49974b 100644 --- a/strings.json +++ b/strings.json @@ -236,6 +236,14 @@ "zh_CN": "脱离零值比例", "en_US": "Exclude zero point" }, + "use_option_colors": { + "zh_CN": "使用选项颜色", + "en_US": "Use option colors" + }, + "use_option_colors_describle": { + "zh_CN": "使用选项颜色", + "en_US": "Use option colors" + }, "show_smooth_line": { "zh_CN": "开启平滑曲线", "en_US": "Show smooth line"