[IMP] web: graph view legend and tooltips improvements

This commit ameliorates the tooltips and the legend
of the graph view in its different modes (bar, line, and pie).

Related task id: 1917940

Co-authored-by: Mohammed Shekha <msh@openerp.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>

closes odoo/odoo#29747

1 files changed, 67 insertions, 11 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 7de98b29e6b..549fa56eefa 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -145,9 +145,11 @@ return AbstractRenderer.extend({
         if (this.state.groupedBy.length === 0) {
             data = [{
                 values: [{
-                    x: measure,
+                    x: _t('Total'),
                     y: this.state.data[0].value}],
-                key: measure
+                key: this.state.timeRangeDescription ?
+                        this.state.timeRangeDescription:
+                        measure,
             }];
         } else if (this.state.groupedBy.length === 1) {
             values = this.state.data.map(function (datapt, index) {
@@ -155,7 +157,9 @@ return AbstractRenderer.extend({
             });
             data.push({
                 values: values,
-                key: measure,
+                key: this.state.timeRangeDescription ?
+                        this.state.timeRangeDescription:
+                        measure,
             });
             if (this.state.comparisonData) {
                 values = this.state.comparisonData.map(function (datapt, index) {
@@ -163,7 +167,9 @@ return AbstractRenderer.extend({
                 });
                 data.push({
                     values: values,
-                    key: measure + ' (compare)',
+                    key: this.state.comparisonTimeRangeDescription ?
+                        this.state.comparisonTimeRangeDescription:
+                        measure,
                     color: '#ff7f0e',
                 });
             }
@@ -237,6 +243,24 @@ return AbstractRenderer.extend({
             });
         });
 
+        chart.tooltip.contentGenerator(function (data) {
+            var lines = data.series.map(function (serie) {
+                var label = data.value;
+                if (self.state.groupedBy.length > 1 || self.isComparison) {
+                    label = label + "/" + serie.key;
+                }
+                return {
+                    color: serie.color,
+                    label: label,
+                    value: serie.value,
+                };
+            });
+            return qweb.render("web.Chart.Tooltip", {
+                title: self.state.fields[self.state.measure].string,
+                lines: lines,
+            });
+        });
+
         chart(svg);
         return chart;
     },
@@ -330,6 +354,17 @@ return AbstractRenderer.extend({
           showLabels: all_zero ? false: true,
         });
 
+        chart.tooltip.contentGenerator(function (data) {
+            return qweb.render("web.Chart.Tooltip", {
+                title: self.state.fields[self.state.measure].string,
+                lines : [{
+                    color: data.color,
+                    label: data.data.x,
+                    value: data.data.y,
+                }],
+            });
+        });
+
         chart(svg);
         return chart;
     },
@@ -362,7 +397,9 @@ return AbstractRenderer.extend({
             data.push({
                     area: true,
                     values: values,
-                    key: measure,
+                    key: this.state.timeRangeDescription ?
+                        this.state.timeRangeDescription:
+                        measure,
                 });
             if (this.state.comparisonData && this.state.comparisonData.length > 0) {
                 values = this.state.comparisonData.map(function (datapt, index) {
@@ -370,17 +407,19 @@ return AbstractRenderer.extend({
                 });
                 data.push({
                     values: values,
-                    key: measure + ' (compare)',
+                    key: this.state.comparisonTimeRangeDescription ?
+                        this.state.comparisonTimeRangeDescription:
+                        measure,
                     color: '#ff7f0e',
                 });
             }
 
-            for (i = 0; i < graphData.length; i++) {
+            for (var i = 0; i < graphData.length; i++) {
                 ticksLabels.push(graphData[i].labels);
             }
             if (this.state.comparisonData && this.state.comparisonData.length > this.state.data.length) {
                 var diff = this.state.comparisonData.length - this.state.data.length;
-                var length = self.state.data.length
+                var length = self.state.data.length;
                 var diffTime = 0;
                 if (length < self.state.data.length) {
                     var date1 = moment(self.state.data[length - 1].labels[0]);
@@ -447,6 +486,24 @@ return AbstractRenderer.extend({
         chart.yAxis.tickPadding(5);
         chart.yAxis.orient("right");
 
+        chart.interactiveLayer.tooltip.contentGenerator(function (data) {
+            var lines = data.series.map(function (serie) {
+                var label = ticksLabels[data.value];
+                if (self.state.groupedBy.length > 1 || self.isComparison) {
+                    label = label + "/" + serie.key;
+                }
+                return {
+                    color: serie.color,
+                    label: label,
+                    value: serie.value,
+                };
+            });
+            return qweb.render("web.Chart.Tooltip", {
+                title: self.state.fields[self.state.measure].string,
+                lines: lines,
+            });
+        });
+
         chart(svg);
 
         // Bigger line (stroke-width 1.5 is hardcoded in nv.d3)
@@ -493,8 +550,7 @@ return AbstractRenderer.extend({
 
         if (this.state.mode === 'pie' && this.isComparison) {
             // Render graph title
-            var timeRangeMenuData = this.state.context.timeRangeMenuData;
-            var chartTitle = this.title + ' (' + timeRangeMenuData.timeRangeDescription + ')';
+            var chartTitle = this.title + ' (' + this.state.timeRangeDescription + ')';
             this.$('.o_graph_svg_container').last().prepend($('<label/>', {
                 text: chartTitle,
             }));
@@ -502,7 +558,7 @@ return AbstractRenderer.extend({
             // Instantiate comparison graph
             var comparisonChart = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);
             // Render comparison graph title
-            var comparisonChartTitle = this.title + ' (' + timeRangeMenuData.comparisonTimeRangeDescription + ')';
+            var comparisonChartTitle = this.title + ' (' + this.state.comparisonTimeRangeDescription + ')';
             this.$('.o_graph_svg_container').last().prepend($('<label/>', {
                 text: comparisonChartTitle,
             }));