[MIG] web_widget_json_graph: Migration to 15.0

web_widget_json_graph/static/src/js/web_widget_json_graph.js

@@ -1,41 +1,25 @@
 odoo.define("web.web_widget_json_graph", function (require) {
     "use strict";
 
+    var ajax = require("web.ajax");
     var AbstractField = require("web.AbstractField");
     var field_registry = require("web.field_registry");
 
     var JSONGraphWidget = AbstractField.extend({
-        template: "JSONGraph",
-        cssLibs: ["/web/static/lib/nvd3/nv.d3.css"],
-        jsLibs: [
-            "/web/static/lib/nvd3/d3.v3.js",
-            "/web/static/lib/nvd3/nv.d3.js",
-            "/web/static/src/js/libs/nvd3.js",
-        ],
-        _render: function () {
-            var info = JSON.parse(this.value);
-            /* Jsl:ignore*/
-            /*
-            Ignoring lint erros caused by nv and d3 variables from NVD3.js
-            */
-            if (info) {
-                nv.addGraph(function () {
-                    var chart = nv.models.lineChart().useInteractiveGuideline(true);
-                    chart.xAxis.axisLabel(info.label_x).tickFormat(d3.format(",r"));
-
-                    chart.yAxis.axisLabel(info.label_y).tickFormat(d3.format(".02f"));
-
-                    d3.select(".nv_content svg")
-                        .datum(info.data)
-                        .transition()
-                        .duration(500)
-                        .call(chart);
-                    nv.utils.windowResize(chart.update);
-
-                    return chart;
-                });
-            }
-            /* Jsl:end*/
+        jsLibs: ["/web/static/lib/Chart/Chart.js"],
+        willStart: function () {
+            this._super();
+            return ajax.loadLibs(this);
+        },
+        start: function () {
+            var config = JSON.parse(this.value);
+            this.$canvas = $("<canvas/>");
+            this.$el.empty();
+            this.$el.append(this.$canvas);
+            var context = this.$canvas[0].getContext("2d");
+            // eslint-disable-next-line no-undef
+            this.chart = new Chart(context, config);
+            return this.chart;
         },
         _destroy: function () {
             return this._super();

web_widget_json_graph/static/src/scss/web_widget_json_graph.scss

@@ -1,31 +0,0 @@
-.oe_form_field_json_graph {
-    th.oe_link {
-        cursor: pointer;
-    }
-
-    .nv-axis path,
-    .nv-axis line {
-        fill: none;
-        stroke: #000;
-        shape-rendering: crispEdges;
-    }
-
-    .nv-x.nv-axis path {
-        display: none;
-    }
-
-    .line {
-        fill: none;
-        stroke: steelblue;
-        stroke-width: 1.5px;
-    }
-
-    .oe_list_content > tbody > tr > td.oe_list_field_cell {
-        white-space: normal;
-    }
-
-    svg.nvd3-svg {
-        height: 500px;
-        width: 1000px;
-    }
-}

web_widget_json_graph/static/src/xml/web_widget_json_graph.xml

@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
     <t t-name="JSONGraph">
-        <div class="oe_form_field_json_graph">
-            <div class="nv_content">
-                <svg />
-            </div>
-        </div>
+        <canvas />
     </t>
 </odoo>