feat: 柱条形图支持组间和组内padding的像素级设置 (#2539)

* feat: 柱条形图支持组间和组内padding的像素级设置 * fix: 修复 lint 问题
antvis · May 12, 2021 · 1c7d199 · 1c7d199
1 parent 7f4cd17
commit 1c7d199
Show file tree

Hide file tree

Showing 19 changed files with 363 additions and 66 deletions.
diff --git a/__tests__/bugs/issue-2021-spec.ts b/__tests__/bugs/issue-2021-spec.ts
@@ -2,28 +2,7 @@ import { TinyLine, TinyArea, TinyColumn } from '../../src';
 import { createDiv } from '../utils/dom';
 
 const DATA = [
-  264,
-  417,
-  438,
-  887,
-  309,
-  397,
-  550,
-  575,
-  563,
-  430,
-  525,
-  592,
-  492,
-  467,
-  513,
-  546,
-  983,
-  340,
-  539,
-  243,
-  226,
-  192,
+  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226, 192,
 ];
 
 describe('#2021', () => {

diff --git a/__tests__/unit/plots/bullet/change-data-spec.ts b/__tests__/unit/plots/bullet/change-data-spec.ts
@@ -30,7 +30,11 @@ describe('Bullet changeData', () => {
 
     const newData = [{ title: '数学', ranges: [0, 50, 100], measures: [120], target: 85 }];
     bullet.changeData(newData);
-    const { min: newMin, max: newMax, ds: newDs } = transformData({
+    const {
+      min: newMin,
+      max: newMax,
+      ds: newDs,
+    } = transformData({
       data: newData,
       measureField: 'measures',
       rangeField: 'ranges',
@@ -61,7 +65,11 @@ describe('Bullet changeData', () => {
     expect(bullet.chart.geometries[0].data).toEqual([]);
 
     bullet.changeData(bulletData);
-    const { min: newMin, max: newMax, ds: newDs } = transformData({
+    const {
+      min: newMin,
+      max: newMax,
+      ds: newDs,
+    } = transformData({
       data: bulletData,
       measureField: 'measures',
       rangeField: 'ranges',

diff --git a/__tests__/unit/plots/sankey/layout-spec.ts b/__tests__/unit/plots/sankey/layout-spec.ts
@@ -35,20 +35,14 @@ describe('sankeyLayout', () => {
     expect(data.nodes[0].name).toBe("Agricultural 'waste'");
     expect(data.nodes[0].x).toEqual([0, 0.008, 0.008, 0]);
     expect(data.nodes[0].y).toEqual([
-      0.15714829392583463,
-      0.15714829392583463,
-      0.17602864502202453,
-      0.17602864502202453,
+      0.15714829392583463, 0.15714829392583463, 0.17602864502202453, 0.17602864502202453,
     ]);
 
     expect(data.links[0].source.name).toBe("Agricultural 'waste'");
     expect(data.links[0].target.name).toBe('Bio-conversion');
     expect(data.links[0].x).toEqual([0.008, 0.008, 0.1417142857142857, 0.1417142857142857]);
     expect(data.links[0].y).toEqual([
-      0.17602864502202453,
-      0.15714829392583463,
-      0.23174113600532192,
-      0.21286078490913202,
+      0.17602864502202453, 0.15714829392583463, 0.23174113600532192, 0.21286078490913202,
     ]);
   });
 });
diff --git a/docs/common/bar-style.en.md b/docs/common/bar-style.en.md
@@ -1,3 +1,19 @@
+#### intervalPadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval, pixel value.  Used in GroupColumn plot.
+
+<playground path='bar/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval on the same group, pixel value. Used in GroupColumn plot.
+
+<playground path='bar/grouped/dodge-padding.ts' rid='rect2'></playground>
+
 #### minBarWidth
 
 <description>**optional**, _number_</description>

diff --git a/docs/common/bar-style.zh.md b/docs/common/bar-style.zh.md
@@ -1,3 +1,18 @@
+#### intervalPadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组间间距调整，像素级别。
+
+<playground path='bar/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组内柱子间距调整，像素级别。
+
+<playground path='bar/grouped/dodge-padding.ts' rid='rect2'></playground>
 
 #### minBarWidth
 

diff --git a/docs/common/column-style.en.md b/docs/common/column-style.en.md
@@ -1,3 +1,19 @@
+#### intervalPadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval, pixel value.  Used in GroupColumn plot.
+
+<playground path='column/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval on the same group, pixel value. Used in GroupColumn plot.
+
+<playground path='column/grouped/dodge-padding.ts' rid='rect2'></playground>
+
 #### minColumnWidth
 
 <description>**optional**, _number_</description>

diff --git a/docs/common/column-style.zh.md b/docs/common/column-style.zh.md
@@ -1,3 +1,18 @@
+#### intervalPadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组间间距调整，像素级别。
+
+<playground path='column/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组内柱子间距调整，像素级别。
+
+<playground path='column/grouped/dodge-padding.ts' rid='rect2'></playground>
 
 #### minColumnWidth
 

diff --git a/examples/bar/grouped/demo/dodge-padding.ts b/examples/bar/grouped/demo/dodge-padding.ts
@@ -0,0 +1,78 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    label: 'Mon.',
+    type: 'series1',
+    value: 2800,
+  },
+  {
+    label: 'Mon.',
+    type: 'series2',
+    value: 2260,
+  },
+  {
+    label: 'Tues.',
+    type: 'series1',
+    value: 1800,
+  },
+  {
+    label: 'Tues.',
+    type: 'series2',
+    value: 1300,
+  },
+  {
+    label: 'Wed.',
+    type: 'series1',
+    value: 950,
+  },
+  {
+    label: 'Wed.',
+    type: 'series2',
+    value: 900,
+  },
+  {
+    label: 'Thur.',
+    type: 'series1',
+    value: 500,
+  },
+  {
+    label: 'Thur.',
+    type: 'series2',
+    value: 390,
+  },
+  {
+    label: 'Fri.',
+    type: 'series1',
+    value: 170,
+  },
+  {
+    label: 'Fri.',
+    type: 'series2',
+    value: 100,
+  },
+];
+
+const stackedBarPlot = new Bar('container', {
+  data,
+  isGroup: true,
+  xField: 'value',
+  yField: 'label',
+  seriesField: 'type',
+  dodgePadding: 4,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'left', 'middle', 'right'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      { type: 'interval-adjust-position' },
+      // 数据标签防遮挡
+      { type: 'interval-hide-overlap' },
+      // 数据标签文颜色自动调整
+      { type: 'adjust-color' },
+    ],
+  },
+});
+
+stackedBarPlot.render();
diff --git a/examples/bar/grouped/demo/interval-padding.ts b/examples/bar/grouped/demo/interval-padding.ts
@@ -0,0 +1,79 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    label: 'Mon.',
+    type: 'series1',
+    value: 2800,
+  },
+  {
+    label: 'Mon.',
+    type: 'series2',
+    value: 2260,
+  },
+  {
+    label: 'Tues.',
+    type: 'series1',
+    value: 1800,
+  },
+  {
+    label: 'Tues.',
+    type: 'series2',
+    value: 1300,
+  },
+  {
+    label: 'Wed.',
+    type: 'series1',
+    value: 950,
+  },
+  {
+    label: 'Wed.',
+    type: 'series2',
+    value: 900,
+  },
+  {
+    label: 'Thur.',
+    type: 'series1',
+    value: 500,
+  },
+  {
+    label: 'Thur.',
+    type: 'series2',
+    value: 390,
+  },
+  {
+    label: 'Fri.',
+    type: 'series1',
+    value: 170,
+  },
+  {
+    label: 'Fri.',
+    type: 'series2',
+    value: 100,
+  },
+];
+
+const stackedBarPlot = new Bar('container', {
+  data,
+  isGroup: true,
+  xField: 'value',
+  yField: 'label',
+  seriesField: 'type',
+  dodgePadding: 4,
+  intervalPadding: 20,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'left', 'middle', 'right'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      { type: 'interval-adjust-position' },
+      // 数据标签防遮挡
+      { type: 'interval-hide-overlap' },
+      // 数据标签文颜色自动调整
+      { type: 'adjust-color' },
+    ],
+  },
+});
+
+stackedBarPlot.render();
diff --git a/examples/bar/grouped/demo/meta.json b/examples/bar/grouped/demo/meta.json
@@ -19,6 +19,22 @@
         "en": "Bar plot with corner-radius"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vFQNz1dCaD/21d77486-a9a3-4287-bc49-24fc40ad4800.png"
+    },
+    {
+      "filename": "dodge-padding.ts",
+      "title": {
+        "zh": "分组条形图像素级组内柱子间距",
+        "en": "DodgePadding of grouped bar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pb4RmT767Q/953ed207-ec9b-4d0b-8f19-dadd7e016610.png"
+    },
+    {
+      "filename": "interval-padding.ts",
+      "title": {
+        "zh": "分组条形图像素级组间间距",
+        "en": "IntervalPadding of grouped bar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24aj8gaJ%267H/8d4e1840-3aa0-44af-bae4-6f6aa4de47e0.png"
     }
   ]
 }
diff --git a/examples/column/grouped/demo/dodge-padding.ts b/examples/column/grouped/demo/dodge-padding.ts
@@ -0,0 +1,30 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new Column('container', {
+      data,
+      isGroup: true,
+      xField: '月份',
+      yField: '月均降雨量',
+      seriesField: 'name',
+      // 分组柱状图 组内柱子间的间距 (像素级别)
+      dodgePadding: 2,
+      label: {
+        // 可手动配置 label 数据标签位置
+        position: 'middle', // 'top', 'middle', 'bottom'
+        // 可配置附加的布局方法
+        layout: [
+          // 柱形图数据标签位置自动调整
+          { type: 'interval-adjust-position' },
+          // 数据标签防遮挡
+          { type: 'interval-hide-overlap' },
+          // 数据标签文颜色自动调整
+          { type: 'adjust-color' },
+        ],
+      },
+    });
+
+    plot.render();
+  });