From 6087787cd35faaa45f36f009bfa24dba9e25d7cf Mon Sep 17 00:00:00 2001 From: Mohammed Shekha Date: Wed, 11 Aug 2021 07:17:14 +0000 Subject: [PATCH] [IMP] web: add percentage information in pie tooltip 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 --- .../legacy/js/views/graph/graph_renderer.js | 6 ++- .../static/src/legacy/scss/graph_view.scss | 3 ++ .../static/src/views/graph/graph_renderer.js | 6 ++- .../static/src/views/graph/graph_renderer.xml | 7 ++- .../static/src/views/graph/graph_view.scss | 3 ++ .../static/tests/views/graph_view_tests.js | 48 +++++++++---------- 6 files changed, 46 insertions(+), 27 deletions(-) diff --git a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js index ba35e0d976b..a41beda3b22 100644 --- a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js +++ b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js @@ -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 }; } /** diff --git a/addons/web/static/src/legacy/scss/graph_view.scss b/addons/web/static/src/legacy/scss/graph_view.scss index 82c0ce39d5f..84f755e46d9 100644 --- a/addons/web/static/src/legacy/scss/graph_view.scss +++ b/addons/web/static/src/legacy/scss/graph_view.scss @@ -49,6 +49,9 @@ padding-bottom: 1px; } td { + &:nth-child(1) { + min-width: 100px; + } span.o_square { height: 12px; width: 12px; diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js index 1c06b3eeeb4..7f7e36ed675 100644 --- a/addons/web/static/src/views/graph/graph_renderer.js +++ b/addons/web/static/src/views/graph/graph_renderer.js @@ -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; } diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml index 29333a22286..c41b2377e82 100644 --- a/addons/web/static/src/views/graph/graph_renderer.xml +++ b/addons/web/static/src/views/graph/graph_renderer.xml @@ -15,7 +15,12 @@ - + + + + (%) + + diff --git a/addons/web/static/src/views/graph/graph_view.scss b/addons/web/static/src/views/graph/graph_view.scss index 955635f6418..8e86df7e582 100644 --- a/addons/web/static/src/views/graph/graph_view.scss +++ b/addons/web/static/src/views/graph/graph_view.scss @@ -50,6 +50,9 @@ padding-bottom: 1px; } td { + &:nth-child(1) { + min-width: 100px; + } span.o_square { height: 12px; width: 12px; diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js index 3d5f7584ace..a79bd723082 100644 --- a/addons/web/static/tests/views/graph_view_tests.js +++ b/addons/web/static/tests/views/graph_view_tests.js @@ -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 );