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

[IMP] web: add percentage information in pie tooltip

Browse Source 
With this commit, we add percentage information in pie chart tooltip,
A pie chart is meant to illustrate numerical proportions.
In Odoo, when hovering a piece of a pie chart, the tooltip is currently not
displayed the proportion/percentage of the piece in the pie. The purpose of
this commit is to provide the user with the percentages of data distribution by
adding them in the tooltip.
In the tooltip displayed when hovering a piece of the pie chart, add the
percentage between brackets.

task-2608695

closes odoo/odoo#78343

X-original-commit: f73bd6dad71045d9f0a012259f148f0c768b964b
Signed-off-by: FrancoisGe <fge@odoo.com>
This commit is contained in:
Mohammed Shekha
2021-10-19 08:22:44 +00:00
parent c715ecb38b
commit 6087787cd3
6 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/js/views/graph/graph_renderer.js
+5 -1
View File
@@ -263,6 +263,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
const innerHTML = this.env.qweb.renderToString("web.GraphRenderer.CustomTooltip", {
maxWidth: getMaxWidth(this.chart.chartArea),
measure: this.measureDescription,
mode: this.props.mode,
tooltipItems: this._getTooltipItems(tooltipModel),
});
const template = Object.assign(document.createElement("template"), { innerHTML });
@@ -616,11 +617,14 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
let label = data.labels[item.index];
let value;
let boxColor;
let percentage;
if (this.props.mode === "pie") {
if (label === this.noDataLabel) {
value = this._formatValue(0);
} else {
value = this._formatValue(dataset.data[item.index]);
const totalData = dataset.data.reduce((a, b) => a + b, 0);
percentage = totalData && ((dataset.data[item.index] * 100) / totalData).toFixed(2);
}
label = this._relabelling(label, comparisonFieldIndex, dataset.originIndex);
if (this.props.origins.length > 1) {
@@ -640,7 +644,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
dataset.backgroundColor :
dataset.borderColor;
}
return { id, label, value, boxColor };
return { id, label, value, boxColor, percentage };
}
/**
addons/web/static/src/legacy/scss/graph_view.scss
+3
View File
@@ -49,6 +49,9 @@
padding-bottom: 1px;
}
td {
&:nth-child(1) {
min-width: 100px;
}
span.o_square {
height: 12px;
width: 12px;
addons/web/static/src/views/graph/graph_renderer.js
+5 -1
View File
@@ -111,6 +111,7 @@ export class GraphRenderer extends Component {
const innerHTML = this.env.qweb.renderToString("web.GraphRenderer.CustomTooltip", {
maxWidth: getMaxWidth(this.chart.chartArea),
measure: measures[measure].string,
mode: this.model.metaData.mode,
tooltipItems: this.getTooltipItems(data, metaData, tooltipModel),
});
const template = Object.assign(document.createElement("template"), { innerHTML });
@@ -456,6 +457,7 @@ export class GraphRenderer extends Component {
let label = dataset.trueLabels[id];
let value = this.formatValue(dataset.data[id], allIntegers);
let boxColor;
let percentage;
if (mode === "pie") {
if (label === NO_DATA) {
value = this.formatValue(0, allIntegers);
@@ -464,13 +466,15 @@ export class GraphRenderer extends Component {
label = `${dataset.label} / ${label}`;
}
boxColor = dataset.backgroundColor[id];
const totalData = dataset.data.reduce((a, b) => a + b, 0);
percentage = totalData && ((dataset.data[item.index] * 100) / totalData).toFixed(2);
} else {
if (groupBy.length > 1 || domains.length > 1) {
label = `${label} / ${dataset.label}`;
}
boxColor = mode === "bar" ? dataset.backgroundColor : dataset.borderColor;
}
items.push({ id, label, value, boxColor });
items.push({ id, label, value, boxColor, percentage });
}
return items;
}
addons/web/static/src/views/graph/graph_renderer.xml
+6 -1
View File
@@ -15,7 +15,12 @@
<span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}" />
<span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
</td>
<td class="o_value" t-esc="tooltipItem.value" />
<td class="o_value">
<t t-esc="tooltipItem.value"/>
<t t-if="mode === 'pie' and tooltipItem.percentage">
(<t t-esc="tooltipItem.percentage" />%)
</t>
</td>
</tr>
</tbody>
</table>
addons/web/static/src/views/graph/graph_view.scss
+3
View File
@@ -50,6 +50,9 @@
padding-bottom: 1px;
}
td {
&:nth-child(1) {
min-width: 100px;
}
span.o_square {
height: 12px;
width: 12px;
addons/web/static/tests/views/graph_view_tests.js
+24 -24
View File
@@ -1271,7 +1271,7 @@ QUnit.module("Views", (hooks) => {
stack: undefined,
});
checkLegend(assert, graph, "Total");
checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8 (100.00%)" }] }, 0);
});
QUnit.test("pie chart rendering (one groupBy)", async function (assert) {
@@ -1294,8 +1294,8 @@ QUnit.module("Views", (hooks) => {
data: [3, 5],
});
checkLegend(assert, graph, ["true", "false"]);
checkTooltip(assert, graph, { lines: [{ label: "true", value: "3" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "false", value: "5" }] }, 1);
checkTooltip(assert, graph, { lines: [{ label: "true", value: "3 (37.50%)" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "false", value: "5 (62.50%)" }] }, 1);
});
QUnit.test("pie chart rendering (two groupBy)", async function (assert) {
@@ -1320,9 +1320,9 @@ QUnit.module("Views", (hooks) => {
label: "",
});
checkLegend(assert, graph, ["true / xphone", "false / xphone", "false / xpad"]);
checkTooltip(assert, graph, { lines: [{ label: "true / xphone", value: "3" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "false / xphone", value: "1" }] }, 1);
checkTooltip(assert, graph, { lines: [{ label: "false / xpad", value: "4" }] }, 2);
checkTooltip(assert, graph, { lines: [{ label: "true / xphone", value: "3 (37.50%)" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "false / xphone", value: "1 (12.50%)" }] }, 1);
checkTooltip(assert, graph, { lines: [{ label: "false / xpad", value: "4 (50.00%)" }] }, 2);
});
QUnit.test("pie chart rendering (no groupBy, several domains)", async function (assert) {
@@ -1369,7 +1369,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "True group / Total", value: "6" }],
lines: [{ label: "True group / Total", value: "6 (100.00%)" }],
},
0,
0
@@ -1379,7 +1379,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "False group / Total", value: "17" }],
lines: [{ label: "False group / Total", value: "17 (100.00%)" }],
},
0,
1
@@ -1439,7 +1439,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "True group / 1", value: "14" }],
lines: [{ label: "True group / 1", value: "14 (100.00%)" }],
},
0,
0
@@ -1449,7 +1449,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "False group / 1", value: "12" }],
lines: [{ label: "False group / 1", value: "12 (63.16%)" }],
},
0,
1
@@ -1459,7 +1459,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "False group / 2", value: "5" }],
lines: [{ label: "False group / 2", value: "5 (26.32%)" }],
},
1,
1
@@ -1469,7 +1469,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "False group / 4", value: "2" }],
lines: [{ label: "False group / 4", value: "2 (10.53%)" }],
},
2,
1
@@ -1553,7 +1553,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "February 2021 / W05 2021", value: "1" }],
lines: [{ label: "February 2021 / W05 2021", value: "1 (50.00%)" }],
},
0,
0
@@ -1562,7 +1562,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "January 2021 / W01 2021", value: "1" }],
lines: [{ label: "January 2021 / W01 2021", value: "1 (25.00%)" }],
},
0,
1
@@ -1571,7 +1571,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "February 2021 / W07 2021", value: "1" }],
lines: [{ label: "February 2021 / W07 2021", value: "1 (50.00%)" }],
},
1,
0
@@ -1580,7 +1580,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "January 2021 / W02 2021", value: "1" }],
lines: [{ label: "January 2021 / W02 2021", value: "1 (25.00%)" }],
},
1,
1
@@ -1589,7 +1589,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "January 2021 / W03 2021", value: "1" }],
lines: [{ label: "January 2021 / W03 2021", value: "1 (25.00%)" }],
},
2,
1
@@ -1598,7 +1598,7 @@ QUnit.module("Views", (hooks) => {
assert,
graph,
{
lines: [{ label: "January 2021 / W04 2021", value: "1" }],
lines: [{ label: "January 2021 / W04 2021", value: "1 (25.00%)" }],
},
3,
1
@@ -1674,7 +1674,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "February 2021 / true / W05 2021", value: "14" }],
lines: [{ label: "February 2021 / true / W05 2021", value: "14 (100.00%)" }],
},
0,
0
@@ -1684,7 +1684,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "January 2021 / true / W01 2021", value: "12" }],
lines: [{ label: "January 2021 / true / W01 2021", value: "12 (70.59%)" }],
},
1,
1
@@ -1694,7 +1694,7 @@ QUnit.module("Views", (hooks) => {
graph,
{
title: "Revenue",
lines: [{ label: "January 2021 / false / W02 2021", value: "5" }],
lines: [{ label: "January 2021 / false / W02 2021", value: "5 (29.41%)" }],
},
2,
1
@@ -1726,7 +1726,7 @@ QUnit.module("Views", (hooks) => {
]
);
checkLegend(assert, graph, ["No data"]);
checkTooltip(assert, graph, { lines: [{ label: "No data", value: "0" }] }, 0);
checkTooltip(assert, graph, { lines: [{ label: "No data", value: "0 (100.00%)" }] }, 0);
});
QUnit.test("pie chart rendering (no data, several domains)", async function (assert) {
@@ -1772,14 +1772,14 @@ QUnit.module("Views", (hooks) => {
checkTooltip(
assert,
graph,
{ lines: [{ label: "True group / xphone", value: "1" }] },
{ lines: [{ label: "True group / xphone", value: "1 (100.00%)" }] },
0,
0
);
checkTooltip(
assert,
graph,
{ lines: [{ label: "False group / No data", value: "0" }] },
{ lines: [{ label: "False group / No data", value: "0 (100.00%)" }] },
1,
1
);