[15.0][MIG] web_widget_mpld3_chart

web_widget_mpld3_chart/README.rst

@@ -14,13 +14,13 @@ Web Widget mpld3 Chart
     :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
     :alt: License: LGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/14.0/web_widget_mpld3_chart
+    :target: https://github.com/OCA/web/tree/15.0/web_widget_mpld3_chart
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-14-0/web-14-0-web_widget_mpld3_chart
+    :target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_mpld3_chart
     :alt: Translate me on Weblate
 .. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
-    :target: https://runbot.odoo-community.org/runbot/162/14.0
+    :target: https://runbot.odoo-community.org/runbot/162/15.0
     :alt: Try me on Runbot
 
 |badge1| |badge2| |badge3| |badge4| |badge5| 
@@ -48,9 +48,14 @@ Usage
 
 To insert a mpld3 chart in a view proceed as follows:
 
+#. You should inherit from abstract class abstract.mpld3.parser::
+
+    _name = 'res.partner'
+    _inherit = ['res.partner', 'abstract.mpld3.parser']
+
 #. Import the required libraries::
 
-    import matplotlib.pyplot as plt, mpld3
+    import matplotlib.pyplot as plt
 
 #. Declare a text computed field like this::
 
@@ -66,7 +71,7 @@ To insert a mpld3 chart in a view proceed as follows:
             # Design your mpld3 figure:
             plt.scatter([1, 10], [5, 9])
             figure = plt.figure()
-            rec.mpld3_chart = mpld3.fig_to_html(figure)
+            rec.mpld3_chart = self.convert_figure_to_json(figure)
 
 #. In the view, add something like this wherever you want to display your
    mpld3 chart::
@@ -81,7 +86,7 @@ Bug Tracker
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_mpld3_chart%0Aversion:%2014.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_mpld3_chart%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -97,6 +102,7 @@ Contributors
 ~~~~~~~~~~~~
 
 * Jordi Ballester Alomar <jordi.ballester@forgeflow.com>
+* Christopher Ormaza <chris.ormaza@forgeflow.com>
 
 Other credits
 ~~~~~~~~~~~~~
@@ -119,6 +125,17 @@ OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.
 
-This module is part of the `OCA/web <https://github.com/OCA/web/tree/14.0/web_widget_mpld3_chart>`_ project on GitHub.
+.. |maintainer-JordiBForgeFlow| image:: https://github.com/JordiBForgeFlow.png?size=40px
+    :target: https://github.com/JordiBForgeFlow
+    :alt: JordiBForgeFlow
+.. |maintainer-ChrisOForgeFlow| image:: https://github.com/ChrisOForgeFlow.png?size=40px
+    :target: https://github.com/ChrisOForgeFlow
+    :alt: ChrisOForgeFlow
+
+Current `maintainers <https://odoo-community.org/page/maintainer-role>`__:
+
+|maintainer-JordiBForgeFlow| |maintainer-ChrisOForgeFlow| 
+
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/15.0/web_widget_mpld3_chart>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

web_widget_mpld3_chart/__init__.py

@@ -1 +1,2 @@
 # License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
+from . import models

web_widget_mpld3_chart/__manifest__.py

@@ -6,11 +6,18 @@
     "category": "Hidden",
     "summary": "This widget allows to display charts using MPLD3 library.",
     "author": "ForgeFlow, Odoo Community Association (OCA)",
-    "version": "14.0.1.0.0",
+    "version": "15.0.1.0.0",
     "website": "https://github.com/OCA/web",
     "depends": ["web"],
-    "data": ["views/web_widget_mpld3_chart.xml"],
+    "data": [],
-    "external_dependencies": {"python": ["mpld3"]},
+    "external_dependencies": {"python": ["mpld3", "beautifulsoup4"]},
     "auto_install": False,
+    "development_status": "Beta",
+    "maintainers": ["JordiBForgeFlow", "ChrisOForgeFlow"],
     "license": "LGPL-3",
+    "assets": {
+        "web.assets_backend": [
+            "web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.esm.js",
+        ],
+    },
 }

web_widget_mpld3_chart/models/__init__.py

@@ -0,0 +1 @@
+from . import abstract_mpld3_parser

web_widget_mpld3_chart/models/abstract_mpld3_parser.py

