feat: support useDeferredLabel to improve performance (#3190)

* feat: support useDeferredLabel to improve performance

* fix(tests): labels should collect after delay

__tests__/bugs/issue-2054-spec.ts

@@ -1,8 +1,9 @@
 import { Pie } from '../../src';
 import { createDiv } from '../utils/dom';
+import { delay } from '../utils/delay';
 
 describe('#2054', () => {
-  it('pie {percentage} label', () => {
+  it('pie {percentage} label', async () => {
     const pie = new Pie(createDiv(), {
       width: 400,
       height: 400,
@@ -22,7 +23,7 @@ describe('#2054', () => {
     });
 
     pie.render();
-
+    await delay(0);
     const labels = pie.chart.geometries[0].labelsContainer.getChildren();
     expect(labels[2].get('children')[0].attr('text')).toBe('0.00%');
 

__tests__/bugs/issue-2064-spec.ts

@@ -1,5 +1,6 @@
 import { Line, Area, Radar } from '../../src';
 import { createDiv } from '../utils/dom';
+import { delay } from '../utils/delay';
 
 const data = [
   {
@@ -13,7 +14,7 @@ const data = [
 ];
 
 describe('#2064', () => {
-  it('#2064 line', () => {
+  it('#2064 line', async () => {
     const plot = new Line(createDiv(), {
       width: 400,
       height: 400,
@@ -28,14 +29,14 @@ describe('#2064', () => {
 
     const line = plot.chart.geometries.find((geom) => geom.type === 'line');
     const point = plot.chart.geometries.find((geom) => geom.type === 'point');
-
+    await delay(0);
     expect(line.labelsContainer.getChildren()).toHaveLength(data.length);
     expect(point.labelsContainer.getChildren()).toHaveLength(0);
 
     plot.destroy();
   });
 
-  it('#2064 area', () => {
+  it('#2064 area', async () => {
     const plot = new Area(createDiv(), {
       width: 400,
       height: 400,
@@ -52,6 +53,7 @@ describe('#2064', () => {
     const area = plot.chart.geometries.find((geom) => geom.type === 'area');
     const line = plot.chart.geometries.find((geom) => geom.type === 'line');
     const point = plot.chart.geometries.find((geom) => geom.type === 'point');
+    await delay(0);
 
     expect(area.labelsContainer.getChildren()).toHaveLength(data.length);
     expect(line.labelsContainer.getChildren()).toHaveLength(0);
@@ -60,7 +62,7 @@ describe('#2064', () => {
     plot.destroy();
   });
 
-  it('#2064 radar', () => {
+  it('#2064 radar', async () => {
     const plot = new Radar(createDiv(), {
       width: 400,
       height: 400,
@@ -78,6 +80,7 @@ describe('#2064', () => {
     const area = plot.chart.geometries.find((geom) => geom.type === 'area');
     const line = plot.chart.geometries.find((geom) => geom.type === 'line');
     const point = plot.chart.geometries.find((geom) => geom.type === 'point');
+    await delay(0);
 
     expect(area.labelsContainer.getChildren()).toHaveLength(0);
     expect(line.labelsContainer.getChildren()).toHaveLength(data.length);

__tests__/bugs/issue-2755-spec.ts

@@ -1,5 +1,6 @@
 import { Sankey } from '../../src';
 import { createDiv, removeDom } from '../utils/dom';
+import { delay } from '../utils/delay';
 import { PARALLEL_SET } from '../data/parallel-set';
 
 describe('sankey', () => {
@@ -33,13 +34,15 @@ describe('sankey', () => {
 
   sankey.render();
 
-  it('label', () => {
+  it('label', async () => {
     sankey.update({ label: { formatter: () => 'HELLO' } });
+    await delay(300);
     expect(sankey.chart.views[1].geometries[0].labelsContainer.getChildByIndex(0).cfg.children[0].attr('text')).toBe(
       'HELLO'
     );
     // with rawFields
     sankey.update({ label: { formatter: ({ append }) => append } });
+    await delay(300);
     expect(sankey.chart.views[1].geometries[0].labelsContainer.getChildByIndex(0).cfg.children[0].attr('text')).toBe(
       'hello'
     );

__tests__/unit/plots/bar/label-spec.ts

@@ -1,9 +1,10 @@
 import { Bar } from '../../../../src';
 import { salesByArea, subSalesByArea } from '../../../data/sales';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 
 describe('bar label', () => {
-  it('position: right', () => {
+  it('position: right', async () => {
     const bar = new Bar(createDiv(), {
       width: 400,
       height: 300,
@@ -24,6 +25,7 @@ describe('bar label', () => {
     bar.render();
 
     const geometry = bar.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -94,7 +96,7 @@ describe('bar label', () => {
     bar.destroy();
   });
 
-  it('group bar position right', () => {
+  it('group bar position right', async () => {
     const bar = new Bar(createDiv('group bar position middle'), {
       width: 400,
       height: 300,
@@ -117,6 +119,7 @@ describe('bar label', () => {
     bar.render();
 
     const geometry = bar.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -132,7 +135,7 @@ describe('bar label', () => {
     bar.destroy();
   });
 
-  it('group column position middle', () => {
+  it('group column position middle', async () => {
     const bar = new Bar(createDiv('group column position middle'), {
       width: 400,
       height: 300,
@@ -155,6 +158,7 @@ describe('bar label', () => {
     bar.render();
 
     const geometry = bar.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -170,7 +174,7 @@ describe('bar label', () => {
     bar.destroy();
   });
 
-  it('group bar position left', () => {
+  it('group bar position left', async () => {
     const bar = new Bar(createDiv('group bar position bottom'), {
       width: 400,
       height: 300,
@@ -193,6 +197,7 @@ describe('bar label', () => {
     bar.render();
 
     const geometry = bar.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore

__tests__/unit/plots/chord/index-spec.ts

@@ -1,10 +1,11 @@
 import { Datum, Chord } from '../../../../src';
+import { delay } from '../../../utils/delay';
 import { createDiv } from '../../../utils/dom';
 import { populationMovementData } from '../../../data/chord-population';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/chord/constant';
 
 describe('chord', () => {
-  it('chord', () => {
+  it('chord', async () => {
     const chord = new Chord(createDiv(), {
       height: 500,
       data: populationMovementData,
@@ -58,7 +59,7 @@ describe('chord', () => {
       x: [0.00625, 0.24959442595673875, 0.24959442595673875, 0.00625],
       y: [-0.025, -0.025, 0.025, 0.025],
     });
-
+    await delay(0);
     // edge label
     expect(chord.chart.views[0].geometries[0].labelsContainer.getChildren().length).toBe(0);
 

__tests__/unit/plots/circle-packing/index-spec.ts

@@ -1,5 +1,6 @@
 import { CirclePacking } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 import { DATA } from '../../../data/circle-packing';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/circle-packing/constant';
 
@@ -88,8 +89,9 @@ describe('Circle-Packing', () => {
     expect(elements[elements.length - 1].shape.attr('lineWidth')).toBe(2);
   });
 
-  it('label', () => {
+  it('label', async () => {
     let geometry = plot.chart.geometries[0];
+    await delay(0);
     let labelGroup = plot.chart.geometries[0].labelsContainer.getChildren()[0];
     expect(typeof plot.chart.geometries[0].labelOption).toBe('object');
     // @ts-ignore
@@ -100,19 +102,22 @@ describe('Circle-Packing', () => {
     );
 
     plot.update({ label: { fields: ['value'] } });
+    await delay(0);
     labelGroup = plot.chart.geometries[0].labelsContainer.getChildren()[0];
     const filterData = plot.chart.getData();
     // @ts-ignore
     expect(labelGroup.getChildByIndex(0).attr('text')).toBe(`${filterData[0].value}`);
 
     // meta
     plot.update({ meta: { value: { formatter: (v) => v + '%' } } });
+    await delay(0);
     labelGroup = plot.chart.geometries[0].labelsContainer.getChildren()[0];
     // @ts-ignore
     expect(labelGroup.getChildByIndex(0).attr('text')).toBe(`${filterData[0].value}%`);
 
     // formatter
     plot.update({ label: { formatter: () => 'xxx' } });
+    await delay(0);
     geometry = plot.chart.geometries[0];
     // @ts-ignore
     expect(geometry.labelsContainer.getChildren()[0].getChildByIndex(0).attr('text')).toBe('xxx');

__tests__/unit/plots/column/label-spec.ts

@@ -1,9 +1,10 @@
 import { Column } from '../../../../src';
 import { salesByArea, subSalesByArea } from '../../../data/sales';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 
 describe('column label', () => {
-  it('position top', () => {
+  it('position top', async () => {
     const column = new Column(createDiv('position top'), {
       width: 400,
       height: 300,
@@ -24,6 +25,7 @@ describe('column label', () => {
     column.render();
 
     const geometry = column.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -94,7 +96,7 @@ describe('column label', () => {
     column.destroy();
   });
 
-  it('group column position top', () => {
+  it('group column position top', async () => {
     const column = new Column(createDiv('group column position top'), {
       width: 400,
       height: 300,
@@ -117,6 +119,7 @@ describe('column label', () => {
     column.render();
 
     const geometry = column.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -132,7 +135,7 @@ describe('column label', () => {
     column.destroy();
   });
 
-  it('group column position middle', () => {
+  it('group column position middle', async () => {
     const column = new Column(createDiv('group column position middle'), {
       width: 400,
       height: 300,
@@ -155,6 +158,7 @@ describe('column label', () => {
     column.render();
 
     const geometry = column.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore
@@ -170,7 +174,7 @@ describe('column label', () => {
     column.destroy();
   });
 
-  it('group column position bottom', () => {
+  it('group column position bottom', async () => {
     const column = new Column(createDiv('group column position bottom'), {
       width: 400,
       height: 300,
@@ -193,6 +197,7 @@ describe('column label', () => {
     column.render();
 
     const geometry = column.chart.geometries[0];
+    await delay(0);
     const labelGroups = geometry.labelsContainer.getChildren();
 
     // @ts-ignore

__tests__/unit/plots/facet/index-spec.ts

@@ -1,6 +1,7 @@
 import { groupBy, size } from '@antv/util';
 import { Facet } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 import { simulateMouseEvent } from '../../../utils/event';
 
 describe('facet', () => {
@@ -215,7 +216,7 @@ describe('facet', () => {
     expect(plot.chart.views[1].options.animate).toBe(false);
   });
 
-  it('label, 支持单独配置 & 不支持顶层配置', () => {
+  it('label, 支持单独配置 & 不支持顶层配置', async () => {
     plot.update({
       eachView: (view, facet) => {
         return {
@@ -232,6 +233,7 @@ describe('facet', () => {
         };
       },
     });
+    await delay(0);
     expect(plot.chart.views[0].geometries[0].labelsContainer.getChildren().length).toBeGreaterThan(0);
     expect(plot.chart.views[1].geometries[0].labelsContainer.getChildren().length).toBe(0);
   });

__tests__/unit/plots/facet/use-plot-spec.ts

@@ -1,6 +1,7 @@
 import { groupBy, size } from '@antv/util';
 import { Facet } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 import { simulateMouseEvent } from '../../../utils/event';
 
 describe('facet', () => {
@@ -259,7 +260,7 @@ describe('facet', () => {
     expect(plot.chart.views[1].options.animate).toBe(false);
   });
 
-  it('label, 支持单独配置 & 不支持顶层配置', () => {
+  it('label, 支持单独配置 & 不支持顶层配置', async () => {
     plot.update({
       eachView: (__, facet) => {
         return {
@@ -274,6 +275,7 @@ describe('facet', () => {
         };
       },
     });
+    await delay(0);
     expect(plot.chart.views[0].geometries[0].labelsContainer.getChildren().length).toBeGreaterThan(0);
     expect(plot.chart.views[1].geometries[0].labelsContainer.getChildren().length).toBe(0);
   });