From 6467da0ef4922f8983d34844228436f522054237 Mon Sep 17 00:00:00 2001
From: BernatPForgeFlow <bernat.puig@forgeflow.com>
Date: Thu, 30 Nov 2023 11:57:10 +0100
Subject: [PATCH] [IMP] web_widget_mpld3_chart: Move widget from CharField to
 Component(Json field)

---
 web_widget_mpld3_chart/README.rst             |  6 ++--
 .../models/abstract_mpld3_parser.py           |  4 +--
 web_widget_mpld3_chart/readme/USAGE.rst       |  4 +--
 .../src/js/web_widget_mpld3_chart.esm.js      | 35 +++++++++++--------
 .../static/src/xml/web_widget_mpld3_chart.xml |  7 ++--
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/web_widget_mpld3_chart/README.rst b/web_widget_mpld3_chart/README.rst
index a19561e71..572e627d3 100644
--- a/web_widget_mpld3_chart/README.rst
+++ b/web_widget_mpld3_chart/README.rst
@@ -23,7 +23,7 @@ Web Widget mpld3 Chart
     :target: https://runbot.odoo-community.org/runbot/162/15.0
     :alt: Try me on Runbot
 
-|badge1| |badge2| |badge3| |badge4| |badge5| 
+|badge1| |badge2| |badge3| |badge4| |badge5|
 
 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.
@@ -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',
     )
@@ -138,7 +138,7 @@ promote its widespread use.
 
 Current `maintainers <https://odoo-community.org/page/maintainer-role>`__:
 
-|maintainer-JordiBForgeFlow| |maintainer-ChrisOForgeFlow| 
+|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.
 
diff --git a/web_widget_mpld3_chart/models/abstract_mpld3_parser.py b/web_widget_mpld3_chart/models/abstract_mpld3_parser.py
index a14b4cd62..2c778c7a8 100644
--- a/web_widget_mpld3_chart/models/abstract_mpld3_parser.py
+++ b/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
diff --git a/web_widget_mpld3_chart/readme/USAGE.rst b/web_widget_mpld3_chart/readme/USAGE.rst
index 5a0da5062..df9ad0640 100644
--- a/web_widget_mpld3_chart/readme/USAGE.rst
+++ b/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',
     )
diff --git a/web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.esm.js b/web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.esm.js
index f87e042ea..1f6d284af 100644
--- a/web_widget_mpld3_chart/static/src/js/web_widget_mpld3_chart.esm.js
+++ b/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;
diff --git a/web_widget_mpld3_chart/static/src/xml/web_widget_mpld3_chart.xml b/web_widget_mpld3_chart/static/src/xml/web_widget_mpld3_chart.xml
index 32ae24352..8f412da48 100644
--- a/web_widget_mpld3_chart/static/src/xml/web_widget_mpld3_chart.xml
+++ b/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>