@@ -0,0 +1,33 @@
+# Copyright 2022 ForgeFlow S.L.
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+
+import json
+import logging
+
+from odoo import api, models
+
+_logger = logging.getLogger(__name__)
+
+try:
+    import mpld3
+    from bs4 import BeautifulSoup
+except (ImportError, IOError) as err:
+    _logger.debug(err)
+
+
+class AbstractMpld3Parser(models.AbstractModel):
+
+    _name = "abstract.mpld3.parser"
+    _description = "Utility to parse ploot figure to json data for widget Mpld3"
+
+    @api.model
+    def convert_figure_to_json(self, figure):
+        html_string = mpld3.fig_to_html(figure, no_extras=True, include_libraries=False)
+        soup = BeautifulSoup(html_string, "lxml")
+        json_data = {
+            "style": soup.style.decode(),
+            "div": soup.div.get("id"),
+            "script": soup.script.decode_contents(),
+        }
+        return json.dumps(json_data)

web_widget_mpld3_chart/readme/CONTRIBUTORS.rst

@@ -1 +1,2 @@
 * Jordi Ballester Alomar <jordi.ballester@forgeflow.com>
+* Christopher Ormaza <chris.ormaza@forgeflow.com>

web_widget_mpld3_chart/readme/CREDITS.rst

@@ -1,4 +1,8 @@
 * This module uses the library `mpld3 <https://github.com/mpld3/mpld3>`__
   which is under the open-source BSD 3-clause "New" or "Revised" License.
   Copyright (c) 2013, Jake Vanderplas
+* This module uses the library `BeautifulSoup 4 <https://pypi.org/project/beautifulsoup4/>`__
+  which is under the open-source MIT License.
+  Copyright (c) 2014, Leonard Richardson
+
 * Odoo Community Association (OCA)

web_widget_mpld3_chart/readme/USAGE.rst

@@ -1,8 +1,13 @@
 To insert a mpld3 chart in a view proceed as follows:
 
+#. You should inherit from abstract class abstract.mpld3.parser::
+
+    _name = 'res.partner'
+    _inherit = ['res.partner', 'abstract.mpld3.parser']
+
 #. Import the required libraries::
 
-    import matplotlib.pyplot as plt, mpld3
+    import matplotlib.pyplot as plt
 
 #. Declare a text computed field like this::
 
@@ -18,7 +23,7 @@ To insert a mpld3 chart in a view proceed as follows:
             # Design your mpld3 figure:
             plt.scatter([1, 10], [5, 9])
             figure = plt.figure()
-            rec.mpld3_chart = mpld3.fig_to_html(figure)
+            rec.mpld3_chart = self.convert_figure_to_json(figure)
 
 #. In the view, add something like this wherever you want to display your
    mpld3 chart::

web_widget_mpld3_chart/static/description/index.html

@@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
 <title>Web Widget mpld3 Chart</title>
 <style type="text/css">
 
@@ -367,7 +367,7 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/14.0/web_widget_mpld3_chart"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-14-0/web-14-0-web_widget_mpld3_chart"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/14.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_mpld3_chart"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_mpld3_chart"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/15.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
 <p>This module adds the possibility to insert mpld3 charts into Odoo standard views.
 This is an interactive D3js-based viewer which brings matplotlib graphics to the browser.</p>
 <p>If you want to see some samples of mpld3’s capabilities follow this <a class="reference external" href="http://mpld3.github.io/">link</a>.</p>
@@ -397,9 +397,15 @@ pip install mpld3
 <h1><a class="toc-backref" href="#id2">Usage</a></h1>
 <p>To insert a mpld3 chart in a view proceed as follows:</p>
 <ol class="arabic">
+<li><p class="first">You should inherit from abstract class abstract.mpld3.parser:</p>
+<pre class="literal-block">
+_name = 'res.partner'
+_inherit = ['res.partner', 'abstract.mpld3.parser']
+</pre>
+</li>
 <li><p class="first">Import the required libraries:</p>
 <pre class="literal-block">
-import matplotlib.pyplot as plt, mpld3
+import matplotlib.pyplot as plt
 </pre>
 </li>
 <li><p class="first">Declare a text computed field like this:</p>
