From be7caa9ab6713974b33fcec5996a509dd099cdfa Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Thu, 9 Dec 2021 16:45:50 +0800 Subject: [PATCH] =?UTF-8?q?fix(issue-3012):=20=E4=BF=AE=E5=A4=8D=E6=9D=A1?= =?UTF-8?q?=E5=BD=A2=E5=9B=BE=E5=9B=BE=E4=BE=8B=E8=BD=AC=E7=BD=AE=20&=20?= =?UTF-8?q?=E5=8D=95=E6=B5=8B=20(#3013)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(issue-3012): 修复条形图图例转置 & 单测 * fix(bar): 修复条形图单测问题 --- __tests__/bugs/issue-3012-spec.ts | 146 ++++++++++++++++++++++++ __tests__/unit/plots/bar/index-spec.ts | 18 --- __tests__/unit/plots/bar/legend-spec.ts | 3 +- src/plots/bar/adaptor.ts | 25 +--- 4 files changed, 148 insertions(+), 44 deletions(-) create mode 100644 __tests__/bugs/issue-3012-spec.ts diff --git a/__tests__/bugs/issue-3012-spec.ts b/__tests__/bugs/issue-3012-spec.ts new file mode 100644 index 0000000000..b548243c20 --- /dev/null +++ b/__tests__/bugs/issue-3012-spec.ts @@ -0,0 +1,146 @@ +import { Bar } from '../../src'; +import { createDiv } from '../utils/dom'; +import { delay } from '../utils/delay'; + +describe('#3012', () => { + it('basic bar', async () => { + const data = [ + { year: '1951 年', value: 38 }, + { year: '1952 年', value: 52 }, + { year: '1956 年', value: 61 }, + { year: '1957 年', value: 145 }, + { year: '1958 年', value: 48 }, + ]; + + const bar = new Bar(createDiv(), { + data, + xField: 'value', + yField: 'year', + seriesField: 'year', + legend: { + position: 'top-left', + }, + }); + + bar.render(); + const legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items'); + expect(legendItems.length).toBe(data.length); + expect(legendItems[0].name).toBe(data[0].year); + + const tooltipController = bar.chart.getController('tooltip'); + const box = bar.chart.geometries[0].elements[0].shape.getBBox(); + const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 }; + + await delay(80); + bar.chart.showTooltip(point); + await delay(100); + + const items = tooltipController.getTooltipItems(point); + expect(items[0].name).toBe(data[0].year); + + bar.destroy(); + }); + + it('group bar & stack bar', async () => { + 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 bar = new Bar(createDiv(), { + data, + isGroup: true, + xField: 'value', + yField: 'label', + seriesField: 'type', + legend: { + position: 'top-left', + }, + }); + + bar.render(); + let legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items'); + expect(legendItems.length).toBe(2); + expect(legendItems[0].name).toBe('series1'); + expect(legendItems[1].name).toBe('series2'); + + const tooltipController = bar.chart.getController('tooltip'); + let box = bar.chart.geometries[0].elements[0].shape.getBBox(); + let point = { x: box.x + box.width / 2, y: box.y + box.height / 2 }; + + await delay(80); + bar.chart.showTooltip(point); + await delay(100); + + let items = tooltipController.getTooltipItems(point); + expect(items[0].name).toBe('series1'); + expect(items[1].name).toBe('series2'); + + bar.update({ isGroup: false, isStack: true }); + legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items'); + expect(legendItems.length).toBe(2); + expect(legendItems[0].name).toBe('series1'); + expect(legendItems[1].name).toBe('series2'); + + box = bar.chart.geometries[0].elements[0].shape.getBBox(); + point = { x: box.x + box.width / 2, y: box.y + box.height / 2 }; + + await delay(80); + bar.chart.showTooltip(point); + await delay(100); + + items = tooltipController.getTooltipItems(point); + expect(items[0].name).toBe('series1'); + expect(items[1].name).toBe('series2'); + + bar.destroy(); + }); +}); diff --git a/__tests__/unit/plots/bar/index-spec.ts b/__tests__/unit/plots/bar/index-spec.ts index 56fe4666b6..7c314b7d23 100644 --- a/__tests__/unit/plots/bar/index-spec.ts +++ b/__tests__/unit/plots/bar/index-spec.ts @@ -382,24 +382,6 @@ describe('bar', () => { 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); - bar.destroy(); - }); - - it('legend/tooltip reversed, stacked', () => { - 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); - bar.destroy(); - }); - it('bar background', () => { const bar = getBar(false, false); expect(bar.options.barBackground).not.toBeDefined(); diff --git a/__tests__/unit/plots/bar/legend-spec.ts b/__tests__/unit/plots/bar/legend-spec.ts index bb599878ee..e82636bf0b 100644 --- a/__tests__/unit/plots/bar/legend-spec.ts +++ b/__tests__/unit/plots/bar/legend-spec.ts @@ -32,7 +32,7 @@ describe('bar legend', () => { bar.render(); // @ts-ignore - expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top', reversed: true }); + expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top' }); expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1); bar.update({ @@ -46,7 +46,6 @@ describe('bar legend', () => { expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top', flipPage: true, - reversed: true, }); expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1); diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts index 6a03fcb8d4..b78c66bf4b 100644 --- a/src/plots/bar/adaptor.ts +++ b/src/plots/bar/adaptor.ts @@ -1,4 +1,5 @@ import { Params } from '../../core/adaptor'; +import { tooltip } from '../../adaptor/common'; import { deepAssign, flow } from '../../utils'; import { adaptor as columnAdaptor } from '../column/adaptor'; export { meta } from '../column/adaptor'; @@ -83,7 +84,6 @@ function legend(params: Params): Params { if (legend !== false) { legend = { position: isStack ? 'top-left' : 'right-top', - reversed: isStack ? false : true, ...(legend || {}), }; } @@ -94,29 +94,6 @@ function legend(params: Params): Params { return deepAssign({}, params, { options: { legend } }); } -/** - * tooltip 适配器 - * @param params - */ -function tooltip(params: Params): Params { - const { options } = params; - - // 默认 legend 位置 - const { seriesField, isStack } = options; - // 默认 tooltip 配置 - let { tooltip } = options; - if (seriesField) { - if (tooltip !== false) { - tooltip = { - reversed: isStack ? false : true, - ...(tooltip || {}), - }; - } - } - - return deepAssign({}, params, { options: { tooltip } }); -} - /** * coordinate 适配器 * @param params