[DRAFT]

from perf doc : https://github.com/chartjs/Chart.js/blob/b9c01414bac867310d192da676c78e8e269f7d8b/docs/general/performance.md?plain=1

PARSING:

we can optimize by removing parsing, if we send date in the valid format and ordered, we can set parsing to false and save some time

following the doc: https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html
and testing with (array of object (x, y) instead of array of int)

testing at odoo with parsing = false,

there is a small problem, i'm still looking why the count is not well displayed (fyi, it's well computed as you can see in the y axis)

Data normalization

when parsing, i used unique and sorted data, so it should work with normalized: true

Decimation (https://github.com/chartjs/Chart.js/blob/b9c01414bac867310d192da676c78e8e269f7d8b/docs/configuration/decimation.md)

can't be acheived as our labels are not linear or time, we use stages (string)

Disable Animations

for large data

i'm also wondering if we disable the view for large data. it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.

it was crushing, and sometimes loaded in 160 seconds, now it's done in around ~ 70 seconds, but as you can see it's not readable at all

I also found an open issue on github, and someone tried to solve it 
https://github.com/chartjs/Chart.js/pull/11836
it's still not approved

i will need to test on  a staging env (real data) to be coherent.

Author: RaoufGhrissi

addons/web/static/lib/Chart/Chart.js

@@ -8125,7 +8125,7 @@
         getDatasetMeta(datasetIndex) {
             const dataset = this.data.datasets[datasetIndex];
             const metasets = this._metasets;
-            let meta = metasets.filter((x)=>x && x._dataset === dataset).pop();
+            let meta = metasets[datasetIndex];
             if (!meta) {
                 meta = {
                     type: null,
@@ -8141,7 +8141,7 @@
                     _parsed: [],
                     _sorted: false
                 };
-                metasets.push(meta);
+                metasets[datasetIndex] = meta;
             }
             return meta;
         }

addons/web/static/src/views/graph/graph_model.js

@@ -299,6 +299,10 @@ export class GraphModel extends Model {
                     (_, index) => labelsToKeepIndexes[index]
                 );
             }
+        } else if (mode === "bar") {
+            for (const dataset of datasets) {
+                dataset.data = dataset.data.map((value, index) => ({ x: index, y: value }));
+            }
         }
 
         return { datasets, labels };

addons/web/static/src/views/graph/graph_renderer.js

@@ -773,7 +773,9 @@ export class GraphRenderer extends Component {
             onResize: () => {
                 this.resizeChart(options);
             },
-            animation: this.getAnimationOptions(),
+            animation: false, // this.getAnimationOptions(),
+            parsing: false,
+            normalized: true,
         };
         if (!disableLinking && mode !== "line") {
             options.onClick = this.onGraphClicked.bind(this);
@@ -838,7 +840,9 @@ export class GraphRenderer extends Component {
         }
         if (this.canvasRef.el) {
             const config = this.getChartConfig();
+            console.time("chart");
             this.chart = new Chart(this.canvasRef.el, config);
+            console.timeEnd("chart");
         }
     }