Skip to content

Commit 0b481d5

Browse files
hustcchustcc
authored
feat: line options (#1308)
* feat(interaction): move interaction to common, add line interaction * feat(line): add animation options * feat(theme): add theme option for all * feat(line): add point options
1 parent 8214a0c commit 0b481d5

File tree

12 files changed

+245
-32
lines changed

12 files changed

+245
-32
lines changed

‎__tests__/unit/core/index-spec.ts

+32-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { Line } from '../../../src';
1+
import { Line, registerTheme } from '../../../src';
22
import { partySupport } from '../../data/party-support';
33
import { createDiv } from '../../utils/dom';
44

5+
registerTheme('new-theme', {
6+
colors10: ['green'],
7+
});
8+
59
describe('core', () => {
610
it('autoFit', () => {
711
const line = new Line(createDiv(), {
@@ -46,4 +50,31 @@ describe('core', () => {
4650

4751
expect(line.chart.localRefresh).toBe(false);
4852
});
53+
54+
it('theme', () => {
55+
const line = new Line(createDiv(), {
56+
width: 400,
57+
height: 300,
58+
appendPadding: 10,
59+
data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
60+
xField: 'date',
61+
yField: 'value',
62+
seriesField: 'type',
63+
theme: {
64+
colors10: ['red'],
65+
},
66+
});
67+
68+
line.render();
69+
70+
expect(line.chart.getTheme().colors10).toEqual(['red']);
71+
expect(line.chart.getTheme().defaultColor).toBe('#5B8FF9');
72+
73+
line.update({
74+
...line.options,
75+
theme: 'new-theme',
76+
});
77+
78+
expect(line.chart.getTheme().colors10).toEqual(['green']);
79+
});
4980
});

‎__tests__/unit/plots/line/animation-spec.ts

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Line } from '../../../../src';
2+
import { partySupport } from '../../../data/party-support';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('line', () => {
6+
it('x*y with animation', () => {
7+
const line = new Line(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
data: partySupport.filter((o) => ['FF'].includes(o.type)),
11+
xField: 'date',
12+
yField: 'value',
13+
appendPadding: 10,
14+
smooth: true,
15+
animation: {
16+
enter: {
17+
animation: 'fade-in',
18+
},
19+
leave: {
20+
animation: 'fade-out',
21+
},
22+
},
23+
});
24+
25+
line.render();
26+
27+
// 追加默认的动画配置
28+
expect(line.chart.geometries[0].animateOption).toEqual({
29+
appear: {
30+
duration: 450,
31+
easing: 'easeQuadOut',
32+
},
33+
update: {
34+
duration: 400,
35+
easing: 'easeQuadInOut',
36+
},
37+
enter: {
38+
duration: 400,
39+
easing: 'easeQuadInOut',
40+
animation: 'fade-in',
41+
},
42+
leave: {
43+
duration: 350,
44+
easing: 'easeQuadIn',
45+
animation: 'fade-out',
46+
},
47+
});
48+
});
49+
});

‎__tests__/unit/plots/line/point-spec.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Line } from '../../../../src';
2+
import { partySupport } from '../../../data/party-support';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('line', () => {
6+
it('x*y*color point', () => {
7+
const line = new Line(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
11+
xField: 'date',
12+
yField: 'value',
13+
seriesField: 'type',
14+
appendPadding: 10,
15+
});
16+
17+
line.render();
18+
expect(line.chart.geometries.length).toBe(1);
19+
20+
let xValue;
21+
let yValue;
22+
let colorValue;
23+
line.update({
24+
...line.options,
25+
point: {
26+
size: 2,
27+
shape: 'circle',
28+
style: (x: string, y: number, color: string) => {
29+
xValue = x;
30+
yValue = y;
31+
colorValue = color;
32+
return {
33+
fill: color === 'FF' ? 'red' : 'blue',
34+
};
35+
},
36+
},
37+
});
38+
expect(line.chart.geometries.length).toBe(2);
39+
expect(xValue).toBe('25/01/2018');
40+
expect(yValue).toBe(400);
41+
expect(colorValue).toBe('Lab');
42+
43+
const point = line.chart.geometries[1];
44+
expect(point.shapeType).toBe('point');
45+
// @ts-ignore
46+
expect(point.attributeOption.size.values).toEqual([2]);
47+
// @ts-ignore
48+
// expect(point.attributeOption.shape.values).toEqual(['circle']);
49+
});
50+
});

‎src/common/adaptor.ts

+49
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
/**
22
* @file 通用的一些 adaptor
33
*/
4+
import { Geometry } from '@antv/g2';
5+
import { each } from '@antv/util';
46
import { Params } from '../core/adaptor';
57
import { Options } from '../types';
8+
import { Interaction } from '../types/interaction';
69

710
/**
811
* 通用 tooltip 配置
@@ -18,3 +21,49 @@ export function tooltip<O extends Options>(params: Params<O>): Params<O> {
1821

1922
return params;
2023
}
24+
25+
/**
26+
* Interaction 配置
27+
* @param params
28+
*/
29+
export function interaction<O extends Options>(params: Params<O>): Params<O> {
30+
const { chart, options } = params;
31+
const { interactions } = options;
32+
33+
each(interactions, (i: Interaction) => {
34+
chart.interaction(i.name, i.cfg || {});
35+
});
36+
37+
return params;
38+
}
39+
40+
/**
41+
* 动画
42+
* @param params
43+
*/
44+
export function animation<O extends Options>(params: Params<O>): Params<O> {
45+
const { chart, options } = params;
46+
const { animation } = options;
47+
48+
// 所有的 Geometry 都使用同一动画（各个图形如有区别，自行覆盖）
49+
each(chart.geometries, (g: Geometry) => {
50+
g.animate(animation);
51+
});
52+
53+
return params;
54+
}
55+
56+
/**
57+
* 设置全局主题配置
58+
* @param params
59+
*/
60+
export function theme<O extends Options>(params: Params<O>): Params<O> {
61+
const { chart, options } = params;
62+
const { theme } = options;
63+
64+
// 存在主题才设置主题
65+
if (theme) {
66+
chart.theme(theme);
67+
}
68+
return params;
69+
}

‎src/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
export const version = '2.0.0';
22

3+
// G2 自定义能力透出
4+
export { registerTheme } from '@antv/g2';
5+
36
// 类型定义导出
47
export * from './types';
58

‎src/plots/line/adaptor.ts

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Geometry } from '@antv/g2';
22
import { deepMix, isFunction } from '@antv/util';
33
import { Params } from '../../core/adaptor';
4-
import { tooltip } from '../../common/adaptor';
4+
import { tooltip, interaction, animation, theme } from '../../common/adaptor';
55
import { flow, pick } from '../../utils';
66
import { LineOptions } from './types';
77