@@ -417,7 +423,7 @@ def _compute_mpld3_chart(self):
         # Design your mpld3 figure:
         plt.scatter([1, 10], [5, 9])
         figure = plt.figure()
-        rec.mpld3_chart = mpld3.fig_to_html(figure)
+        rec.mpld3_chart = self.convert_figure_to_json(figure)
 </pre>
 </li>
 <li><p class="first">In the view, add something like this wherever you want to display your
@@ -435,7 +441,7 @@ mpld3 chart:</p>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_mpld3_chart%0Aversion:%2014.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_mpld3_chart%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@@ -450,6 +456,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <h2><a class="toc-backref" href="#id6">Contributors</a></h2>
 <ul class="simple">
 <li>Jordi Ballester Alomar &lt;<a class="reference external" href="mailto:jordi.ballester&#64;forgeflow.com">jordi.ballester&#64;forgeflow.com</a>&gt;</li>
+<li>Christopher Ormaza &lt;<a class="reference external" href="mailto:chris.ormaza&#64;forgeflow.com">chris.ormaza&#64;forgeflow.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="other-credits">
@@ -468,7 +475,9 @@ Copyright (c) 2013, Jake Vanderplas</li>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/14.0/web_widget_mpld3_chart">OCA/web</a> project on GitHub.</p>
+<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</p>
+<p><a class="reference external" href="https://github.com/JordiBForgeFlow"><img alt="JordiBForgeFlow" src="https://github.com/JordiBForgeFlow.png?size=40px" /></a> <a class="reference external" href="https://github.com/ChrisOForgeFlow"><img alt="ChrisOForgeFlow" src="https://github.com/ChrisOForgeFlow.png?size=40px" /></a></p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_mpld3_chart">OCA/web</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>

web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.esm.js

@@ -0,0 +1,31 @@
+/** @odoo-module **/
+
+import basicFields from "web.basic_fields";
+import fieldRegistry from "web.field_registry";
+
+const Mpld3ChartWidget = basicFields.FieldChar.extend({
+    jsLibs: [
+        "/web_widget_mpld3_chart/static/src/lib/d3/d3.v5.js",
+        "/web_widget_mpld3_chart/static/src/lib/mpld3/mpld3.v0.5.7.js",
+    ],
+    _renderReadonly: function () {
+        try {
+            const val = JSON.parse(this.value);
+            const new_div = document.createElement("div");
+            new_div.setAttribute("id", val.div);
+            this.$el.html(new_div);
+            this.$el.ready(function () {
+                const script = document.createElement("script");
+                script.setAttribute("type", "text/javascript");
+                if ("textContent" in script) script.textContent = val.script;
+                else script.text = val.script;
+                $("head").append(script);
+            });
+        } catch (error) {
+            return this._super(...arguments);
+        }
+    },
+});
+
+fieldRegistry.add("mpld3_chart", Mpld3ChartWidget);
+export default Mpld3ChartWidget;

web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.js

@@ -1,17 +0,0 @@
-odoo.define("web_widget_mpld3_chart", function (require) {
-    "use strict";
-
-    var fieldRegistry = require("web.field_registry");
-    var AbstractField = require("web.AbstractField");
-
-    var Mpld3ChartWidget = AbstractField.extend({
-        start: function () {
-            var val = this.value;
-            this.$el.html(val);
-        },
-    });
-    fieldRegistry.add("mpld3_chart", Mpld3ChartWidget);
-    return {
-        Mpld3ChartWidget: Mpld3ChartWidget,
-    };
-});

web_widget_mpld3_chart/views/web_widget_mpld3_chart.xml

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<odoo>
-    <template
-        id="assets_backend"
-        name="web_widget_mpld3_chart assets"
-        inherit_id="web.assets_backend"
-    >
-        <xpath expr="." position="inside">
-            <script
-                type="text/javascript"
-                src="/web_widget_mpld3_chart/static/src/lib/d3/d3.v3.min.js"
-            />
-            <script
-                type="text/javascript"
-                src="/web_widget_mpld3_chart/static/src/lib/mpld3/mpld3.v0.3.1.dev1.js"
-            />
-            <script
-                type="text/javascript"
-                src="/web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.js"
-            />
-        </xpath>
-    </template>
-</odoo>