pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: graph view legend and tooltips improvements

Browse Source 
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
This commit is contained in:
Juhil Somaiya
2019-02-25 08:26:10 +00:00
committed by Mathieu Duckerts-Antoine
co-authored by Mohammed Shekha Mathieu Duckerts-Antoine
parent 23dcaf4836
commit b3b29f3b86
6 changed files with 117 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/__manifest__.py
+1 -1
View File
@@ -23,9 +23,9 @@ This module provides the core of the Odoo Web Client.
],
'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
+9 -3
View File
@@ -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
+67 -11
View File
@@ -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,
}));
addons/web/static/src/js/widgets/pie_chart.js
+1 -1
View File
@@ -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
+39
View File
@@ -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>
addons/web/static/src/xml/pie_chart.xml
-10
View File
@@ -1,10 +0,0 @@
<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>
</template>