Merge pull request #232 from antvis/feat-dark-theme

feat: 支持dark主题

__tests__/unit/theme/index-spec.ts

@@ -26,7 +26,7 @@ describe('theme', () => {
     registerTheme('test-pie', { b: 2 });
 
     // not exist
-    expect(getTheme('test-circle')).toEqual(getGlobalTheme());
-    expect(getTheme('test-pie')).toEqual({ ...getGlobalTheme(), b: 2 });
+    expect(getTheme('test-circle')).toEqual({});
+    expect(getTheme('test-pie')).toEqual({ b: 2 });
   });
 });

src/base/controller/canvas.ts

@@ -5,6 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { getGlobalTheme } from '../../theme/global';
 import { Range } from '../layer';
 import BasePlot from '../plot';
+import ThemeController from './theme';
 
 export interface CanvasControllerCfg {
   readonly containerDOM: HTMLElement;
@@ -95,6 +96,20 @@ export default class CanvasController {
     // this.plot.updateRange();
   }
 
+  /**
+   * 根据主题调整canvas样式
+   */
+  public updateCanvasTheme() {
+    const { theme } = this.plot;
+    const globalTheme = ThemeController.getGlobalTheme(theme);
+    const fill: string = _.get(globalTheme, 'backgroundStyle.fill');
+    if (fill) {
+      this.updateCanvasStyle({
+        backgroundColor: fill,
+      });
+    }
+  }
+
   /**
    * update the canvas dom styles
    * @param styles
@@ -155,5 +170,6 @@ export default class CanvasController {
     });
     this.width = width;
     this.height = height;
+    this.updateCanvasTheme();
   }
 }

src/base/controller/theme.ts

@@ -13,6 +13,17 @@ import { ViewConfig } from '../view-layer';
 const G2DefaultTheme = G2.Global.theme;
 
 export default class ThemeController<T extends ViewConfig = ViewConfig> {
+  /**
+   * 获取指定的全局theme
+   * @param theme
+   */
+  public static getGlobalTheme(theme: string | object) {
+    if (_.isString(theme)) {
+      return getGlobalTheme(theme);
+    }
+    return _.deepMix(getGlobalTheme(), theme);
+  }
+
   /**
    * 通过 theme 和图表类型，获取当前 plot 对应的主题
    * @param props

src/base/plot.ts

@@ -13,6 +13,7 @@ export interface PlotConfig {
   renderer?: string;
   height?: number;
   pixelRatio?: number;
+  theme?: string | {};
 }
 
 export default class BasePlot<T extends PlotConfig = PlotConfig> {
@@ -21,6 +22,7 @@ export default class BasePlot<T extends PlotConfig = PlotConfig> {
   public forceFit: boolean;
   public renderer: string;
   public pixelRatio: number;
+  public theme: string | object;
   public canvas: G.Canvas;
   public destroyed: boolean;
   protected layers: Array<Layer<any>>;
@@ -34,6 +36,7 @@ export default class BasePlot<T extends PlotConfig = PlotConfig> {
     this.pixelRatio = props.pixelRatio || null;
     this.width = props.width;
     this.height = props.height;
+    this.theme = props.theme;
     this.canvasController = new CanvasController({
       containerDOM: this.containerDOM,
       plot: this,
@@ -85,8 +88,12 @@ export default class BasePlot<T extends PlotConfig = PlotConfig> {
     if (config.height) {
       this.height = config.height as number;
     }
+    if (config.theme) {
+      this.theme = config.theme;
+    }
 
     this.canvasController.updateCanvasSize();
+    this.canvasController.updateCanvasTheme();
   }
 
   public changeData(data: any[], all: boolean = false) {

src/base/view-layer.ts

@@ -277,10 +277,20 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
     return this.view;
   }
 
+  // 获取对应的G2 Theme
+  public getTheme() {
+    return this.theme;
+  }
+
   public getResponsiveTheme() {
     return this.themeController.getResponsiveTheme(this.type);
   }
 
+  // 获取对应的Plot Theme
+  public getPlotTheme() {
+    return this.themeController.getPlotTheme(this.options, this.type);
+  }
+
   // 绑定一个外部的stateManager
   public bindStateManager(stateManager, cfg): void {
     this.stateController.bindStateManager(stateManager, cfg);
@@ -345,9 +355,7 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
 
     this.setConfig('tooltip', _.deepMix({}, _.get(this.options, 'tooltip')));
 
-    if (this.options.tooltip.style) {
-      _.deepMix(this.config.theme.tooltip, this.options.tooltip.style);
-    }
+    _.deepMix(this.config.theme.tooltip, this.options.tooltip.style);
   }
 
   protected legend(): void {

src/components/axis/parser.ts

@@ -18,6 +18,7 @@ export default class AxisParser {
   private plot: any;
   private dim: string;
   private localProps: any;
+  private themeConfig: any;
 
   constructor(cfg: AxisConfig) {
     this.plot = cfg.plot;
@@ -26,22 +27,10 @@ export default class AxisParser {
   }
 
   private _init() {
-    /** 如果在图表配置项里没有设置坐标轴整体的visibility则去对应的theme取 */
-    const propos = this.plot.options;
-    const { dim } = this;
-    const axisConfig = propos[`${this.dim}Axis`];
-    if (axisConfig !== undefined) {
-      if (!(axisConfig && axisConfig.visible)) return;
-    }
-    const propsConfig = axisConfig || {};
-    const theme = this.plot.theme;
-    const themeConfig = theme.axis[dim];
-    const config = _.deepMix({}, themeConfig, propsConfig);
-    if (dim === 'x' || dim === 'y') {
-      config.position = { x: 'bottom', y: 'left' }[dim];
-    }
-    this.localProps = config;
-    if (config.visible) {
+    this.config = false;
+    const theme = this.plot.getPlotTheme();
+    this.themeConfig = theme && theme.axis && theme.axis[this.dim];
+    if (this._needDraw()) {
       this._styleParser();
     }
   }
@@ -60,25 +49,40 @@ export default class AxisParser {
     propertyMapping(this.localProps, this.config, 'autoRotateTitle');
   }
 
+  private _needDraw() {
+    /** 如果在图表配置项里没有设置坐标轴整体的visibility则去对应的theme取 */
+    const propos = this.plot.options;
+    const propsConfig = propos[`${this.dim}Axis`] ? propos[`${this.dim}Axis`] : {};
+    const config = _.deepMix({}, this.themeConfig, propsConfig);
+    this.localProps = config;
+    if (config.visible) {
+      return true;
+    }
+    return false;
+  }
+
   private _lineParser() {
     this.config.line = this.localProps.line;
     if (this.localProps.line.style) {
       this.config.line = this.localProps.line.style;
     }
+    this.applyThemeConfig('line');
   }
 
   private _gridParser() {
     this.config.grid = this.localProps.grid;
     if (this.localProps.grid.style) {
       this.config.grid = this.localProps.grid.style;
     }
+    this.applyThemeConfig('grid');
   }
 
   private _tickLineParser() {
     this.config.tickLine = this.localProps.tickLine;
     if (this.localProps.tickLine.style) {
       this.config.tickLine = this.localProps.tickLine.style;
     }
+    this.applyThemeConfig('tickLine');
   }
 
   private _labelParser() {
@@ -88,6 +92,7 @@ export default class AxisParser {
     if (style) {
       labelConfig.textStyle = this.localProps.label.style;
     }
+    labelConfig.textStyle = _.deepMix({}, _.get(this.themeConfig, 'label.style'), labelConfig.textStyle);
     /** label formatter */
     if (formatter) {
       const textFormatter = this.localProps.label.formatter;
@@ -112,6 +117,7 @@ export default class AxisParser {
     if (this.localProps.title.style) {
       titleConfig.textStyle = this.localProps.title.style;
     }
+    titleConfig.textStyle = _.deepMix({}, _.get(this.config, 'title.style'), titleConfig.textStyle);
 
     if (this.localProps.title.text) {
       titleConfig.text = this.localProps.title.text;
@@ -128,4 +134,8 @@ export default class AxisParser {
     }
     return false;
   }
+
+  private applyThemeConfig(type: 'line' | 'grid' | 'tickLine') {
+    this.config[type] = _.deepMix({}, _.get(this.themeConfig, `${type}.style`), this.config[type]);
+  }
 }

src/components/label/parser.ts

@@ -19,6 +19,7 @@ export default class LabelParser {
 
   private _parseCallBack(val) {
     const labelProps = this.plot.options.label;
+    const theme = this.plot.getPlotTheme();
     const config: DataPointType = { ...labelProps };
     this._parseOffset(labelProps, config);
     if (labelProps.position) {
@@ -38,6 +39,7 @@ export default class LabelParser {
         config.textStyle = labelProps.style;
       }
     }
+    config.textStyle = _.deepMix({}, _.get(theme, 'label.style'), config.textStyle);
     if (labelProps.autoRotate) {
       config.autoRotate = labelProps.autoRotate;
     }