feat(theme): add theme option for all

__tests__/unit/core/index-spec.ts

@@ -1,7 +1,11 @@
-import { Line } from '../../../src';
+import { Line, registerTheme } from '../../../src';
 import { partySupport } from '../../data/party-support';
 import { createDiv } from '../../utils/dom';
 
+registerTheme('new-theme', {
+  colors10: ['green'],
+});
+
 describe('core', () => {
   it('autoFit', () => {
     const line = new Line(createDiv(), {
@@ -46,4 +50,31 @@ describe('core', () => {
 
     expect(line.chart.localRefresh).toBe(false);
   });
+
+  it('theme', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      theme: {
+        colors10: ['red'],
+      },
+    });
+
+    line.render();
+
+    expect(line.chart.getTheme().colors10).toEqual(['red']);
+    expect(line.chart.getTheme().defaultColor).toBe('#5B8FF9');
+
+    line.update({
+      ...line.options,
+      theme: 'new-theme',
+    });
+
+    expect(line.chart.getTheme().colors10).toEqual(['green']);
+  });
 });

src/common/adaptor.ts

@@ -52,3 +52,18 @@ export function animation<O extends Options>(params: Params<O>): Params<O> {
 
   return params;
 }
+
+/**
+ * 设置全局主题配置
+ * @param params
+ */
+export function theme<O extends Options>(params: Params<O>): Params<O> {
+  const { chart, options } = params;
+  const { theme } = options;
+
+  // 存在主题才设置主题
+  if (theme) {
+    chart.theme(theme);
+  }
+  return params;
+}

src/index.ts

@@ -1,5 +1,8 @@
 export const version = '2.0.0';
 
+// G2 自定义能力透出
+export { registerTheme } from '@antv/g2';
+
 // 类型定义导出
 export * from './types';
 

src/plots/line/adaptor.ts

@@ -1,7 +1,7 @@
 import { Geometry } from '@antv/g2';
 import { deepMix, isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { tooltip, interaction, animation } from '../../common/adaptor';
+import { tooltip, interaction, animation, theme } from '../../common/adaptor';
 import { flow, pick } from '../../utils';
 import { LineOptions } from './types';
 
@@ -148,5 +148,5 @@ function label(params: Params<LineOptions>): Params<LineOptions> {
  */
 export function adaptor(params: Params<LineOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  flow(field, meta, axis, legend, tooltip, style, shape, label, interaction, animation)(params);
+  flow(field, meta, theme, axis, legend, tooltip, style, shape, label, interaction, animation)(params);
 }

src/plots/pie/adaptor.ts

@@ -1,6 +1,6 @@
 import { deepMix, each, get, isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { tooltip, interaction, animation } from '../../common/adaptor';
+import { tooltip, interaction, animation, theme } from '../../common/adaptor';
 import { flow } from '../../utils';
 import { StatisticContentStyle, StatisticTitleStyle } from './constants';
 import { PieOptions } from './types';
@@ -211,5 +211,5 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
  */
 export function adaptor(params: Params<PieOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  flow(field, meta, coord, legend, tooltip, label, style, annotation, interaction, animation)(params);
+  flow(field, meta, theme, coord, legend, tooltip, label, style, annotation, interaction, animation)(params);
 }

src/plots/tiny-line/adaptor.ts

@@ -1,4 +1,3 @@
-import { Geometry } from '@antv/g2';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { TinyLineOptions } from './types';
@@ -105,11 +104,26 @@ function shape(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   return params;
 }
 
+/**
+ * 设置全局主题配置
+ * @param params
+ */
+export function theme(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart, options } = params;
+  const { theme } = options;
+
+  // 存在主题才设置主题
+  if (theme) {
+    chart.theme(theme);
+  }
+  return params;
+}
+
 /**
  * 迷你折线图适配器
  * @param chart
  * @param options
  */
 export function adaptor(params: Params<TinyLineOptions>) {
-  flow(field, meta, axis, legend, tooltip, style, shape)(params);
+  flow(field, meta, theme, axis, legend, tooltip, style, shape)(params);
 }

src/plots/tiny-line/types.ts

@@ -8,6 +8,8 @@ export interface TinyLineOptions extends ChartOptions {
   readonly data: number[];
   /** 数据字段元信息 */
   readonly meta?: Record<string, any>;
+  /** 主题，G2 主题，字符串或者 theme object */
+  readonly theme?: string | object;
   /** 是否平滑 */
   readonly smooth?: boolean;
   /** 是否连接空数据 */