@@ -141,12 +141,41 @@ function label(params: Params<LineOptions>): Params<LineOptions> {
141141
return params;
142142
}
143143

144+
/**
145+
* point 辅助点的配置处理
146+
* @param params
147+
*/
148+
function point(params: Params<LineOptions>): Params<LineOptions> {
149+
const { chart, options } = params;
150+
const { point, seriesField, xField, yField } = options;
151+
152+
if (point) {
153+
const { shape, size, style } = point;
154+
const pointGeometry = chart.point().position(`${xField}*${yField}`).size(size);
155+
156+
// shape
157+
if (isFunction(shape)) {
158+
pointGeometry.shape(`${xField}*${yField}*${seriesField}`, shape);
159+
} else {
160+
pointGeometry.shape(shape);
161+
}
162+
163+
// style
164+
if (isFunction(style)) {
165+
pointGeometry.style(`${xField}*${yField}*${seriesField}`, style);
166+
} else {
167+
pointGeometry.style(style);
168+
}
169+
}
170+
return params;
171+
}
172+
144173
/**
145174
* 折线图适配器
146175
* @param chart
147176
* @param options
148177
*/
149178
export function adaptor(params: Params<LineOptions>) {
150179
// flow 的方式处理所有的配置到 G2 API
151-
flow(field, meta, axis, legend, tooltip, style, shape, label)(params);
180+
flow(field, meta, point, theme, axis, legend, tooltip, style, shape, label, interaction, animation)(params);
152181
}

‎src/plots/line/types.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ export interface LineOptions extends Options {
1212
readonly smooth?: boolean;
1313
/** 是否连接空数据 */
1414
readonly connectNulls?: boolean;
15-
/** 折线 extra 图形样式 */
15+
/** 折线图形样式 */
1616
readonly lineStyle?: ShapeStyle | ((x?: any, y?: any, color?: any) => ShapeStyle);
1717
/** 折线数据点图形样式 */
1818
readonly point?: {
19-
visible?: boolean;
20-
shape?: ShapeStyle;
21-
size?: number;
22-
color?: string;
23-
style?: ShapeStyle;
19+
/** point shape 映射 */
20+
readonly shape?: string | ((x?: any, y?: any, color?: any) => string);
21+
/** 大小映射，先简化处理为确定值 */
22+
readonly size?: number;
23+
/** 样式映射 */
24+
readonly style?: ShapeStyle | ((x?: any, y?: any, color?: any) => ShapeStyle);
2425
};
2526
}

