[MIG] web_widget_json_graph: Migration to 15.0

web_widget_json_graph/__manifest__.py

@@ -1,22 +1,28 @@
 {
     "name": "Web Widget JSON Graph",
-    "version": "12.0.1.0.0",
+    "version": "15.0.1.0.0",
     "author": "Vauxoo, Odoo Community Association (OCA)",
     "license": "LGPL-3",
     "category": "Hidden/Dependency",
     "website": "https://github.com/OCA/web",
-    "maintainers": ["luisg123v"],
+    "maintainers": [
+        "luisg123v",
+        "frahikLV",
+    ],
     "summary": "Draw json fields with graphs.",
     "depends": [
         "web",
     ],
-    "data": [
+    "data": [],
-        "views/assets.xml",
+    "assets": {
-    ],
+        "web.assets_backend": [
-    "qweb": [
+            "web_widget_json_graph/static/src/js/web_widget_json_graph.js",
-        "static/src/xml/web_widget_json_graph.xml",
+        ],
-    ],
+        "web.assets_qweb": [
-    "installable": True,
+            "web_widget_json_graph/static/src/xml/web_widget_json_graph.xml",
+        ],
+    },
     "auto_install": False,
+    "installable": True,
     "application": False,
 }

web_widget_json_graph/readme/ROADMAP.rst

@@ -1,3 +1 @@
-* ``nolabel`` is ignored, this image will never bring a label, by default simply use an extra separator.
+* None
-* A graph will always use 100% of the width, pending the css dynamic attribute.
-* Height is harcoded.

web_widget_json_graph/readme/USAGE.rst

@@ -8,60 +8,56 @@ For example::
 
 The JSON needs to be like::
 
-    fields = ['field1', 'field2', 'field3', ...]
-    field_x = 'field_x'
-    dictionary = self.value_ids.sorted(field_x).read(fields)
-    color = {
-        'field1': HEXCOLOR1,
-        'field2': '#FFBB78',
-        'field3': '#1F77B4',
-        ...
-    }
-    dictionary = self.value_ids.sorted(field_x).read(fields)
-    content = {}
-    data = []
-    for field in fields:
-        if field != field_x:
-            content[field] = []
-            for rec in dictionary:
-                content[field].append({'x': rec[field_x], 'y': rec[field]})
-            if field in color:
-                data.append({'values': content[field], 'key': field,
-                    'color': color[field]})
-                continue
-            data.append({'values': content[field], 'key': field})
     info = {
-        'label_x': 'X Label',
+        "type": "line",
-        'label_y': 'Y label',
+        "data": {"datasets": [], "labels": []},
-        'data': data
+        "options": {
+            "scales": {
+                "yAxes": [
+                    {
+                        "ticks": {"beginAtZero": True, "stacked": False},
+                        "scaleLabel": {"display": True, "labelString": "Quantity"},
+                    }
+                ],
+                "xAxes": [
+                    {
+                        "scaleLabel": {"display": True, "labelString": "Date"},
+                    }
+                ],
+            },
+            "elements": {"point": {"radius": 3}},
+            "legend": {"labels": {"usePointStyle": True}},
+            "tooltips": {"intersect": False, "axis": "xy", "mode": "index"},
+        },
     }
     self.field_text_json = json.dumps(info)
 
 For example::
 
-    fields = ['sequence', 'value', 'sma', 'cma']
+    plot_dataset = [1, 2, 3, 4, 3, 2]
-    field_x = 'sequence'
+    labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
-    dictionary = self.value_ids.sorted(field_x).read(fields)
-    color = {
-        'value': '#2CA02C',
-        'sma': '#FFBB78'
-    }
-    dictionary = self.value_ids.sorted(field_x).read(fields)
-    content = {}
-    data = []
-    for field in fields:
-        if field != field_x:
-            content[field] = []
-            for rec in dictionary:
-                content[field].append({'x': rec[field_x], 'y': rec[field]})
-            if field in color:
-                data.append({'values': content[field], 'key': field,
-                    'color': color[field]})
-                continue
-            data.append({'values': content[field], 'key': field})
     info = {
-        'label_x': 'Sequence',
+        "type": "line",
-        'label_y': '',
+        "data": {"datasets": plot_dataset, "labels": labels},
-        'data': data
+        "options": {
+            "scales": {
+                "yAxes": [
+                    {
+                        "ticks": {"beginAtZero": True, "stacked": False},
+                        "scaleLabel": {"display": True, "labelString": "Quantity"},
+                    }
+                ],
+                "xAxes": [
+                    {
+                        "scaleLabel": {"display": True, "labelString": "Date"},
+                    }
+                ],
+            },
+            "elements": {"point": {"radius": 3}},
+            "legend": {"labels": {"usePointStyle": True}},
+            "tooltips": {"intersect": False, "axis": "xy", "mode": "index"},
+        },
     }
     self.values_data = json.dumps(info)
+
+For more information, please see `Chart Js Documentation <https://www.chartjs.org/docs/2.9.4/>`.

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",
+        jsLibs: ["/web/static/lib/Chart/Chart.js"],
-        cssLibs: ["/web/static/lib/nvd3/nv.d3.css"],
+        willStart: function () {
-        jsLibs: [
+            this._super();
-            "/web/static/lib/nvd3/d3.v3.js",
+            return ajax.loadLibs(this);
-            "/web/static/lib/nvd3/nv.d3.js",
+        },
-            "/web/static/src/js/libs/nvd3.js",
+        start: function () {
-        ],
+            var config = JSON.parse(this.value);
-        _render: function () {
+            this.$canvas = $("<canvas/>");
-            var info = JSON.parse(this.value);
+            this.$el.empty();
-            /* Jsl:ignore*/
+            this.$el.append(this.$canvas);
-            /*
+            var context = this.$canvas[0].getContext("2d");
-            Ignoring lint erros caused by nv and d3 variables from NVD3.js
+            // eslint-disable-next-line no-undef
-            */
+            this.chart = new Chart(context, config);
-            if (info) {
+            return this.chart;
-                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*/
         },
         _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">
+        <canvas />
-            <div class="nv_content">
-                <svg />
-            </div>
-        </div>
     </t>
 </odoo>

web_widget_json_graph/views/assets.xml

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<odoo>
-
-    <template
-        id="assets_backend"
-        name="web_widget_json_graph assets"
-        inherit_id="web.assets_backend"
-    >
-        <xpath expr="." position="inside">
-            <script
-                type="text/javascript"
-                src="/web_widget_json_graph/static/src/js/web_widget_json_graph.js"
-            />
-            <link
-                rel="stylesheet"
-                type="text/scss"
-                href="/web_widget_json_graph/static/src/scss/web_widget_json_graph.scss"
-            />
-        </xpath>
-    </template>
-
-</odoo>