fix: fix theme update for bar/column (#1986)

antvis · Nov 21, 2020 · 35cf651 · 35cf651
1 parent e8643d2
commit 35cf651
Show file tree

Hide file tree

Showing 6 changed files with 234 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<O extends OptionWithConversionTag>(field: string, horizontal = true) {
+export function conversionTag<O extends OptionWithConversionTag & Options>(field: string, horizontal = true) {
   return function (params: Params<O>): Params<O> {
     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
@@ -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<O extends IntervalGeometryOptions>(params: Params<O>): Params<O> {
   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<O extends IntervalGeometryOptions>(params: Params<O>): 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
@@ -177,14 +177,14 @@ export function adaptor(params: Params<ColumnOptions>, isBar = false) {
   const { options } = params;
   return flow(
     defaultOptions, // 处理默认配置
+    theme, // theme 需要在 geometry 之前
     geometry,
     meta,
     axis,
     legend,
     tooltip,
     slider,
     scrollbar,
-    theme,
     label,
     interaction,
     animation,