Skip to content

Commit ec71651

Browse files
connonoyinshi.wyl
connono
and
yinshi.wyl
authored
feat: add tiny-line (#1304)
* feat: add tinyLine * feat: add tiny-line * feat: add tinyLine * feat: add tiny-line * feat: add tiny-line * feat: add tiny-line * feat: add tiny-line Co-authored-by: yinshi.wyl <[email protected]>
1 parent f9b9acf commit ec71651

File tree

6 files changed

+233
-3
lines changed

6 files changed

+233
-3
lines changed

‎__tests__/unit/plots/tiny-line/index-spec.ts

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { TinyLine } from '../../../../src';
2+
import { partySupport } from '../../../data/party-support';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('tiny-line', () => {
6+
it('data', () => {
7+
const tinyLine = new TinyLine(createDiv(), {
8+
width: 80,
9+
height: 40,
10+
meta: {
11+
value: {
12+
min: 0,
13+
max: 5000,
14+
},
15+
},
16+
data: partySupport
17+
.filter((o) => o.type === 'FF')
18+
.map((item) => {
19+
return item.value;
20+
}),
21+
autoFit: false,
22+
});
23+
24+
tinyLine.render();
25+
expect(tinyLine.chart.geometries[0].elements.length).toBe(1);
26+
});
27+
28+
it('data with smooth', () => {
29+
const tinyLine = new TinyLine(createDiv(), {
30+
width: 80,
31+
height: 40,
32+
meta: {
33+
value: {
34+
min: 0,
35+
max: 5000,
36+
},
37+
},
38+
data: partySupport
39+
.filter((o) => o.type === 'FF')
40+
.map((item) => {
41+
return item.value;
42+
}),
43+
autoFit: false,
44+
smooth: true,
45+
});
46+
47+
tinyLine.render();
48+
expect(tinyLine.chart.geometries[0].attributes.shape.values).toEqual(['smooth']);
49+
expect(tinyLine.chart.geometries[0].elements.length).toBe(1);
50+
});
51+
52+
it('data with style', () => {
53+
const tinyLine = new TinyLine(createDiv(), {
54+
width: 80,
55+
height: 40,
56+
data: partySupport
57+
.filter((o) => o.type === 'FF')
58+
.map((item) => {
59+
return item.value;
60+
}),
61+
lineStyle: {
62+
lineDash: [2, 2],
63+
},
64+
autoFit: false,
65+
appendPadding: 10,
66+
});
67+
68+
tinyLine.render();
69+
70+
const geometry = tinyLine.chart.geometries[0];
71+
const elements = geometry.elements;
72+
expect(elements[0].shape.attr('lineDash')).toEqual([2, 2]);
73+
74+
tinyLine.update({
75+
...tinyLine.options,
76+
lineStyle: () => {
77+
return { lineDash: [4, 4] };
78+
},
79+
});
80+
expect(tinyLine.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
81+
});
82+
});

‎src/core/adaptor.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { Chart } from '@antv/g2';
2-
import { Options } from '../types';
32

43
/**
54
* adaptor flow 的参数
65
*/
7-
export type Params<O extends Options> = {
6+
export type Params<O> = {
87
readonly chart: Chart;
98
readonly options: O;
109
};
@@ -13,4 +12,4 @@ export type Params<O extends Options> = {
1312
* schema 转 G2 的适配器基类
1413
* 使用 纯函数的方式，这里只是类型定义
1514
*/
16-
export type Adaptor<O extends Options> = (params: Params<O>) => void;
15+
export type Adaptor<O> = (params: Params<O>) => void;

‎src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ export { Pie, PieOptions } from './plots/pie';
1010

1111
//散点图及类型定义
1212
export { Scatter, ScatterOptions } from './plots/scatter';
13+
14+
export { TinyLine, TinyLineOptions } from './plots/tiny-line';

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

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Geometry } from '@antv/g2';
2+
import { Params } from '../../core/adaptor';
3+
import { flow } from '../../utils';
4+
import { TinyLineOptions } from './types';
5+
import { isFunction } from '@antv/util';
6+
7+
/**
8+
* 字段
9+
* @param params
10+
*/
11+
function field(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
12+
const { chart, options } = params;
13+
const { data, connectNulls } = options;
14+
15+
const seriesData = data.map((y: number, x: number) => {
16+
return { x, y };
17+
});
18+
19+
chart.data(seriesData);
20+
21+
chart.line({ connectNulls }).position('x*y');
22+
23+
return params;
24+
}
25+
26+
/**
27+
* meta 配置
28+
* @param params
29+
*/
30+
function meta(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
31+
const { chart, options } = params;
32+
const { meta } = options;
33+
34+
chart.scale(meta);
35+
36+
return params;
37+
}
38+
39+
/**
40+
* axis 配置
41+
* @param params
42+
*/
43+
function axis(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
44+
const { chart } = params;
45+
46+
chart.axis(false);
47+
48+
return params;
49+
}
50+
51+
/**
52+
* legend 配置
53+
* @param params
54+
*/
55+
function legend(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
56+
const { chart } = params;
57+
58+
chart.legend(false);
59+
60+
return params;
61+
}
62+
63+
/**
64+
* tooltip 配置
65+
* @param params
66+
*/
67+
function tooltip(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
68+
const { chart } = params;
69+
70+
chart.tooltip(false);
71+
72+
return params;
73+
}
74+
75+
/**
76+
* 样式
77+
* @param params
78+
*/
79+
function style(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
80+
const { chart, options } = params;
81+
const { lineStyle } = options;
82+
83+
const geometry = chart.geometries[0];
84+
if (lineStyle && geometry) {
85+
if (isFunction(lineStyle)) {
86+
geometry.style('x*y', lineStyle);
87+
} else {
88+
geometry.style(lineStyle);
89+
}
90+
}
91+
return params;
92+
}
93+
94+
/**
95+
* shape 的配置处理
96+
* @param params
97+
*/
98+
function shape(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
99+
const { chart, options } = params;
100+
const { smooth } = options;
101+
102+
const lineGeometry = chart.geometries.find((g: Geometry) => g.type === 'line');
103+
104+
lineGeometry.shape(smooth ? 'smooth' : 'line');
105+
return params;
106+
}
107+
108+
/**
109+
* 迷你折线图适配器
110+
* @param chart
111+
* @param options
112+
*/
113+
export function adaptor(params: Params<TinyLineOptions>) {
114+
// flow 的方式处理所有的配置到 G2 API
115+
flow(field, meta, axis, legend, tooltip, style, shape)(params);
116+
}

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Plot } from '../../core/plot';
2+
import { TinyLineOptions } from './types';
3+
import { adaptor } from './adaptor';
4+
import { Adaptor } from '../../core/adaptor';
5+
6+
export { TinyLineOptions };
7+
8+
export class TinyLine extends Plot<TinyLineOptions> {
9+
/** 图表类型 */
10+
public type: string = 'tiny-line';
11+
12+
/**
13+
* 获取 迷你折线图 的适配器
14+
*/
15+
protected getSchemaAdaptor(): Adaptor<TinyLineOptions> {
16+
return adaptor;
17+
}
18+
}

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Options } from '../../types';
2+
import { ShapeStyle } from '../../types/style';
3+
4+
export interface TinyLineOptions extends Options {
5+
/** 具体的数据 */
6+
data: any[];
7+
/** 是否平滑 */
8+
smooth?: boolean;
9+
/** 是否连接空数据 */
10+
connectNulls?: boolean;
11+
/** 折线extra图形样式 */
12+
lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
13+
}

0 commit comments

Comments
 (0)