Fix element creation for large dataset (#8388)

* Fix element creation for large dataset
* Fix syncing
* Remove duplication

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index dd27ef163d06b513f552aadb7af050a84baed702..49413ce938735341977db60a0f95d7b5317515db 100644 (file)
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -990,18 +990,25 @@ export default class DatasetController {
         */
        _insertElements(start, count, resetNewElements = true) {
                const me = this;
-               const elements = new Array(count);
                const meta = me._cachedMeta;
                const data = meta.data;
+               const end = start + count;
                let i;
 
-               for (i = 0; i < count; ++i) {
-                       elements[i] = new me.dataElementType();
+               const move = (arr) => {
+                       arr.length += count;
+                       for (i = arr.length - 1; i >= end; i--) {
+                               arr[i] = arr[i - count];
+                       }
+               };
+               move(data);
+
+               for (i = start; i < end; ++i) {
+                       data[i] = new me.dataElementType();
                }
-               data.splice(start, 0, ...elements);
 
                if (me._parsing) {
-                       meta._parsed.splice(start, 0, ...new Array(count));
+                       move(meta._parsed);
                }
                me.parse(start, count);
 

diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
index 4ff3c6df81ae26bced240e20db513c49f6a035a6..afe7e9c3d7d9e08b5f3b260810c5345386c34ad8 100644 (file)
--- a/test/specs/controller.line.tests.js
+++ b/test/specs/controller.line.tests.js
@@ -907,4 +907,30 @@ describe('Chart.controllers.line', function() {
                expect(meta.data[2].options.borderWidth).toBe(3);
                expect(meta.data[3].options.borderWidth).toBe(4);
        });
+
+       it('should render a million points', function() {
+               var data = [];
+               for (let x = 0; x < 1e6; x++) {
+                       data.push({x, y: Math.sin(x / 10000)});
+               }
+               function createChart() {
+                       window.acquireChart({
+                               type: 'line',
+                               data: {
+                                       datasets: [{
+                                               data,
+                                               borderWidth: 1,
+                                               radius: 0
+                                       }],
+                               },
+                               options: {
+                                       scales: {
+                                               x: {type: 'linear'},
+                                               y: {type: 'linear'}
+                                       }
+                               }
+                       });
+               }
+               expect(createChart).not.toThrow();
+       });
 });