diff --git a/__tests__/unit/plots/rose/change-data-spec.ts b/__tests__/unit/plots/rose/change-data-spec.ts new file mode 100644 index 0000000000..a989fa5447 --- /dev/null +++ b/__tests__/unit/plots/rose/change-data-spec.ts @@ -0,0 +1,129 @@ +import { salesByArea, subSalesByArea } from '../../../data/sales'; +import { Rose } from '../../../../src'; +import { createDiv } from '../../../utils/dom'; + +describe('rose-changeData', () => { + it('basic rose: change Data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: salesByArea, + xField: 'area', + yField: 'sales', + }); + + rosePlot.render(); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(salesByArea.length); + + const newData = salesByArea.slice(0, 3); + rosePlot.changeData(newData); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length); + expect(rosePlot.options.data).toEqual(newData); + + rosePlot.destroy(); + }); + + it('basic rose: from empty to have data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: [], + xField: 'area', + yField: 'sales', + }); + + rosePlot.render(); + + rosePlot.changeData(salesByArea); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(salesByArea.length); + expect(rosePlot.options.data).toEqual(salesByArea); + + rosePlot.destroy(); + }); + + it('group rose: change data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: subSalesByArea, + xField: 'area', + yField: 'sales', + isGroup: true, + seriesField: 'series', + }); + + rosePlot.render(); + + expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length); + + const newData = subSalesByArea.filter((item) => item.area !== '东北' || item.series !== '消费者'); + rosePlot.changeData(newData); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length); + expect(rosePlot.options.data).toEqual(newData); + + rosePlot.destroy(); + }); + + it('group rose: from empty to have data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: [], + xField: 'area', + yField: 'sales', + isGroup: true, + seriesField: 'series', + }); + + rosePlot.render(); + + rosePlot.changeData(subSalesByArea); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length); + expect(rosePlot.options.data).toEqual(subSalesByArea); + + rosePlot.destroy(); + }); + + it('stacked rose: change data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: subSalesByArea, + xField: 'area', + yField: 'sales', + isStack: true, + seriesField: 'series', + }); + + rosePlot.render(); + + expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length); + + const newData = subSalesByArea.filter((item) => item.area !== '东北' || item.series !== '消费者'); + rosePlot.changeData(newData); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length); + expect(rosePlot.options.data).toEqual(newData); + + rosePlot.destroy(); + }); + + it('stack rose: from empty to have data', () => { + const rosePlot = new Rose(createDiv(), { + width: 400, + height: 300, + data: [], + xField: 'area', + yField: 'sales', + isStack: true, + seriesField: 'series', + }); + + rosePlot.render(); + + rosePlot.changeData(subSalesByArea); + expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length); + expect(rosePlot.options.data).toEqual(subSalesByArea); + + rosePlot.destroy(); + }); +}); diff --git a/src/plots/rose/index.ts b/src/plots/rose/index.ts index e72f08ad31..7445d216b7 100644 --- a/src/plots/rose/index.ts +++ b/src/plots/rose/index.ts @@ -10,6 +10,15 @@ export class Rose extends Plot { /** 玫瑰图 */ public type: string = 'rose'; + /** + * @override + * @param data + */ + public changeData(data) { + this.updateOption({ data }); + this.chart.changeData(data); + } + /** * 获取默认的 options 配置项 */