fix: reduce charts initialization time up to ~2x

vaadin · Oct 12, 2021 · b72e591 · b72e591
1 parent ef09b32
commit b72e591
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/src/vaadin-chart.html b/src/vaadin-chart.html
@@ -1016,11 +1016,13 @@
               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();
         }
 
         __removeSeries(seriesNodes) {

diff --git a/test/performance.html b/test/performance.html
@@ -10,20 +10,32 @@
 </head>
 
 <body>
-  <test-fixture id="performance-demo">
+  <test-fixture id="chart">
     <template>
       <vaadin-chart></vaadin-chart>
     </template>
   </test-fixture>
 
+  <test-fixture id="chart-series-1">
+    <template>
+      <vaadin-chart-series values="[1, 2, 3, 4]"></vaadin-chart-series>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="chart-series-2">
+    <template>
+      <vaadin-chart-series values="[1, 2]"></vaadin-chart-series>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Performance', () => {
       let chart, redrawSpy;
 
-      before((done) => {
-        chart = fixture('performance-demo');
+      beforeEach((done) => {
+        chart = fixture('chart');
 
-        Polymer.RenderStatus.afterNextRender(chart, () => {
+        Polymer.RenderStatus.beforeNextRender(chart, () => {
           redrawSpy = sinon.spy(chart.configuration, 'redraw');
           done();
         });
@@ -59,6 +71,40 @@
           done();
         });
       });
+
+      describe('adding a series', () => {
+        it('should redraw the chart only 1 time', (done) => {
+          const series = fixture('chart-series-1');
+          chart.appendChild(series);
+
+          requestAnimationFrame(() => {
+            expect(redrawSpy.callCount).to.equal(1);
+            done();
+          });
+        });
+      });
+
+      describe('replacing a series', () => {
+        beforeEach((done) => {
+          const series = fixture('chart-series-1');
+          chart.appendChild(series);
+
+          requestAnimationFrame(() => {
+            redrawSpy.reset();
+            done();
+          });
+        });
+
+        it('should redraw the chart only 3 times', (done) => {
+          const series = fixture('chart-series-2');
+          chart.replaceChild(series, chart.firstElementChild);
+
+          requestAnimationFrame(() => {
+            expect(redrawSpy.callCount).to.equal(3);
+            done();
+          });
+        });
+      });
     });
   </script>
 </body>