[IMP] web_widget_mpld3_chart: Move widget from CharField to Component(Json field)

web_widget_mpld3_chart/README.rst

@@ -59,7 +59,7 @@ To insert a mpld3 chart in a view proceed as follows:
 
 #. Declare a text computed field like this::
 
-    mpld3_chart = fields.Text(
+    mpld3_chart = fields.Json(
         string='Mpld3 Chart',
         compute='_compute_mpld3_chart',
     )

web_widget_mpld3_chart/models/abstract_mpld3_parser.py

@@ -2,7 +2,6 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
 
 
-import json
 import logging
 
 from odoo import api, models
@@ -26,8 +25,7 @@ class AbstractMpld3Parser(models.AbstractModel):
         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": str(soup.div),
             "script": soup.script.decode_contents(),
         }
-        return json.dumps(json_data)
+        return json_data

web_widget_mpld3_chart/readme/USAGE.rst

@@ -9,9 +9,9 @@ To insert a mpld3 chart in a view proceed as follows:
 
     import matplotlib.pyplot as plt
 
-#. Declare a text computed field like this::
+#. Declare a json computed field like this::
 
-    mpld3_chart = fields.Text(
+    mpld3_chart = fields.Json(
         string='Mpld3 Chart',
         compute='_compute_mpld3_chart',
     )

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

@@ -1,12 +1,22 @@
 /** @odoo-module **/
 
-import {CharField} from "@web/views/fields/char/char_field";
 import {loadBundle} from "@web/core/assets";
 import {registry} from "@web/core/registry";
-const {onWillStart, markup} = owl;
-class Mpld3ChartWidget extends CharField {
+const {onWillStart, markup, Component, onMounted, onPatched, useRef} = owl;
+
+class Mpld3ChartJsonWidget extends Component {
     setup() {
-        super.setup();
+        this.widget = useRef("widget");
+        onPatched(() => {
+            var script = document.createElement("script");
+            script.text = this.props.value.script;
+            this.widget.el.append(script);
+        });
+        onMounted(() => {
+            var script = document.createElement("script");
+            script.text = this.props.value.script;
+            this.widget.el.append(script);
+        });
         onWillStart(() =>
             loadBundle({
                 jsLibs: [
@@ -16,17 +26,12 @@ class Mpld3ChartWidget extends CharField {
             })
         );
     }
-    get json_value() {
-        try {
-            var value = JSON.parse(this.props.value);
-            value.div = markup(value.div.trim());
-            return value;
-        } catch (error) {
-            return {};
-        }
+    markup(value) {
+        console.log("Marking up...");
+        return markup(value);
     }
 }
-Mpld3ChartWidget.template = "web_widget_mpld3_chart.Mpld3ChartField";
-registry.category("fields").add("mpld3_chart", Mpld3ChartWidget);
+Mpld3ChartJsonWidget.template = "web_widget_mpld3_chart.Mpld3ChartJsonWidget";
+registry.category("fields").add("mpld3_chart", Mpld3ChartJsonWidget);
 
-export default Mpld3ChartWidget;
+export default Mpld3ChartJsonWidget;

web_widget_mpld3_chart/static/src/xml/web_widget_mpld3_chart.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-   <t t-name="web_widget_mpld3_chart.Mpld3ChartField" owl="1">
-       <t t-out="json_value.div" />
-       <script type="text/javascript" t-out="json_value.script" />
-    </t>
+    <div t-ref="widget" t-name="web_widget_mpld3_chart.Mpld3ChartJsonWidget" owl="1">
+        <t t-if="props.value.div" t-out="markup(props.value.div)" />
+    </div>
 </templates>