refactor: reduce charts initialization time up to ~2x (#2348) (#2363)

Co-authored-by: Sergey Vinogradov <[email protected]>
vaadin · Aug 20, 2021 · 92d60eb · 92d60eb
1 parent b3c672e
commit 92d60eb
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/packages/vaadin-charts/src/vaadin-chart.js b/packages/vaadin-charts/src/vaadin-chart.js
@@ -981,11 +981,13 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         this.__setYAxisProps(yAxes, unit, { max: valueMax });
       }
 
-      const seriesConfiguration = this.__updateOrAddSeriesInstance(seriesElement.options, idxOnChildList);
+      const seriesConfiguration = this.__updateOrAddSeriesInstance(seriesElement.options, idxOnChildList, false);
 
       seriesElement.setSeries(seriesConfiguration);
     }
     this.__removeAxisIfEmpty();
+
+    this.configuration.redraw();
   }
 
   /** @private */
@@ -1454,11 +1456,11 @@ class ChartElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  __updateOrAddSeriesInstance(seriesOptions, position) {
+  __updateOrAddSeriesInstance(seriesOptions, position, redraw) {
     if (this.configuration.series[position]) {
-      this.configuration.series[position].update(seriesOptions);
+      this.configuration.series[position].update(seriesOptions, redraw);
     } else {
-      this.configuration.addSeries(seriesOptions);
+      this.configuration.addSeries(seriesOptions, redraw);
     }
     return this.configuration.series[position];
   }

diff --git a/packages/vaadin-charts/test/chart-element.test.js b/packages/vaadin-charts/test/chart-element.test.js
@@ -1,6 +1,6 @@
 import sinon from 'sinon';
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import '../vaadin-chart.js';
 
 describe('vaadin-chart', () => {
@@ -392,4 +392,48 @@ describe('vaadin-chart', () => {
       expect(scrollWidth).to.be.equal(document.documentElement.scrollWidth);
     });
   });
+
+  describe('performance', () => {
+    let chart, redrawSpy;
+
+    beforeEach(async () => {
+      chart = fixtureSync(`<vaadin-chart></vaadin-chart>`);
+      await oneEvent(chart, 'chart-load');
+
+      redrawSpy = sinon.spy(chart.configuration, 'redraw');
+    });
+
+    describe('adding a series', () => {
+      it('should redraw the chart only 2 times', async () => {
+        const series = fixtureSync(`<vaadin-chart-series values="[1, 2, 3, 4]"></vaadin-chart-series>`);
+
+        chart.appendChild(series);
+        await nextFrame();
+
+        // The number of times the chart is redrawn may be optimized later.
+        expect(redrawSpy.callCount).to.be.equal(2);
+      });
+    });
+
+    describe('replacing a series', () => {
+      beforeEach(async () => {
+        const series = fixtureSync(`<vaadin-chart-series values="[1, 2]"></vaadin-chart-series>`);
+
+        chart.appendChild(series);
+        await nextFrame();
+
+        redrawSpy.resetHistory();
+      });
+
+      it('should redraw the chart only 4 times', async () => {
+        const series = fixtureSync(`<vaadin-chart-series values="[1, 2, 3, 4]"></vaadin-chart-series>`);
+
+        chart.replaceChild(series, chart.firstElementChild);
+        await nextFrame();
+
+        // The number of times the chart is redrawn may be optimized later.
+        expect(redrawSpy.callCount).to.equal(4);
+      });
+    });
+  });
 });