[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 #29747

addons/web/__manifest__.py

@@ -23,9 +23,9 @@
     ],
     'qweb': [
         "static/src/xml/base.xml",
+        "static/src/xml/chart.xml",
         "static/src/xml/kanban.xml",
         "static/src/xml/menu.xml",
-        "static/src/xml/pie_chart.xml",
         "static/src/xml/rainbow_man.xml",
         "static/src/xml/report.xml",
         "static/src/xml/web_calendar.xml",

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

@@ -61,6 +61,7 @@ return AbstractModel.extend({
         this.chart = {
             compare: params.compare,
             comparisonTimeRange: params.comparisonTimeRange,
+            comparisonTimeRangeDescription: params.comparisonTimeRangeDescription,
             data: [],
             groupedBy: params.groupedBy.length ? params.groupedBy : groupBys,
             // this parameter is not used anywhere for now.
@@ -72,6 +73,7 @@ return AbstractModel.extend({
             measure: params.context.graph_measure || params.measure,
             mode: params.context.graph_mode || params.mode,
             timeRange: params.timeRange,
+            timeRangeDescription: params.timeRangeDescription,
             domain: params.domain,
             context: params.context,
         };
@@ -100,14 +102,18 @@ return AbstractModel.extend({
             this.chart.mode = params.context.graph_mode || this.chart.mode;
             var timeRangeMenuData = params.context.timeRangeMenuData;
             if (timeRangeMenuData) {
-                this.chart.timeRange = timeRangeMenuData.timeRange || [];
                 this.chart.comparisonTimeRange = timeRangeMenuData.comparisonTimeRange || [];
                 this.chart.compare = this.chart.comparisonTimeRange.length > 0;
+                this.chart.timeRange = timeRangeMenuData.timeRange || [];
+                this.chart.comparisonTimeRangeDescription = timeRangeMenuData.comparisonTimeRangeDescription;
+                this.chart.timeRangeDescription = timeRangeMenuData.timeRangeDescription;
             } else {
-                this.chart.timeRange = [];
+                this.chart = _.omit(this.chart, 'comparisonData');
                 this.chart.comparisonTimeRange = [];
                 this.chart.compare = false;
-                this.chart = _.omit(this.chart, 'comparisonData');
+                this.chart.timeRange = [];
+                this.chart.comparisonTimeRangeDescription = undefined;
+                this.chart.timeRangeDescription = undefined;
             }
         }
         if ('domain' in params) {

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

@@ -145,25 +145,31 @@ 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) {
                 return {x: datapt.labels, y: datapt.value};
             });
             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) {
                     return {x: datapt.labels, y: datapt.value};
                 });
                 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,25 +397,29 @@ 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) {
                     return {x: index, y: datapt.value};
                 });
                 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,16 +550,15 @@ 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,
             }));
 
             // 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,
             }));

addons/web/static/src/js/widgets/pie_chart.js

@@ -15,7 +15,7 @@ var qweb = core.qweb;
 
 var PieChart = Widget.extend({
     className: 'o_pie_chart',
-    xmlDependencies: ['/web/static/src/xml/pie_chart.xml'],
+    xmlDependencies: ['/web/static/src/xml/chart.xml'],
 
     /**
      * @override

addons/web/static/src/xml/chart.xml

@@ -0,0 +1,39 @@
+<template>
+
+<t t-name="web.PieChart">
+    <graph type="pie" t-att-title="title">
+        <field t-att-name="modifiers.groupby.split(':')[0]" t-att-interval="modifiers.groupby.split(':')[1]"/>
+        <field t-if="modifiers.measure" t-att-name="modifiers.measure" type="measure"/>
+    </graph>
+</t>
+
+<t t-name="web.Chart.Tooltip">
+    <table>
+        <thead>
+            <tr>
+                <td colspan="3">
+                    <strong class="x-value">
+                        <t t-esc="title"/>
+                    </strong>
+                </td>
+            </tr>
+        </thead>
+        <tbody>
+            <t t-foreach="lines" t-as="line">
+                <tr>
+                    <td class="legend-color-guide">
+                        <div t-att-style="'background-color:' + line.color +';'"/>
+                    </td>
+                    <td class="key">
+                        <t t-esc="line.label"/>
+                    </td>
+                    <td class="value">
+                        <t t-esc="line.value &amp;&amp; window.parseFloat(line.value).toFixed(2) || 0"/>
+                    </td>
+                </tr>
+            </t>
+        </tbody>
+    </table>
+</t>
+
+</template>