From fcb8933307e38353006c4577244b62d980bc3100 Mon Sep 17 00:00:00 2001 From: zqlu Date: Mon, 18 Nov 2019 19:15:01 +0800 Subject: [PATCH 1/2] fix: set textBaseline style for column data label --- examples/column/basic/demo/column-scrollbar.js | 2 -- src/plots/column/layer.ts | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/column/basic/demo/column-scrollbar.js b/examples/column/basic/demo/column-scrollbar.js index fac3ab8174..bfe5617f58 100644 --- 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/plots/column/layer.ts b/src/plots/column/layer.ts index 86e8c7aacf..c5d3c0ea35 100644 --- a/src/plots/column/layer.ts +++ b/src/plots/column/layer.ts @@ -76,6 +76,9 @@ export default class BaseColumnLayer Date: Mon, 18 Nov 2019 20:32:07 +0800 Subject: [PATCH 2/2] fix: allow axis grid style callback config --- src/components/axis/parser.ts | 22 ++++++++++----- src/interface/config.ts | 53 ++++++++++++++++++----------------- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/components/axis/parser.ts b/src/components/axis/parser.ts index 6973356eb3..7261381019 100644 --- 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 index a584120cb9..27fd72dfa4 100644 --- a/src/interface/config.ts +++ b/src/interface/config.ts @@ -27,7 +27,12 @@ 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类型 */ @@ -35,40 +40,36 @@ interface IBaseAxis { /** 轴位置，默认下和左 */ 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[]; }