add web_widget_mpld3_chart

web_widget_mpld3_chart/__init__.py

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

web_widget_mpld3_chart/__manifest__.py

@@ -0,0 +1,21 @@
+# Copyright 2020 ForgeFlow, S.L.
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
+
+{
+    "name": "Web Widget mpld3 Chart",
+    "category": "Hidden",
+    "summary": "This widget allows to display charts using MPLD3 library.",
+    "author": "ForgeFlow, "
+              "Odoo Community Association (OCA)",
+    "version": "13.0.1.0.0",
+    "website": "https://github.com/OCA/web",
+    "depends": ["web"],
+    "data": [
+        "views/web_widget_mpld3_chart.xml",
+    ],
+    "external_dependencies": {
+        "python": ['mpld3'],
+    },
+    "auto_install": False,
+    "license": "LGPL-3",
+}

web_widget_mpld3_chart/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Jordi Ballester Alomar <jordi.ballester@forgeflow.com>

web_widget_mpld3_chart/readme/CREDITS.rst

@@ -0,0 +1,4 @@
+* 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
+* Odoo Community Association (OCA)

web_widget_mpld3_chart/readme/DESCRIPTION.rst

@@ -0,0 +1,5 @@
+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.
+
+If you want to see some samples of mpld3's capabilities follow this `link
+<http://mpld3.github.io/>`_.

web_widget_mpld3_chart/readme/INSTALL.rst

@@ -0,0 +1,3 @@
+You need to install the python mpld3 library::
+
+    pip install mpld3

web_widget_mpld3_chart/readme/USAGE.rst

@@ -0,0 +1,28 @@
+To insert a mpld3 chart in a view proceed as follows:
+
+#. Import the required libraries::
+
+    import matplotlib.pyplot as plt, mpld3
+
+#. Declare a text computed field like this::
+
+    mpld3_chart = fields.Text(
+        string='Mpld3 Chart',
+        compute='_compute_mpld3_chart',
+    )
+
+#. In its computed method do::
+
+    def _compute_mpld3_chart(self):
+        for rec in self:
+            # Design your mpld3 figure:
+            plt.scatter([1, 10], [5, 9])
+            figure = plt.figure()
+            rec.mpld3_chart = mpld3.fig_to_html(figure)
+
+#. In the view, add something like this wherever you want to display your
+   mpld3 chart::
+
+    <div>
+        <field name="mpld3_chart" widget="mpld3_chart" nolabel="1"/>
+    </div>

web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.js

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,11 @@
+<?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>