[ADD] web_widget_json_graph: Module to Draw json fields with graphs (#1733)

This module allows to load a line graph per ordered pair from an
One2many or
Many2many field.

Co-Authored-By: Francisco Luna <fluna@vauxoo.com>
Co-Authored-By: José Robles <josemanuel@vauxoo.com>
Co-Authored-By: Luis González <lgonzalez@vauxoo.com>
Co-Authored-By: Nhomar Hernández <nhomar@vauxoo.com>

Co-authored-by: Francisco Luna <fluna@vauxoo.com>
Co-authored-by: José Robles <josemanuel@vauxoo.com>
Co-authored-by: Nhomar Hernández <nhomar@vauxoo.com>

web_widget_json_graph/static/src/js/web_widget_json_graph.js

@@ -0,0 +1,52 @@
+odoo.define('web.web_widget_json_graph', function (require) {
+    "use strict";
+
+    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*/
+        },
+        _destroy: function () {
+            return this._super();
+        },
+    });
+    field_registry.add('json_graph', JSONGraphWidget);
+
+});

web_widget_json_graph/static/src/scss/web_widget_json_graph.scss

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

@@ -0,0 +1,10 @@
+<?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>
+    </t>
+</odoo>