From 0f2e0efb7fae46395fe9e42bb7c24096d3337d3f Mon Sep 17 00:00:00 2001 From: zqlu Date: Sat, 21 Nov 2020 17:12:36 +0800 Subject: [PATCH] fix: fix theme update for bar/column --- __tests__/unit/adaptor/conversion-tag-spec.ts | 102 ++++++++++++++++++ __tests__/unit/plots/bar/index-spec.ts | 56 ++++++++++ __tests__/unit/plots/column/index-spec.ts | 56 ++++++++++ src/adaptor/conversion-tag.ts | 17 +-- src/adaptor/geometries/interval.ts | 15 +-- src/plots/column/adaptor.ts | 2 +- 6 files changed, 234 insertions(+), 14 deletions(-) diff --git a/__tests__/unit/adaptor/conversion-tag-spec.ts b/__tests__/unit/adaptor/conversion-tag-spec.ts index 8c4562539e..611a9c3450 100644 --- a/__tests__/unit/adaptor/conversion-tag-spec.ts +++ b/__tests__/unit/adaptor/conversion-tag-spec.ts @@ -151,6 +151,57 @@ describe('column conversion tag', () => { expect(group.findAllByName('conversion-tag-text')).toEqual([]); }); + it('conversionTag with theme', async () => { + plot.update({ + theme: { + styleSheet: { + brandColor: '#FF6B3B', + paletteQualitative10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + paletteQualitative20: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + '#2BCB95', + '#B1ABF4', + '#1D42C2', + '#1D9ED1', + '#D64BC0', + '#255634', + '#8C8C47', + '#8CDAE5', + '#8E283B', + '#791DC9', + ], + }, + }, + conversionTag: {}, + }); + + await delay(100); + + const theme = plot.chart.getTheme(); + expect(theme.defaultColor).toBe('#FF6B3B'); + expect(theme.columnWidthRatio).toBe(1 / 3); + }); + it('clear', async () => { plot.update({ ...options, @@ -284,6 +335,57 @@ describe('bar conversion tag', () => { }); }); + it('conversionTag with theme', async () => { + plot.update({ + theme: { + styleSheet: { + brandColor: '#FF6B3B', + paletteQualitative10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + paletteQualitative20: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + '#2BCB95', + '#B1ABF4', + '#1D42C2', + '#1D9ED1', + '#D64BC0', + '#255634', + '#8C8C47', + '#8CDAE5', + '#8E283B', + '#791DC9', + ], + }, + }, + conversionTag: {}, + }); + + await delay(100); + + const theme = plot.chart.getTheme(); + expect(theme.defaultColor).toBe('#FF6B3B'); + expect(theme.columnWidthRatio).toBe(1 / 3); + }); + it('clear', async () => { plot.update({ ...options, diff --git a/__tests__/unit/plots/bar/index-spec.ts b/__tests__/unit/plots/bar/index-spec.ts index 5f9d7d8b73..0908fe055d 100644 --- a/__tests__/unit/plots/bar/index-spec.ts +++ b/__tests__/unit/plots/bar/index-spec.ts @@ -309,4 +309,60 @@ describe('bar', () => { bar.destroy(); }); + + it('theme', () => { + const bar = new Bar(createDiv('theme'), { + width: 300, + height: 400, + data: salesByArea, + xField: 'area', + yField: 'sales', + barWidthRatio: 0.1, + theme: { + styleSheet: { + brandColor: '#FF6B3B', + paletteQualitative10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + paletteQualitative20: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + '#2BCB95', + '#B1ABF4', + '#1D42C2', + '#1D9ED1', + '#D64BC0', + '#255634', + '#8C8C47', + '#8CDAE5', + '#8E283B', + '#791DC9', + ], + }, + }, + }); + + bar.render(); + + const theme = bar.chart.getTheme(); + expect(theme.defaultColor).toBe('#FF6B3B'); + expect(theme.columnWidthRatio).toBe(0.1); + }); }); diff --git a/__tests__/unit/plots/column/index-spec.ts b/__tests__/unit/plots/column/index-spec.ts index c3fc2d90dd..8c4aa7756c 100644 --- a/__tests__/unit/plots/column/index-spec.ts +++ b/__tests__/unit/plots/column/index-spec.ts @@ -320,4 +320,60 @@ describe('column', () => { column.destroy(); }); + + it('theme', () => { + const column = new Column(createDiv('theme'), { + width: 300, + height: 400, + data: salesByArea, + xField: 'area', + yField: 'sales', + columnWidthRatio: 0.8, + theme: { + styleSheet: { + brandColor: '#FF6B3B', + paletteQualitative10: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + paletteQualitative20: [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + '#2BCB95', + '#B1ABF4', + '#1D42C2', + '#1D9ED1', + '#D64BC0', + '#255634', + '#8C8C47', + '#8CDAE5', + '#8E283B', + '#791DC9', + ], + }, + }, + }); + + column.render(); + + const theme = column.chart.getTheme(); + expect(theme.defaultColor).toBe('#FF6B3B'); + expect(theme.columnWidthRatio).toBe(0.8); + }); }); diff --git a/src/adaptor/conversion-tag.ts b/src/adaptor/conversion-tag.ts index 7638b6868b..aa040721d6 100644 --- a/src/adaptor/conversion-tag.ts +++ b/src/adaptor/conversion-tag.ts @@ -1,10 +1,11 @@ -import { map, find, each } from '@antv/util'; +import { map, find, each, isObject } from '@antv/util'; import { Coordinate, IGroup, ShapeAttrs } from '@antv/g2/lib/dependents'; -import { Geometry, View } from '@antv/g2'; +import { Geometry, View, getTheme } from '@antv/g2'; import Element from '@antv/g2/lib/geometry/element'; import { Params } from '../core/adaptor'; import { deepAssign } from '../utils'; import { conversionTagformatter } from '../utils/conversion'; +import { Options } from '../types'; /** 转化率组件配置选项 */ export interface ConversionTagOptions { @@ -198,16 +199,18 @@ function renderTag(options: TagRenderConfig, elemPrev: Element, elemNext: Elemen * @param field 用户转化率计算的字段 * @param horizontal 是否水平方向的转化率 */ -export function conversionTag(field: string, horizontal = true) { +export function conversionTag(field: string, horizontal = true) { return function (params: Params): Params { const { options, chart } = params; - const { conversionTag } = options; + const { conversionTag, theme } = options; if (conversionTag) { // 有转化率组件时，柱子宽度占比自动为 1/3 - chart.theme({ - columnWidthRatio: 1 / 3, - }); + chart.theme( + deepAssign({}, isObject(theme) ? theme : getTheme(theme), { + columnWidthRatio: 1 / 3, + }) + ); // 使用 shape annotation 绘制转化率组件 chart.annotation().shape({ render: (container, view) => { diff --git a/src/adaptor/geometries/interval.ts b/src/adaptor/geometries/interval.ts index 2679f5161b..9c0e4c15a8 100644 --- a/src/adaptor/geometries/interval.ts +++ b/src/adaptor/geometries/interval.ts @@ -1,5 +1,5 @@ -import { Geometry } from '@antv/g2'; -import { isNil } from '@antv/util'; +import { Geometry, getTheme } from '@antv/g2'; +import { isNil, isObject } from '@antv/util'; import { Params } from '../../core/adaptor'; import { deepAssign } from '../../utils'; import { getTooltipMapping } from '../../utils/tooltip'; @@ -32,7 +32,7 @@ export interface IntervalGeometryOptions extends GeometryOptions { */ function otherAdaptor(params: Params): Params { const { chart, options, ext } = params; - const { seriesField, isGroup, isStack, marginRatio, widthRatio, groupField } = options; + const { seriesField, isGroup, isStack, marginRatio, widthRatio, groupField, theme } = options; const g = ext.geometry as Geometry; /** @@ -63,9 +63,12 @@ function otherAdaptor(params: Params): Par // widthRatio if (!isNil(widthRatio)) { - chart.theme({ - columnWidthRatio: widthRatio, - }); + chart.theme( + deepAssign({}, isObject(theme) ? theme : getTheme(theme), { + // columWidthRatio 配置覆盖 theme 中的配置 + columnWidthRatio: widthRatio, + }) + ); } return params; diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts index 90ecab10f6..f6efb96135 100644 --- a/src/plots/column/adaptor.ts +++ b/src/plots/column/adaptor.ts @@ -177,6 +177,7 @@ export function adaptor(params: Params, isBar = false) { const { options } = params; return flow( defaultOptions, // 处理默认配置 + theme, // theme 需要在 geometry 之前 geometry, meta, axis, @@ -184,7 +185,6 @@ export function adaptor(params: Params, isBar = false) { tooltip, slider, scrollbar, - theme, label, interaction, animation,