fix: 调整 bar 默认的柱子顺序 (#1828)

* fix(bar): adjust bar data sequence * docs: update bar screenshot Co-authored-by: lingdao.lzq <lingdao.lzq@antfin.com>
antvis · Oct 30, 2020 · 5e13404 · 5e13404
1 parent a1c7d52
commit 5e13404
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 25 deletions.
diff --git a/__tests__/unit/adaptor/conversion-tag-spec.ts b/__tests__/unit/adaptor/conversion-tag-spec.ts
@@ -154,7 +154,6 @@ describe('bar conversion tag', () => {
     animation: false,
   };
   const plot = new Bar(container, options);
-  const DATA_REVERSED = DATA.slice().reverse();
 
   it('render', async () => {
     plot.render();
@@ -175,12 +174,10 @@ describe('bar conversion tag', () => {
     // 文本
     const texts = group.findAllByName('conversion-tag-text');
     expect(texts).toHaveLength(DATA.length - 1);
-    DATA_REVERSED.forEach((datum, idx) => {
+    DATA.forEach((datum, idx) => {
       if (idx > 0) {
         expect(texts[idx - 1].get('type')).toBe('text');
-        expect(texts[idx - 1].attr('text')).toBe(
-          ((DATA_REVERSED[idx].y / DATA_REVERSED[idx - 1].y) * 100).toFixed(2) + '%'
-        );
+        expect(texts[idx - 1].attr('text')).toBe(((DATA[idx].y / DATA[idx - 1].y) * 100).toFixed(2) + '%');
       }
     });
 
@@ -222,12 +219,10 @@ describe('bar conversion tag', () => {
     // 文本
     const texts = group.findAllByName('conversion-tag-text');
     expect(texts).toHaveLength(DATA.length - 1);
-    DATA_REVERSED.forEach((datum, idx) => {
+    DATA.forEach((datum, idx) => {
       if (idx > 0) {
         expect(texts[idx - 1].get('type')).toBe('text');
-        expect(texts[idx - 1].attr('text')).toBe(
-          ((DATA_REVERSED[idx].y / DATA_REVERSED[idx - 1].y) * 100).toFixed(2) + '%'
-        );
+        expect(texts[idx - 1].attr('text')).toBe(((DATA[idx].y / DATA[idx - 1].y) * 100).toFixed(2) + '%');
       }
     });
 
@@ -261,9 +256,8 @@ describe('bar conversion tag', () => {
 describe('zero data no NaN', () => {
   const container = createDiv();
 
-  const DATA_REVERSED = DATA_WITH_ZERO.slice().reverse();
   const plot = new Bar(container, {
-    data: DATA_REVERSED,
+    data: DATA_WITH_ZERO,
     autoFit: false,
     width: 600,
     height: 400,

diff --git a/__tests__/unit/plots/bar/label-spec.ts b/__tests__/unit/plots/bar/label-spec.ts
@@ -32,7 +32,9 @@ describe('bar label', () => {
     });
     expect(labelGroups).toHaveLength(salesByArea.length);
     labelGroups.forEach((label, index) => {
-      expect(label.get('children')[0].attr('text')).toBe(`${Math.floor(salesByArea[index].sales / 10000)}万`);
+      expect(label.get('children')[0].attr('text')).toBe(
+        `${Math.floor(salesByArea[salesByArea.length - index - 1].sales / 10000)}万`
+      );
     });
   });
 

diff --git a/__tests__/unit/plots/column/percent-spec.ts b/__tests__/unit/plots/column/percent-spec.ts
@@ -1,5 +1,6 @@
 import { Column } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 const data = [
   { country: 'Europe', year: '1750', value: 163 },
   { country: 'Europe', year: '1800', value: 203 },
@@ -20,7 +21,7 @@ const data = [
 ];
 
 describe('column percent', () => {
-  it('percent: render', () => {
+  it('percent: render', async () => {
     const column = new Column(createDiv('percent'), {
       width: 400,
       height: 300,
@@ -43,6 +44,7 @@ describe('column percent', () => {
     });
 
     column.render();
+    await delay(300);
     const geometry = column.chart.geometries[0];
     const labelGroups = geometry.labelsContainer.getChildren();
     const elements = geometry.elements;
@@ -60,7 +62,7 @@ describe('column percent', () => {
     expect(cfg.position).toBe('middle');
     expect(cfg.content).not.toBeUndefined();
   });
-  it('percent: custom content', () => {
+  it('percent: custom content', async () => {
     const column = new Column(createDiv('percent'), {
       width: 400,
       height: 300,
@@ -87,6 +89,7 @@ describe('column percent', () => {
     });
 
     column.render();
+    await delay(300);
     const geometry = column.chart.geometries[0];
     const elements = geometry.elements;
     const bbox = elements[elements.length - 1].getBBox();

diff --git a/docs/common/slider.en.md b/docs/common/slider.en.md
@@ -1,4 +1,4 @@
-object 类型的请参考[绘图属性](../../docs/manual/graphic-style)
+object 类型的请参考[绘图属性](../../manual/graphic-style)
 
 | 配置项          | 类型     | 功能描述           |
 | --------------- | -------- | ------------------ |

diff --git a/docs/common/slider.zh.md b/docs/common/slider.zh.md
@@ -1,4 +1,4 @@
-object 类型的请参考[绘图属性](../../docs/manual/graphic-style)
+object 类型的请参考[绘图属性](../../manual/graphic-style)
 
 | 配置项          | 类型     | 功能描述           |
 | --------------- | -------- | ------------------ |

diff --git a/examples/bar/basic/demo/meta.json b/examples/bar/basic/demo/meta.json
@@ -10,31 +10,39 @@
         "zh": "基础条形图",
         "en": "Basic Bar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cnRsQo-Yqg0AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "color.ts",
       "title": {
         "zh": "基础条形图 - 自定义颜色",
         "en": "Bar chart color"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZQIiR6SyS9oAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U-D1S4w5HNsAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "width.ts",
       "title": {
         "zh": "基础条形图 - 柱子宽度",
         "en": "Bar chart Bar width"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*7rbzT5Fx5H8AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uqtcQJ-N-qUAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "scrollbar.ts",
+      "title": {
+        "zh": "基础条形图 - 滚动条",
+        "en": "Bar chart with scrollbar"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*01-mRqASP78AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "conversion-tag.ts",
       "title": {
         "zh": "基础条形图 - 转化率",
         "en": "Bar chart conversion tag"
       },
-      "screenshot": "https://gw.alicdn.com/tfs/TB107ZbvKT2gK0jSZFvXXXnFXXa-1344-828.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*-9CLRItZrPMAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/bar/basic/demo/scrollbar.ts b/examples/bar/basic/demo/scrollbar.ts
@@ -0,0 +1,21 @@
+import { Bar } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/be63e0a2-d2be-4c45-97fd-c00f752a66d4.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const column = new Bar('container', {
+      data,
+      yField: '城市',
+      xField: '销售额',
+      yAxis: {
+        label: {
+          autoRotate: false,
+        },
+      },
+      scrollbar: {
+        type: 'vertical',
+      },
+    });
+
+    column.render();
+  });
diff --git a/examples/bar/grouped/demo/meta.json b/examples/bar/grouped/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "分组条形图",
         "en": "Grouped Bar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*s-oXTqRDBegAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Yda9RZwgU1AAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/bar/percent/demo/meta.json b/examples/bar/percent/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "百分百条形图",
         "en": "Percent Bar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*E7YZS5gGHJsAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*l8JuSrkrOIkAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/bar/range/demo/meta.json b/examples/bar/range/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "区间条形图",
         "en": "Range Bar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tCDCQaO1ZZsAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*1is6RbXnUI4AAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/bar/stacked/demo/meta.json b/examples/bar/stacked/demo/meta.json
@@ -10,7 +10,7 @@
         "zh": "堆叠条形图",
         "en": "StackedBar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*N8smQYy45fAAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*BHyQS6T_qucAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts
@@ -1,3 +1,4 @@
+import {} from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { adaptor as columnAdaptor } from '../column/adaptor';
 import { BarOptions } from './types';
@@ -8,7 +9,7 @@ import { BarOptions } from './types';
  */
 export function adaptor(params: Params<BarOptions>) {
   const { chart, options } = params;
-  const { xField, yField, xAxis, yAxis, barStyle, barWidthRatio, label } = options;
+  const { xField, yField, xAxis, yAxis, barStyle, barWidthRatio, label, data } = options;
 
   // label of bar charts default position is left, if plot has label
   if (label && !label.position) {
@@ -32,6 +33,8 @@ export function adaptor(params: Params<BarOptions>) {
         // rename attrs as column
         columnStyle: barStyle,
         columnWidthRatio: barWidthRatio,
+        // bar 调整数据顺序
+        data: data ? data.slice().reverse() : data,
       },
     },
     true