[REF] web: owl graph renderer

We convert the GraphRenderer widget to an OWL component.

Task ID: 2090967

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Florimond Husquinet <fhu@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>

addons/web/__manifest__.py

@@ -35,6 +35,7 @@ This module provides the core of the Odoo Web Client.
         "static/src/xml/report.xml",
         "static/src/xml/search_panel.xml",
         "static/src/xml/web_calendar.xml",
+        "static/src/xml/graph.xml",
     ],
     'bootstrap': True,  # load translations for login screen
 }

addons/web/static/src/js/views/abstract_renderer.js

@@ -134,7 +134,7 @@ return mvc.Renderer.extend({
     },
     /**
      * @private
-     * @param {Object} context
+     * @param {Object} [context]
      */
     _renderNoContentHelper: function (context) {
         let templateName;

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

@@ -53,13 +53,6 @@ var GraphController = AbstractController.extend({
         this.groupableFields = params.groupableFields;
         this.buttonDropdownPromises = [];
     },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$el.addClass('o_graph_controller');
-        return this._super.apply(this, arguments);
-    },
     /**
      * @todo check if this can be removed (mostly duplicate with
      * AbstractController method)
@@ -130,16 +123,16 @@ var GraphController = AbstractController.extend({
                 items: this.measures,
             });
             this.buttonDropdownPromises = [this.measureMenu.mount(fragment)];
+            if (this.isEmbedded) {
+                // Instantiate and append GroupBy menu
+                this.groupByMenu = new ComponentWrapper(this, CarretDropdownMenu, {
+                    title: "Group By",
+                    icon: 'fa fa-bars',
+                    items: this._getGroupBys(state.groupBy),
+                });
+                this.buttonDropdownPromises.push(this.groupByMenu.mount(fragment));
+            }
             if ($node) {
-                if (this.isEmbedded) {
-                    // Instantiate and append GroupBy menu
-                    this.groupByMenu = new ComponentWrapper(this, CarretDropdownMenu, {
-                        title: "Group By",
-                        icon: 'fa fa-bars',
-                        items: this._getGroupBys(state.groupBy),
-                    });
-                    this.buttonDropdownPromises.push(this.groupByMenu.mount(fragment));
-                }
                 this.$buttons.appendTo($node);
             }
         }

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

@@ -11,7 +11,8 @@ var AbstractView = require('web.AbstractView');
 var core = require('web.core');
 var GraphModel = require('web.GraphModel');
 var Controller = require('web.GraphController');
-var GraphRenderer = require('web.GraphRenderer');
+const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
+const RendererWrapper = require("web.RendererWrapper");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -155,6 +156,15 @@ var GraphView = AbstractView.extend({
         this.loadParams.comparisonDomain = params.comparisonDomain;
         this.loadParams.stacked = this.arch.attrs.stacked !== "False";
     },
+
+     /**
+     *
+     * @override
+     */
+    getRenderer(parent, props) {
+        props = Object.assign(props || {}, this.rendererParams);
+        return new RendererWrapper(null, this.config.Renderer, props);
+    },
 });
 
 return GraphView;

addons/web/static/src/scss/graph_view.scss

@@ -1,16 +1,14 @@
-.o_graph_controller {
-    .o_graph_renderer {
+.o_graph_renderer {
+    height: 100%;
+    .o_graph_canvas_container {
+        padding-top: 5px;
+        position: relative;
         height: 100%;
-        .o_graph_canvas_container {
-            padding-top: 5px;
-            position: relative;
-            height: 100%;
-            width: 100%;
-            top: 0px;
-            left: 0px;
-            canvas {
-                background-color: $o-view-background-color;
-            }
+        width: 100%;
+        top: 0px;
+        left: 0px;
+        canvas {
+            background-color: $o-view-background-color;
         }
     }
 
@@ -56,6 +54,7 @@
                 width: 12px;
                 display: inline-block;
                 vertical-align: middle;
+                margin-right: 5px;
             }
             span.o_label {
                 text-overflow: ellipsis;

addons/web/static/src/xml/base.xml

@@ -987,27 +987,6 @@
     </div>
 </t>
 
-<div t-name="GraphView.CustomTooltip" class="o_graph_custom_tooltip">
-    <table>
-        <thead>
-            <tr>
-                <th class="o_measure"><t t-esc="measure"/></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr t-foreach="tooltipItems" t-as="tooltipItem">
-                <td>
-                    <span class="o_square" t-att-style="'background-color: ' + tooltipItem.boxColor"/>
-                    <span class="o_label" t-att-style="'max-width: ' + maxWidth"> <t t-esc="tooltipItem.label" /> </span>
-                </td>
-                <td class="o_value">
-                    <t t-esc="tooltipItem.value"/>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
 <t t-name="PivotView.buttons">
     <div class="btn-group" role="toolbar" aria-label="Main actions">
         <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

addons/web/static/src/xml/graph.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates>
+
+    <t t-name="web.GraphRenderer" owl="1">
+        <div class="o_graph_renderer">
+            <label t-if="props.title" t-esc="props.title"/>
+            <t t-if="noContentHelperData" t-call="web.NoContentHelper">
+                <t t-set="title" t-value="noContentHelperData.title"/>
+                <t t-set="description" t-value="noContentHelperData.description"/>
+            </t>
+            <t t-else="">
+                <t t-if="props.isSample and !props.isEmbedded and props.noContentHelp" t-call="web.ActionHelper">
+                    <t t-set="noContentHelp" t-value="props.noContentHelp"/>
+                </t>
+                <div class="o_graph_canvas_container" t-ref="container">
+                    <canvas t-ref="canvas"/>
+                </div>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
+        <div class="o_graph_custom_tooltip">
+            <table>
+                <thead>
+                    <tr>
+                        <th class="o_measure" t-esc="measure"/>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem.id">
+                        <td>
+                            <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"/>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+</templates>

addons/web/static/tests/views/form_tests.js

@@ -9571,7 +9571,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('reload a form view with a pie chart does not crash', async function (assert) {
-        assert.expect(3);
+        assert.expect(2);
 
         const form = await createView({
             View: FormView,
@@ -9583,15 +9583,11 @@ QUnit.module('Views', {
         });
 
         assert.containsOnce(form, '.o_widget');
-        const canvasId1 = form.el.querySelector('.o_widget canvas').id;
 
         await form.reload();
         await testUtils.nextTick();
 
         assert.containsOnce(form, '.o_widget');
-        const canvasId2 = form.el.querySelector('.o_widget canvas').id;
-        // A new canvas should be found in the dom
-        assert.notStrictEqual(canvasId1, canvasId2);
 
         form.destroy();
         delete widgetRegistry.map.test;
@@ -9621,7 +9617,7 @@ QUnit.module('Views', {
 
         form.destroy();
         delete fieldRegistryOwl.map.custom;
-        
+
         assert.verifySteps(['mounted', 'willUnmount']);
     });
 });