From 5e13404233882da6a6848b710f7194f457801ccc Mon Sep 17 00:00:00 2001 From: zqlu Date: Fri, 30 Oct 2020 18:13:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=20bar=20=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E7=9A=84=E6=9F=B1=E5=AD=90=E9=A1=BA=E5=BA=8F=20(#1828?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(bar): adjust bar data sequence * docs: update bar screenshot Co-authored-by: lingdao.lzq --- __tests__/unit/adaptor/conversion-tag-spec.ts | 16 +++++--------- __tests__/unit/plots/bar/label-spec.ts | 4 +++- __tests__/unit/plots/column/percent-spec.ts | 7 +++++-- docs/common/slider.en.md | 2 +- docs/common/slider.zh.md | 2 +- examples/bar/basic/demo/meta.json | 16 ++++++++++---- examples/bar/basic/demo/scrollbar.ts | 21 +++++++++++++++++++ examples/bar/grouped/demo/meta.json | 2 +- examples/bar/percent/demo/meta.json | 2 +- examples/bar/range/demo/meta.json | 2 +- examples/bar/stacked/demo/meta.json | 2 +- src/plots/bar/adaptor.ts | 5 ++++- 12 files changed, 56 insertions(+), 25 deletions(-) create mode 100644 examples/bar/basic/demo/scrollbar.ts diff --git a/__tests__/unit/adaptor/conversion-tag-spec.ts b/__tests__/unit/adaptor/conversion-tag-spec.ts index 9c57b132cf..9ae62ab44d 100644 --- 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 index bd935e08ac..ec4198c50a 100644 --- 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 index b4caaa49c7..980f502cde 100644 --- 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 index d9eeffc12f..b7e7f399ab 100644 --- 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 index d9eeffc12f..b7e7f399ab 100644 --- 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 index f79c02acd0..f3e9f09c11 100644 --- a/examples/bar/basic/demo/meta.json +++ b/examples/bar/basic/demo/meta.json @@ -10,7 +10,7 @@ "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", @@ -18,7 +18,7 @@ "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", @@ -26,7 +26,15 @@ "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", @@ -34,7 +42,7 @@ "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 new file mode 100644 index 0000000000..db683c8030 --- /dev/null +++ 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 index fef7091895..275806e2c2 100644 --- 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 index 0c3471d88a..2118959c61 100644 --- 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 index 4c3e5df8e4..7a1fbfeb43 100644 --- 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 index cd91d3ae94..18f0df647c 100644 --- 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 index 278a04ebe8..e9dc25b903 100644 --- 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) { 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) { // rename attrs as column columnStyle: barStyle, columnWidthRatio: barWidthRatio, + // bar 调整数据顺序 + data: data ? data.slice().reverse() : data, }, }, true