‎src/plots/pie/adaptor.ts

+2-19
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { deepMix, each, get, isFunction } from '@antv/util';
22
import { Params } from '../../core/adaptor';
3-
import { tooltip } from '../../common/adaptor';
3+
import { tooltip, interaction, animation, theme } from '../../common/adaptor';
44
import { flow } from '../../utils';
5-
import { Interaction } from '../../types/interaction';
65
import { StatisticContentStyle, StatisticTitleStyle } from './constants';
76
import { PieOptions } from './types';
87
import { getStatisticData } from './utils';
@@ -15,7 +14,6 @@ function field(params: Params<PieOptions>): Params<PieOptions> {
1514
const { chart, options } = params;
1615
const { data, angleField, colorField, color } = options;
1716

18-
// TODO 饼图数据非法处理
1917
chart.data(data);
2018
const geometry = chart.interval().position(`1*${angleField}`).adjust({ type: 'stack' });
2119

@@ -206,27 +204,12 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
206204
return params;
207205
}
208206

209-
/**
210-
* Interaction 配置
211-
* @param params
212-
*/
213-
export function interaction(params: Params<PieOptions>): Params<PieOptions> {
214-
const { chart, options } = params;
215-
const { interactions } = options;
216-
217-
each(interactions, (i: Interaction) => {
218-
chart.interaction(i.name, i.cfg || {});
219-
});
220-
221-
return params;
222-
}
223-
224207
/**
225208
* 折线图适配器
226209
* @param chart
227210
* @param options
228211
*/
229212
export function adaptor(params: Params<PieOptions>) {
230213
// flow 的方式处理所有的配置到 G2 API
231-
flow(field, meta, coord, legend, tooltip, label, style, annotation, interaction)(params);
214+
flow(field, meta, theme, coord, legend, tooltip, label, style, annotation, interaction, animation)(params);
232215
}

‎src/plots/tiny-line/adaptor.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Geometry } from '@antv/g2';
21
import { Params } from '../../core/adaptor';
32
import { flow } from '../../utils';
43
import { TinyLineOptions } from './types';
@@ -105,11 +104,26 @@ function shape(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
105104
return params;
106105
}
107106

107+
/**
108+
* 设置全局主题配置
109+
* @param params
110+
*/
111+
export function theme(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
112+
const { chart, options } = params;
113+
const { theme } = options;
114+
115+
// 存在主题才设置主题
116+
if (theme) {
117+
chart.theme(theme);
118+
}
119+
return params;
120+
}
121+
108122
/**
109123
* 迷你折线图适配器
110124
* @param chart
111125
* @param options
112126
*/
113127
export function adaptor(params: Params<TinyLineOptions>) {
114-
flow(field, meta, axis, legend, tooltip, style, shape)(params);
128+
flow(field, meta, theme, axis, legend, tooltip, style, shape)(params);
115129
}

‎src/plots/tiny-line/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export interface TinyLineOptions extends ChartOptions {
88
readonly data: number[];
99
/** 数据字段元信息 */
1010
readonly meta?: Record<string, any>;
11+
/** 主题，G2 主题，字符串或者 theme object */
12+
readonly theme?: string | object;
1113
/** 是否平滑 */
1214
readonly smooth?: boolean;
1315
/** 是否连接空数据 */

‎src/types/animation.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export type Animation = {};
1+
import { AnimateOption } from '@antv/g2/lib/interface';
2+
3+
export type Animation = AnimateOption | false;

‎src/types/common.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export type Options = ChartOptions & {
9898
/** 主题，G2 主题，字符串或者 theme object */
9999
readonly theme?: string | object;
100100
/** 颜色色板 */
101-
readonly color?: string | string[];
101+
readonly color?: string | string[] | ((...args: any[]) => string);
102102
readonly xAxis?: Axis;
103103
readonly yAxis?: Axis;
104104
readonly label?: Label;

0 commit comments

Comments
 (0)