From cc207bbe6636092ded8cfbff8bcd36d620ca784f Mon Sep 17 00:00:00 2001 From: dafl-odoo Date: Wed, 27 Jul 2022 08:51:24 +0000 Subject: [PATCH] [REF] web,project: stacked line chart generalization Add stacked option on line chart. The option already existed in Project for burndown graph, so I exported and adapted everything concerning stacked lines from Project to Web. closes odoo/odoo#96833 Task-id: 2929576 Signed-off-by: Simon Genin (ges@odoo) --- .../burndown_chart/burndown_chart_renderer.js | 46 ----- .../src/burndown_chart/burndown_chart_view.js | 2 - .../burndown_chart/burndown_chart_view.xml | 5 +- .../static/tests/burndown_chart_tests.js | 87 ---------- .../src/views/graph/graph_controller.xml | 10 +- .../static/src/views/graph/graph_renderer.js | 11 +- .../static/tests/views/graph_view_tests.js | 157 +++++++++++++++++- 7 files changed, 166 insertions(+), 152 deletions(-) delete mode 100644 addons/project/static/src/burndown_chart/burndown_chart_renderer.js diff --git a/addons/project/static/src/burndown_chart/burndown_chart_renderer.js b/addons/project/static/src/burndown_chart/burndown_chart_renderer.js deleted file mode 100644 index 586cc109f7f..00000000000 --- a/addons/project/static/src/burndown_chart/burndown_chart_renderer.js +++ /dev/null @@ -1,46 +0,0 @@ -/** @odoo-module **/ - -import { hexToRGBA } from "@web/views/graph/colors"; -import { GraphRenderer } from "@web/views/graph/graph_renderer"; - -export class BurndownChartRenderer extends GraphRenderer { - /** - * @override - */ - getLineChartData() { - const data = super.getLineChartData(); - const { stacked } = this.model.metaData; - if (stacked) { - for (const dataset of data.datasets) { - dataset.backgroundColor = hexToRGBA(dataset.borderColor, 0.4); - } - } - return data; - } - - /** - * @override - */ - getElementOptions() { - const elementOptions = super.getElementOptions(); - const { mode, stacked } = this.model.metaData; - if (mode === "line") { - elementOptions.line.fill = stacked; - } - return elementOptions; - } - - /** - * @override - */ - getScaleOptions() { - const { xAxes, yAxes } = super.getScaleOptions(); - const { mode, stacked } = this.model.metaData; - if (mode === "line") { - for (const y of yAxes) { - y.stacked = stacked; - } - } - return { xAxes, yAxes }; - } -} diff --git a/addons/project/static/src/burndown_chart/burndown_chart_view.js b/addons/project/static/src/burndown_chart/burndown_chart_view.js index 0906550a881..0f135d16388 100644 --- a/addons/project/static/src/burndown_chart/burndown_chart_view.js +++ b/addons/project/static/src/burndown_chart/burndown_chart_view.js @@ -1,7 +1,6 @@ /** @odoo-module **/ import { BurndownChartModel } from "./burndown_chart_model"; -import { BurndownChartRenderer } from "./burndown_chart_renderer"; import { graphView } from "@web/views/graph/graph_view"; import { registry } from "@web/core/registry"; import { BurndownChartSearchModel } from "./burndown_chart_search_model"; @@ -10,7 +9,6 @@ const viewRegistry = registry.category("views"); const burndownChartGraphView = { ...graphView, - Renderer: BurndownChartRenderer, buttonTemplate: "project.BurndownChartView.Buttons", hideCustomGroupBy: true, Model: BurndownChartModel, diff --git a/addons/project/static/src/burndown_chart/burndown_chart_view.xml b/addons/project/static/src/burndown_chart/burndown_chart_view.xml index 0925d1dd5c3..b1c1902a8da 100644 --- a/addons/project/static/src/burndown_chart/burndown_chart_view.xml +++ b/addons/project/static/src/burndown_chart/burndown_chart_view.xml @@ -4,10 +4,7 @@ - - true - - + diff --git a/addons/project/static/tests/burndown_chart_tests.js b/addons/project/static/tests/burndown_chart_tests.js index 467a1792d53..ad19ab6f2d5 100644 --- a/addons/project/static/tests/burndown_chart_tests.js +++ b/addons/project/static/tests/burndown_chart_tests.js @@ -3,9 +3,7 @@ import { browser } from "@web/core/browser/browser"; import { click, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils"; import { setupControlPanelServiceRegistry, toggleGroupByMenu, toggleMenuItem, toggleMenuItemOption } from "@web/../tests/search/helpers"; -import { COLORS, hexToRGBA } from "@web/views/graph/colors"; import { dialogService } from "@web/core/dialog/dialog_service"; -import { getGraphRenderer } from "@web/../tests/views/graph_view_tests"; import { makeView } from "@web/../tests/views/helpers"; import { registry } from "@web/core/registry"; import { makeFakeNotificationService } from "@web/../tests/helpers/mock_services"; @@ -80,91 +78,6 @@ QUnit.module("Project", {}, () => { QUnit.module("BurndownChart"); - QUnit.test("check if default mode is line chart and line chart is stacked for burndown chart", async function (assert) { - assert.expect(5); - - const burndownChart = await makeView(makeViewParams); - - assert.strictEqual(burndownChart.model.metaData.mode, "line", "should be in line chart mode."); - assert.ok(burndownChart.model.metaData.stacked, "should be stacked by default."); - - assert.ok(getGraphRenderer(burndownChart).getScaleOptions().yAxes.every(y => y.stacked), "the stacked property in y axes should be true when the stacked is enabled in line chart"); - assert.ok(getGraphRenderer(burndownChart).getElementOptions().line.fill, "The fill property should be true to add backgroundColor in line chart."); - - const actualDatasets = []; - const expectedDatasets = []; - const keysToEvaluate = ["backgroundColor", "borderColor", "originIndex", "pointBackgroundColor"]; - const datasets = getGraphRenderer(burndownChart).chart.data.datasets; - - for (let i = 0; i < datasets.length; i++) { - const dataset = datasets[i]; - const actualDataset = {}; - keysToEvaluate.forEach(key => { - if (dataset.hasOwnProperty(key)) { - actualDataset[key] = dataset[key]; - } - }); - actualDatasets.push(actualDataset); - - const expectedColor = COLORS[i]; - expectedDatasets.push({ - backgroundColor: hexToRGBA(expectedColor, 0.4), - borderColor: expectedColor, - originIndex: 0, - pointBackgroundColor: expectedColor, - }); - } - assert.deepEqual(actualDatasets, expectedDatasets); - }); - - QUnit.test("check if the stacked button is visible in the line chart", async function (assert) { - assert.expect(3); - const burndownChart = await makeView(makeViewParams); - assert.ok(burndownChart.model.metaData.stacked, "graph should be a burndown chart."); - assert.containsOnce(target, `button.o_graph_button[data-tooltip="Stacked"]`); - const stackButton = target.querySelector(`button.o_graph_button[data-tooltip="Stacked"]`); - await click(stackButton); - assert.notOk(burndownChart.model.metaData.stacked, "graph should be a classic line chart."); - }); - - QUnit.test("check if it is classic line chart when stacked prop is false in line chart", async function (assert) { - assert.expect(4); - - const burndownChart = await makeView(makeViewParams); - - const stackButton = target.querySelector(`button.o_graph_button[data-tooltip="Stacked"]`); - await click(stackButton); - assert.notOk(burndownChart.model.metaData.stacked, "graph should be a classic line chart."); - - assert.notOk(getGraphRenderer(burndownChart).getScaleOptions().yAxes.every(y => y.stacked), "the y axes should have a stacked property set to false since the stacked property in line chart is false."); - assert.notOk(getGraphRenderer(burndownChart).getElementOptions().line.fill, "The fill property should be false since the stacked property is false."); - - const actualDatasets = []; - const expectedDatasets = []; - const keysToEvaluate = ["backgroundColor", "borderColor", "originIndex", "pointBackgroundColor"]; - const datasets = getGraphRenderer(burndownChart).chart.data.datasets; - - for (let i = 0; i < datasets.length; i++) { - const dataset = datasets[i]; - const actualDataset = {}; - keysToEvaluate.forEach(key => { - if (dataset.hasOwnProperty(key)) { - actualDataset[key] = dataset[key]; - } - }); - actualDatasets.push(actualDataset); - - const expectedColor = COLORS[i]; - expectedDatasets.push({ - borderColor: expectedColor, - originIndex: 0, - pointBackgroundColor: expectedColor, - }); - } - - assert.deepEqual(actualDatasets, expectedDatasets); - }); - QUnit.test("check that the sort buttons are invisible", async function (assert) { await makeView(makeViewParams); assert.containsNone(target, '.o_cp_bottom_left:has(.btn-group[role=toolbar][aria-label="Sort graph"])', "The sort buttons are not rendered."); diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml index d0358ac4c51..ec97f5b03c6 100644 --- a/addons/web/static/src/views/graph/graph_controller.xml +++ b/addons/web/static/src/views/graph/graph_controller.xml @@ -18,7 +18,7 @@ t-on-click="() => this.onModeSelected('bar')" t-att-class="{ active: model.metaData.mode === 'bar' }" /> -