Skip to content

Commit cbd087a

Browse files
visikyvisiky
authored
feat: interval geometry 支持配置图形背景，支持图表: 柱、条形图，玉珏图 (#2190)
* feat(interval): interval 支持几何图形 background 设置，作用于 column、bar、radial-bar 1、column 新增配置项 columnBackground 2、bar 新增配置项 barBackground 3、radial-bar 新增配置项 barBackground、minBarWidth、maxBarWidth * docs(radial-bar): 默认关闭玉珏图动画，优化玉珏图 demo * docs: 增加柱、条形图的文档 api - [x] 抽取 bar-style、column-style 文档（含 minwidth、maxwidth、background 配置） - [x] 柱形图、条形图、玉珏图 关于图形样式 文档更新，支持 minwidth、maxwidth、background * fix: 修复 lint 问题 * test: 添加 interval geometry 背景设置的单测 * fix: 注明柱子背景在玉珏图为 line 类型时，不生效
1 parent 159f80c commit cbd087a

26 files changed

+576
-142
lines changed

‎__tests__/unit/adaptor/geometries/interval-spec.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { interval, P, Params } from '../../../../src';
2+
import { IntervalGeometryOptions } from '../../../../src/adaptor/geometries';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('adaptor - interval', () => {
6+
function adaptor(params: Params<IntervalGeometryOptions>): Params<IntervalGeometryOptions> {
7+
const { chart, options } = params;
8+
const { data } = options;
9+
10+
chart.data(data);
11+
12+
// 直接使用 geometry 进行测试
13+
interval({
14+
chart,
15+
options: {
16+
...options,
17+
interval: {},
18+
args: { columnBackground: options.columnBackground },
19+
},
20+
});
21+
return params;
22+
}
23+
24+
function getPlot() {
25+
const plot = new P(
26+
createDiv(),
27+
{
28+
width: 400,
29+
height: 300,
30+
data: [
31+
{ type: '1', value: 10 },
32+
{ type: '2', value: 12 },
33+
],
34+
appendPadding: 10,
35+
xField: 'type',
36+
yField: 'value',
37+
mapping: {},
38+
},
39+
adaptor
40+
);
41+
42+
plot.render();
43+
return plot;
44+
}
45+
46+
it('columnBackground', () => {
47+
const plot = getPlot();
48+
expect(plot.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
49+
50+
plot.update({
51+
columnBackground: { style: { fill: 'red' } },
52+
});
53+
expect(plot.options.columnBackground).toBeDefined();
54+
// @ts-ignore
55+
const shapes = plot.chart.geometries[0].elements[0].shape.getChildren();
56+
expect(shapes.length).toBe(2);
57+
expect(shapes[0].attr('fill')).toBe('red');
58+
59+
plot.update({ columnBackground: null });
60+
expect(plot.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
61+
});
62+
});

‎__tests__/unit/plots/bar/index-spec.ts

+22-13
Original file line numberDiff line numberDiff line change
@@ -366,39 +366,48 @@ describe('bar', () => {
366366
expect(theme.columnWidthRatio).toBe(0.1);
367367
});
368368

369-
it('legend/tooltip reversed, grouped', () => {
369+
function getBar(isGroup: boolean, isStack: boolean) {
370370
const bar = new Bar(createDiv('group'), {
371371
width: 300,
372372
height: 400,
373373
data: subSalesByArea,
374374
yField: 'area',
375375
xField: 'sales',
376376
seriesField: 'series',
377-
isGroup: true,
377+
isGroup,
378+
isStack,
378379
});
379380
bar.render();
381+
return bar;
382+
}
380383

384+
it('legend/tooltip reversed, grouped', () => {
385+
const bar = getBar(true, false);
381386
// @ts-ignore
382387
expect(bar.chart.getOptions().legends['series'].reversed).toBe(true);
383388
// @ts-ignore
384389
expect(bar.chart.getOptions().tooltip.reversed).toBe(true);
385390
});
386391

387392
it('legend/tooltip reversed, stacked', () => {
388-
const bar = new Bar(createDiv('group'), {
389-
width: 300,
390-
height: 400,
391-
data: subSalesByArea,
392-
yField: 'area',
393-
xField: 'sales',
394-
seriesField: 'series',
395-
isStack: true,
396-
});
397-
bar.render();
398-
393+
const bar = getBar(false, true);
399394
// @ts-ignore
400395
expect(bar.chart.getOptions().legends['series'].reversed).toBe(false);
401396
// @ts-ignore
402397
expect(bar.chart.getOptions().tooltip?.reversed).toBe(false);
403398
});
399+
400+
it('bar background', () => {
401+
const bar = getBar(false, false);
402+
expect(bar.options.barBackground).not.toBeDefined();
403+
expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
404+
405+
bar.update({ barBackground: { style: { fill: 'red' } } });
406+
expect(bar.options.barBackground).toBeDefined();
407+
expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
408+
//@ts-ignore
409+
expect(bar.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
410+
411+
bar.destroy();
412+
});
404413
});

‎__tests__/unit/plots/column/index-spec.ts

+23
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,29 @@ describe('column', () => {
321321
column.destroy();
322322
});
323323

324+
it('column background', () => {
325+
const column = new Column(createDiv('with background'), {
326+
width: 300,
327+
height: 400,
328+
data: subSalesByArea,
329+
xField: 'sales',
330+
yField: 'area',
331+
});
332+
333+
column.render();
334+
335+
expect(column.options.columnBackground).not.toBeDefined();
336+
expect(column.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
337+
338+
column.update({ columnBackground: { style: { fill: 'red' } } });
339+
expect(column.options.columnBackground).toBeDefined();
340+
expect(column.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
341+
//@ts-ignore
342+
expect(column.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
343+
344+
column.destroy();
345+
});
346+
324347
it('theme', () => {
325348
const column = new Column(createDiv('theme'), {
326349
width: 300,

‎__tests__/unit/plots/radial-bar/index-spec.ts

+26
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,30 @@ describe('radial-bar', () => {
103103
line.elements.forEach((ele, idx) => expect(ele.shape.attr('color')).toBe(point.elements[idx].shape.attr('color')));
104104
bar.destroy();
105105
});
106+
107+
it('bar background and does not work when type="line"', () => {
108+
const bar = new RadialBar(createDiv(), {
109+
width: 400,
110+
height: 300,
111+
data: antvStar,
112+
xField,
113+
yField,
114+
color: (datum) => (datum[yField] < 800 ? 'red' : 'green'),
115+
});
116+
bar.render();
117+
expect(bar.options.barBackground).not.toBeDefined();
118+
expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
119+
120+
bar.update({ barBackground: { style: { fill: 'red' } } });
121+
expect(bar.options.barBackground).toBeDefined();
122+
expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
123+
//@ts-ignore
124+
expect(bar.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
125+
126+
bar.update({ type: 'line' });
127+
expect(bar.options.barBackground).toBeDefined();
128+
expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
129+
130+
bar.destroy();
131+
});
106132
});

‎docs/api/plots/bar.en.md

+4-22
Original file line numberDiff line numberDiff line change
@@ -57,40 +57,22 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true
5757

5858
### Graphic Style
5959

60-
#### barWidthRatio
61-
62-
<description>**optional** _number_</description>
63-
64-
The ratio of bar width( Range:[0-1] ).
65-
66-
#### minBarWidth
67-
68-
<description>**optional** _number_</description>
60+
`markdown:docs/common/color.zh.md`
6961

70-
The min width of bar, pixel value。
62+
`markdown:docs/common/bar-style.en.md`
7163

72-
#### maxBarWidth
64+
#### barWidthRatio
7365

7466
<description>**optional** _number_</description>
7567

76-
The max width of bar, pixel value。
68+
The ratio of bar width( Range:[0-1] ).
7769

7870
#### marginRatio
7971

8072
<description>**optional** _number_</description>
8173

8274
The ratio of spacing between columns in groups( Range:[0-1] ), only for Grouped Bar.
8375

84-
#### barStyle
85-
86-
<description>**optional** _StyleAttr | Function_</description>
87-
88-
Bar graphic Style.
89-
90-
`markdown:docs/common/shape-style.en.md`
91-
92-
`markdown:docs/common/color.en.md`
93-
9476
### Plot Components
9577

9678
`markdown:docs/common/component.en.md`

‎docs/api/plots/bar.zh.md

+4-21
Original file line numberDiff line numberDiff line change
@@ -57,39 +57,22 @@ order: 3
5757

5858
### 图形样式
5959

60-
#### barWidthRatio
61-
62-
<description>**optional** _number_</description>
60+
`markdown:docs/common/color.zh.md`
6361

64-
条形图宽度占比 [0-1]。
62+
`markdown:docs/common/bar-style.en.md`
6563

66-
#### minBarWidth
64+
#### barWidthRatio
6765

6866
<description>**optional** _number_</description>
6967

70-
条形图最小宽度设置，像素值。
71-
72-
#### maxBarWidth
73-
74-
<description>**optional** _number_</description>
68+
条形图宽度占比 [0-1]。
7569

76-
条形图最大宽度设置，像素值。
7770
#### marginRatio
7871

7972
<description>**optional** _number_</description>
8073

8174
分组中柱子之间的间距 [0-1]，仅对分组条形图适用。
8275

83-
#### barStyle
84-
85-
<description>**optional** _StyleAttr | Function_</description>
86-
87-
柱子样式配置。
88-
89-
`markdown:docs/common/shape-style.zh.md`
90-
91-
`markdown:docs/common/color.zh.md`
92-
9376
### 图表组件
9477

9578
`markdown:docs/common/component.zh.md`

‎docs/api/plots/column.en.md

+4-22
Original file line numberDiff line numberDiff line change
@@ -57,40 +57,22 @@ order: 2
5757

5858
### Geometry Style
5959

60-
#### columnWidthRatio
61-
62-
<description>**optional** _number_</description>
63-
64-
柱状图宽度占比 [0-1]。
65-
66-
#### minColumnWidth
67-
68-
<description>**optional** _number_</description>
60+
`markdown:docs/common/color.en.md`
6961

70-
The min width of column, pixel value。
62+
`markdown:docs/common/column-style.en.md`
7163

72-
#### maxColumnWidth
64+
#### columnWidthRatio
7365

7466
<description>**optional** _number_</description>
7567

76-
The max width of column, pixel value。
68+
柱状图宽度占比 [0-1]。
7769

7870
#### marginRatio
7971

8072
<description>**optional** _number_</description>
8173

8274
分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
8375

84-
#### columnStyle
85-
86-
<description>**optional** _StyleAttr | Function_</description>
87-
88-
柱子样式配置。
89-
90-
`markdown:docs/common/shape-style.en.md`
91-
92-
`markdown:docs/common/color.en.md`
93-
9476
### Plot Components
9577

9678
`markdown:docs/common/component.en.md`

‎docs/api/plots/column.zh.md

+4-22
Original file line numberDiff line numberDiff line change
@@ -59,40 +59,22 @@ order: 2
5959

6060
### 图形样式
6161

62-
#### columnWidthRatio
63-
64-
<description>**optional** _number_</description>
65-
66-
柱状图宽度占比 [0-1]。
67-
68-
#### minColumnWidth
69-
70-
<description>**optional** _number_</description>
62+
`markdown:docs/common/color.zh.md`
7163

72-
柱状图最小宽度设置，像素值。
64+
`markdown:docs/common/column-style.zh.md`
7365

74-
#### maxColumnWidth
66+
#### columnWidthRatio
7567

7668
<description>**optional** _number_</description>
7769

78-
柱状图最大宽度设置，像素值。
70+
柱状图宽度占比 [0-1]。
7971

8072
#### marginRatio
8173

8274
<description>**optional** _number_</description>
8375

8476
分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
8577

86-
#### columnStyle
87-
88-
<description>**optional** _StyleAttr | Function_</description>
89-
90-
柱子样式配置。
91-
92-
`markdown:docs/common/shape-style.zh.md`
93-
94-
`markdown:docs/common/color.zh.md`
95-
9678
### 图表组件
9779

9880
`markdown:docs/common/component.zh.md`

0 commit comments

Comments
 (0)