Merge pull request #21201 from highcharts/dash/datagrid2-benchmark

Dash/datagrid2 benchmark

samples/data-grid/basic/data-grid-2-benchmark/demo.css

@@ -0,0 +1,5 @@
+@import url("https://code.highcharts.com/datagrid/css/datagrid2.css");
+@import url("https://code.highcharts.com/datagrid/css/datagrid.css");
+
+.flex { display: flex }
+.flex-1 { flex: 1 1 50%; }

samples/data-grid/basic/data-grid-2-benchmark/demo.html

@@ -0,0 +1,12 @@
+<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
+
+<div class="flex">
+  <div class="flex-1">
+    <h2>Datagrid: <span id="render-old"></span></h2>
+    <div id="datagrid-old"></div>
+  </div>
+  <div class="flex-1">
+    <h2>Datagrid 2.0:  <span id="render-new"></span></h2>
+    <div id="container"></div>
+  </div>
+</div>

samples/data-grid/basic/data-grid-2-benchmark/demo.js

@@ -0,0 +1,35 @@
+const oldDatagridTimer = document.querySelector('#render-old'),
+    newDatagridTimer = document.querySelector('#render-new');
+
+const dataTable = new DataGrid.DataTable({
+    columns: {
+        a: Array.from({ length: 10e4 }, (_, i) => `A${i}`),
+        b: Array.from({ length: 10e4 }, (_, i) => `B${i}`),
+        c: Array.from({ length: 10e4 }, (_, i) => `C${i}`),
+        d: Array.from({ length: 10e4 }, (_, i) => `D${i}`),
+        e: Array.from({ length: 10e4 }, (_, i) => `E${i}`),
+        f: Array.from({ length: 10e4 }, (_, i) => `F${i}`)
+    }
+});
+
+const startOldTime = new Date().getTime();
+var t0 = performance.now();
+// eslint-disable-next-line
+const grid = new DataGrid.DataGrid('datagrid-old', {
+    dataTable: dataTable
+});
+var t1 = performance.now();
+const endOldTime = new Date().getTime();
+oldDatagridTimer.innerHTML =
+    'Time: ' + (endOldTime - startOldTime) + ' Perf: ' + (t1 - t0);
+
+// NEW
+const startNewTime = new Date().getTime();
+var t2 = performance.now();
+const newgrid = new DataGrid.DataGrid2('container', {
+    dataTable: dataTable
+});
+var t3 = performance.now();
+const endNewTime = new Date().getTime();
+newDatagridTimer.innerHTML =
+    'Time: ' + (endNewTime - startNewTime) + ' Perf: ' + (t3 - t2);

ts/DataGrid/DataGrid2/DataGrid.ts

@@ -21,6 +21,8 @@
  *
  * */
 
+import type DataGridOptions from '../DataGridOptions';
+
 import DataTable from '../../Data/DataTable.js';
 import Utils from './Utils.js';
 import Globals from '../Globals.js';
@@ -58,20 +60,9 @@ class DataGrid {
     *
     * */
 
-    constructor(renderTo: string|HTMLElement) {
+    constructor(renderTo: string|HTMLElement, options: DataGridOptions) {
         this.container = DataGrid.initContainer(renderTo);
-
-        this.dataTable = new DataTable({
-            columns: {
-                a: Array.from({ length: 10e4 }, (_, i): string => `A${i}`),
-                b: Array.from({ length: 10e4 }, (_, i): string => `B${i}`),
-                c: Array.from({ length: 10e4 }, (_, i): string => `C${i}`),
-                d: Array.from({ length: 10e4 }, (_, i): string => `D${i}`),
-                e: Array.from({ length: 10e4 }, (_, i): string => `E${i}`),
-                f: Array.from({ length: 10e4 }, (_, i): string => `F${i}`)
-            }
-        });
-
+        this.dataTable = options.dataTable ?? new DataTable();
         this.viewport = new DataGridTable(this.dataTable, this.container);
     }