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 类型时，不生效
antvis · Jan 8, 2021 · cbd087a · cbd087a
1 parent 159f80c
commit cbd087a
Show file tree

Hide file tree

Showing 26 changed files with 576 additions and 142 deletions.
diff --git a/__tests__/unit/adaptor/geometries/interval-spec.ts b/__tests__/unit/adaptor/geometries/interval-spec.ts
@@ -0,0 +1,62 @@
+import { interval, P, Params } from '../../../../src';
+import { IntervalGeometryOptions } from '../../../../src/adaptor/geometries';
+import { createDiv } from '../../../utils/dom';
+
+describe('adaptor - interval', () => {
+  function adaptor(params: Params<IntervalGeometryOptions>): Params<IntervalGeometryOptions> {
+    const { chart, options } = params;
+    const { data } = options;
+
+    chart.data(data);
+
+    // 直接使用 geometry 进行测试
+    interval({
+      chart,
+      options: {
+        ...options,
+        interval: {},
+        args: { columnBackground: options.columnBackground },
+      },
+    });
+    return params;
+  }
+
+  function getPlot() {
+    const plot = new P(
+      createDiv(),
+      {
+        width: 400,
+        height: 300,
+        data: [
+          { type: '1', value: 10 },
+          { type: '2', value: 12 },
+        ],
+        appendPadding: 10,
+        xField: 'type',
+        yField: 'value',
+        mapping: {},
+      },
+      adaptor
+    );
+
+    plot.render();
+    return plot;
+  }
+
+  it('columnBackground', () => {
+    const plot = getPlot();
+    expect(plot.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+
+    plot.update({
+      columnBackground: { style: { fill: 'red' } },
+    });
+    expect(plot.options.columnBackground).toBeDefined();
+    // @ts-ignore
+    const shapes = plot.chart.geometries[0].elements[0].shape.getChildren();
+    expect(shapes.length).toBe(2);
+    expect(shapes[0].attr('fill')).toBe('red');
+
+    plot.update({ columnBackground: null });
+    expect(plot.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+  });
+});
diff --git a/__tests__/unit/plots/bar/index-spec.ts b/__tests__/unit/plots/bar/index-spec.ts
@@ -366,39 +366,48 @@ describe('bar', () => {
     expect(theme.columnWidthRatio).toBe(0.1);
   });
 
-  it('legend/tooltip reversed, grouped', () => {
+  function getBar(isGroup: boolean, isStack: boolean) {
     const bar = new Bar(createDiv('group'), {
       width: 300,
       height: 400,
       data: subSalesByArea,
       yField: 'area',
       xField: 'sales',
       seriesField: 'series',
-      isGroup: true,
+      isGroup,
+      isStack,
     });
     bar.render();
+    return bar;
+  }
 
+  it('legend/tooltip reversed, grouped', () => {
+    const bar = getBar(true, false);
     // @ts-ignore
     expect(bar.chart.getOptions().legends['series'].reversed).toBe(true);
     // @ts-ignore
     expect(bar.chart.getOptions().tooltip.reversed).toBe(true);
   });
 
   it('legend/tooltip reversed, stacked', () => {
-    const bar = new Bar(createDiv('group'), {
-      width: 300,
-      height: 400,
-      data: subSalesByArea,
-      yField: 'area',
-      xField: 'sales',
-      seriesField: 'series',
-      isStack: true,
-    });
-    bar.render();
-
+    const bar = getBar(false, true);
     // @ts-ignore
     expect(bar.chart.getOptions().legends['series'].reversed).toBe(false);
     // @ts-ignore
     expect(bar.chart.getOptions().tooltip?.reversed).toBe(false);
   });
+
+  it('bar background', () => {
+    const bar = getBar(false, false);
+    expect(bar.options.barBackground).not.toBeDefined();
+    expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+
+    bar.update({ barBackground: { style: { fill: 'red' } } });
+    expect(bar.options.barBackground).toBeDefined();
+    expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
+    //@ts-ignore
+    expect(bar.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
+
+    bar.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/column/index-spec.ts b/__tests__/unit/plots/column/index-spec.ts
@@ -321,6 +321,29 @@ describe('column', () => {
     column.destroy();
   });
 
+  it('column background', () => {
+    const column = new Column(createDiv('with background'), {
+      width: 300,
+      height: 400,
+      data: subSalesByArea,
+      xField: 'sales',
+      yField: 'area',
+    });
+
+    column.render();
+
+    expect(column.options.columnBackground).not.toBeDefined();
+    expect(column.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+
+    column.update({ columnBackground: { style: { fill: 'red' } } });
+    expect(column.options.columnBackground).toBeDefined();
+    expect(column.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
+    //@ts-ignore
+    expect(column.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
+
+    column.destroy();
+  });
+
   it('theme', () => {
     const column = new Column(createDiv('theme'), {
       width: 300,

diff --git a/__tests__/unit/plots/radial-bar/index-spec.ts b/__tests__/unit/plots/radial-bar/index-spec.ts
@@ -103,4 +103,30 @@ describe('radial-bar', () => {
     line.elements.forEach((ele, idx) => expect(ele.shape.attr('color')).toBe(point.elements[idx].shape.attr('color')));
     bar.destroy();
   });
+
+  it('bar background and does not work when type="line"', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      color: (datum) => (datum[yField] < 800 ? 'red' : 'green'),
+    });
+    bar.render();
+    expect(bar.options.barBackground).not.toBeDefined();
+    expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+
+    bar.update({ barBackground: { style: { fill: 'red' } } });
+    expect(bar.options.barBackground).toBeDefined();
+    expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(true);
+    //@ts-ignore
+    expect(bar.chart.geometries[0].elements[0].shape.getChildren()[0].attr('fill')).toBe('red');
+
+    bar.update({ type: 'line' });
+    expect(bar.options.barBackground).toBeDefined();
+    expect(bar.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
+
+    bar.destroy();
+  });
 });
diff --git a/docs/api/plots/bar.en.md b/docs/api/plots/bar.en.md
@@ -57,40 +57,22 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true
 
 ### Graphic Style
 
-#### barWidthRatio
-
-<description>**optional** _number_</description>
-
-The ratio of bar width( Range:[0-1] ).
-
-#### minBarWidth
-
-<description>**optional** _number_</description>
+`markdown:docs/common/color.zh.md`
 
-The min width of bar, pixel value。
+`markdown:docs/common/bar-style.en.md`
 
-#### maxBarWidth
+#### barWidthRatio
 
 <description>**optional** _number_</description>
 
-The max width of bar, pixel value。
+The ratio of bar width( Range:[0-1] ).
 
 #### marginRatio
 
 <description>**optional** _number_</description>
 
 The ratio of spacing between columns in groups( Range:[0-1] ), only for Grouped Bar.
 
-#### barStyle
-
-<description>**optional** _StyleAttr | Function_</description>
-
-Bar graphic Style.
-
-`markdown:docs/common/shape-style.en.md`
-
-`markdown:docs/common/color.en.md`
-
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/bar.zh.md b/docs/api/plots/bar.zh.md
@@ -57,39 +57,22 @@ order: 3
 
 ### 图形样式
 
-#### barWidthRatio
-
-<description>**optional** _number_</description>
+`markdown:docs/common/color.zh.md`
 
-条形图宽度占比 [0-1]。
+`markdown:docs/common/bar-style.en.md`
 
-#### minBarWidth
+#### barWidthRatio
 
 <description>**optional** _number_</description>
 
-条形图最小宽度设置，像素值。
-
-#### maxBarWidth
-
-<description>**optional** _number_</description>
+条形图宽度占比 [0-1]。
 
-条形图最大宽度设置，像素值。
 #### marginRatio
 
 <description>**optional** _number_</description>
 
 分组中柱子之间的间距 [0-1]，仅对分组条形图适用。
 
-#### barStyle
-
-<description>**optional** _StyleAttr | Function_</description>
-
-柱子样式配置。
-
-`markdown:docs/common/shape-style.zh.md`
-
-`markdown:docs/common/color.zh.md`
-
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`

diff --git a/docs/api/plots/column.en.md b/docs/api/plots/column.en.md
@@ -57,40 +57,22 @@ order: 2
 
 ### Geometry Style
 
-#### columnWidthRatio
-
-<description>**optional** _number_</description>
-
-柱状图宽度占比 [0-1]。
-
-#### minColumnWidth
-
-<description>**optional** _number_</description>
+`markdown:docs/common/color.en.md`
 
-The min width of column, pixel value。
+`markdown:docs/common/column-style.en.md`
 
-#### maxColumnWidth
+#### columnWidthRatio
 
 <description>**optional** _number_</description>
 
-The max width of column, pixel value。
+柱状图宽度占比 [0-1]。
 
 #### marginRatio
 
 <description>**optional** _number_</description>
 
 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
 
-#### columnStyle
-
-<description>**optional** _StyleAttr | Function_</description>
-
-柱子样式配置。
-
-`markdown:docs/common/shape-style.en.md`
-
-`markdown:docs/common/color.en.md`
-
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/column.zh.md b/docs/api/plots/column.zh.md
@@ -59,40 +59,22 @@ order: 2
 
 ### 图形样式
 
-#### columnWidthRatio
-
-<description>**optional** _number_</description>
-
-柱状图宽度占比 [0-1]。
-
-#### minColumnWidth
-
-<description>**optional** _number_</description>
+`markdown:docs/common/color.zh.md`
 
-柱状图最小宽度设置，像素值。
+`markdown:docs/common/column-style.zh.md`
 
-#### maxColumnWidth
+#### columnWidthRatio
 
 <description>**optional** _number_</description>
 
-柱状图最大宽度设置，像素值。
+柱状图宽度占比 [0-1]。
 
 #### marginRatio
 
 <description>**optional** _number_</description>
 
 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
 
-#### columnStyle
-
-<description>**optional** _StyleAttr | Function_</description>
-
-柱子样式配置。
-
-`markdown:docs/common/shape-style.zh.md`
-
-`markdown:docs/common/color.zh.md`
-
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`