forked from Techsystech/web
[MIG] web_widget_json_graph: Migration to 15.0
Francisco Javier Luna Vazquez
parent
b9c1cae096
commit
893247b517
|
|
@ -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": [
|
||||
"views/assets.xml",
|
||||
"data": [],
|
||||
"assets": {
|
||||
"web.assets_backend": [
|
||||
"web_widget_json_graph/static/src/js/web_widget_json_graph.js",
|
||||
],
|
||||
"qweb": [
|
||||
"static/src/xml/web_widget_json_graph.xml",
|
||||
"web.assets_qweb": [
|
||||
"web_widget_json_graph/static/src/xml/web_widget_json_graph.xml",
|
||||
],
|
||||
"installable": True,
|
||||
},
|
||||
"auto_install": False,
|
||||
"installable": True,
|
||||
"application": False,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
* ``nolabel`` is ignored, this image will never bring a label, by default simply use an extra separator.
|
||||
* A graph will always use 100% of the width, pending the css dynamic attribute.
|
||||
* Height is harcoded.
|
||||
* None
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
'label_y': 'Y label',
|
||||
'data': data
|
||||
"type": "line",
|
||||
"data": {"datasets": [], "labels": []},
|
||||
"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']
|
||||
field_x = 'sequence'
|
||||
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})
|
||||
plot_dataset = [1, 2, 3, 4, 3, 2]
|
||||
labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
|
||||
info = {
|
||||
'label_x': 'Sequence',
|
||||
'label_y': '',
|
||||
'data': data
|
||||
"type": "line",
|
||||
"data": {"datasets": plot_dataset, "labels": labels},
|
||||
"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/>`.
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB After Width: | Height: | Size: 158 KiB |
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue