Merge branch 'master' of https://github.com/antvis/g2plot

antvis · Nov 19, 2019 · 22ff392 · 22ff392
2 parents b6e2da2 + 440f5d7
commit 22ff392
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 35 deletions.
diff --git a/examples/column/basic/demo/column-scrollbar.js b/examples/column/basic/demo/column-scrollbar.js
@@ -33,6 +33,4 @@ fetch('../data/sales.json')
       ],
     });
     columnPlot.render();
-
-    window.__plot = columnPlot;
   });
diff --git a/src/components/axis/parser.ts b/src/components/axis/parser.ts
@@ -1,6 +1,8 @@
 import { DataPointType } from '@antv/g2/lib/interface';
 import * as _ from '@antv/util';
 import { ViewLayer } from '../..';
+import { ViewConfig } from '../../base/view-layer';
+import { IBaseAxis } from '../../interface/config';
 
 function propertyMapping(source, target, field) {
   if (source[field]) {
@@ -17,7 +19,7 @@ export default class AxisParser {
   public config: any = false;
   private plot: any;
   private dim: string;
-  private localProps: any;
+  private localProps: IBaseAxis;
   private themeConfig: any;
 
   constructor(cfg: AxisConfig) {
@@ -70,11 +72,19 @@ export default class AxisParser {
   }
 
   private _gridParser() {
-    this.config.grid = this.localProps.grid;
-    if (this.localProps.grid.style) {
-      this.config.grid = this.localProps.grid.style;
+    const { grid: gridCfg } = this.localProps;
+    const { style } = gridCfg;
+
+    if (_.isFunction(style)) {
+      // @see g2/component/src/axis/base:_renderGrid
+      this.config.grid = (text: string, index: number, count: number) => {
+        const cfg = style(text, index, count);
+        return _.deepMix({}, _.get(this.themeConfig, `grid.style`), cfg);
+      };
+    } else if (style) {
+      this.config.grid = style;
+      this.applyThemeConfig('grid');
     }
-    this.applyThemeConfig('grid');
   }
 
   private _tickLineParser() {
@@ -130,8 +140,6 @@ export default class AxisParser {
   private _isVisible(name: string) {
     if (this.localProps[name] && this.localProps[name].visible) {
       return true;
-    } else if (_.isFunction(this.localProps[name])) {
-      return true;
     }
     return false;
   }

diff --git a/src/interface/config.ts b/src/interface/config.ts
@@ -27,48 +27,49 @@ interface IEvents {
   [k: string]: string;
 }
 
-interface IBaseAxis {
+// TODO: g 提供详细style的类型定义
+export interface IStyleConfig {
+  [key: string]: string | number | boolean;
+}
+
+export interface IBaseAxis {
   /** 轴是否需要显示，默认true */
   visible?: boolean;
   /** 轴类型，对应scale类型 */
   type?: 'linear' | 'time' | 'cat' | 'dateTime' | 'category' | 'log' | 'pow' | 'timeCat';
   /** 轴位置，默认下和左 */
   line?: {
     visible?: boolean;
-    style?: {};
+    style?: IStyleConfig;
+  };
+  grid?: {
+    visible?: boolean;
+    style?: IStyleConfig | ((text: string, idx: number, count: number) => IStyleConfig);
   };
-  grid?:
-    | {
-        visible?: boolean;
-        style?: {};
-      }
-    | ((text: string, idx: number, count: number) => any);
   autoRotateLabel?: boolean; // 当 label 过长发生遮挡时是否自动旋转坐标轴文本，默认为 true
   autoHideLabel?: boolean; // 当 label 存在遮挡时，是否自动隐藏被遮挡的坐标轴文本，默认为 false
   autoRotateTitle?: boolean;
-  label?:
-    | {
-        visible?: boolean;
-        formatter?: (...args: any[]) => string;
-        offset?: number; // 坐标轴文本距离坐标轴线的距离
-        offsetX?: number; // 在 offset 的基础上，设置坐标轴文本在 x 方向上的偏移量
-        offsetY?: number; // 在 offset 的基础上，设置坐标轴文本在 y 方向上的偏移量
-        rotate?: number; // label 文本旋转的角度，使用角度制
-        useHtml?: boolean; // 是否开启使用 HTML 渲染坐标轴文本
-        htmlTemplate?: string; // 返回 label 的 html 字符串，只在 useHtml: true 的情况下生效
-        style?: {};
-      }
-    | ((...args: any[]) => any);
+  label?: {
+    visible?: boolean;
+    formatter?: (...args: any[]) => string;
+    offset?: number; // 坐标轴文本距离坐标轴线的距离
+    offsetX?: number; // 在 offset 的基础上，设置坐标轴文本在 x 方向上的偏移量
+    offsetY?: number; // 在 offset 的基础上，设置坐标轴文本在 y 方向上的偏移量
+    rotate?: number; // label 文本旋转的角度，使用角度制
+    useHtml?: boolean; // 是否开启使用 HTML 渲染坐标轴文本
+    htmlTemplate?: string; // 返回 label 的 html 字符串，只在 useHtml: true 的情况下生效
+    style?: IStyleConfig;
+  };
   title?: {
     visible?: boolean;
     autoRotate?: boolean;
     text?: string;
     offset?: number;
-    style?: {};
+    style?: IStyleConfig;
   };
   tickLine?: {
     visible?: boolean;
-    style?: {};
+    style?: IStyleConfig;
   };
   events?: IEvents;
 }
@@ -140,7 +141,7 @@ export interface Tooltip {
   /** 辅助线 */
   crosshair?: 'x' | 'y' | 'cross' | boolean;
   crosshairs?: { type: string }; // FIXME:
-  style?: {};
+  style?: IStyleConfig;
 }
 
 interface Animation {
@@ -161,7 +162,7 @@ export interface ElementOption {
   color?: AttributeCfg;
   size?: AttributeCfg;
   shape?: AttributeCfg;
-  style?: {};
+  style?: IStyleConfig;
   label?: LabelOptions | false;
   animate?: {};
   adjust?: AdjustCfg[];
@@ -215,7 +216,7 @@ interface StateCondition {
 
 export interface StateConfig {
   condition: () => any | StateCondition;
-  style?: {};
+  style?: IStyleConfig;
   related?: string[];
 }
 

diff --git a/src/plots/column/layer.ts b/src/plots/column/layer.ts
@@ -76,6 +76,9 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
         position: 'top',
         adjustColor: true,
         offset: 4,
+        style: {
+          textBaseline: 'bottom',
+        },
       },
       legend: {
         visible: true,