[FIX] web: style chart elements in graph views only locally

The elements style was set globally and thus used to modify
the style of any chart in Odoo after the first loading of a
graph view. For instance, the charts drawn in
sale_subscription_dashboard are not the same before and after
the first loading of a graph view. This is fixed by this
commit.

1 files changed, 19 insertions, 7 deletions

diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 02fdb102358..89c31075942 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -216,6 +216,24 @@ return AbstractRenderer.extend({
         return this.state.origins[dataPt.originIndex];
     },
     /**
+     * Returns an object used to style chart elements independently from the datasets.
+     *
+     * @private
+     * @returns {Object}
+     */
+    _getElementOptions: function () {
+        var elementOptions = {};
+        if (this.state.mode === 'bar') {
+            elementOptions.rectangle = {borderWidth: 1};
+        } else if (this.state.mode === 'line') {
+            elementOptions.line = {
+                tension: 0,
+                fill: false,
+            };
+        }
+        return elementOptions;
+    },
+    /**
      * Returns a DateClasses instance used to manage equivalence of dates.
      *
      * @private
@@ -563,6 +581,7 @@ return AbstractRenderer.extend({
             scales: this._getScaleOptions(),
             legend: this._getLegendOptions(datasetsCount),
             tooltips: this._getTooltipOptions(datasetsCount),
+            elements: this._getElementOptions(),
         };
     },
     /**
@@ -661,9 +680,6 @@ return AbstractRenderer.extend({
     _renderBarChart: function (dataPoints) {
         var self = this;
 
-        // style rectangles
-        Chart.defaults.global.elements.rectangle.borderWidth = 1;
-
         // prepare data
         var data = this._prepareData(dataPoints);
         data.datasets.forEach(function (dataset, index) {
@@ -694,10 +710,6 @@ return AbstractRenderer.extend({
     _renderLineChart: function (dataPoints) {
         var self = this;
 
-        // style lines
-        Chart.defaults.global.elements.line.tension = 0;
-        Chart.defaults.global.elements.line.fill = false;
-
         // prepare data
         var data = this._prepareData(dataPoints);
         data.datasets.forEach(function (dataset, index) {