[MOV] account, web: move account widget to web
Move the "dashboard_graph" widget to web. It converts a Text field containing data to a graph. As it is a generic widget, it can (and will) be used elsewhere.
This commit is contained in:
Denis Vermylen (dve)
committed by
DVE
DVE
parent
e3f99885ca
commit
309f1672c2
@@ -1,100 +0,0 @@
|
||||
odoo.define('journal_dashboard', function (require) {
|
||||
'use strict';
|
||||
|
||||
var kanban_widgets = require('web_kanban.widgets');
|
||||
|
||||
var JournalDashboardGraph = kanban_widgets.AbstractField.extend({
|
||||
start: function() {
|
||||
this.graph_type = this.$node.attr('graph_type');
|
||||
this.data = JSON.parse(this.field.raw_value);
|
||||
this.display_graph();
|
||||
return this._super();
|
||||
},
|
||||
|
||||
display_graph : function() {
|
||||
var self = this;
|
||||
nv.addGraph(function () {
|
||||
self.$svg = self.$el.append('<svg>');
|
||||
|
||||
switch(self.graph_type) {
|
||||
|
||||
case "line":
|
||||
self.$svg.addClass('o_graph_linechart');
|
||||
|
||||
self.chart = nv.models.lineChart();
|
||||
self.chart.forceY([0]);
|
||||
self.chart.options({
|
||||
x: function(d, u) { return u },
|
||||
margin: {'left': 0, 'right': 0, 'top': 0, 'bottom': 0},
|
||||
showYAxis: false,
|
||||
showLegend: false,
|
||||
});
|
||||
self.chart.xAxis
|
||||
.tickFormat(function(d) {
|
||||
var label = '';
|
||||
_.each(self.data, function(v, k){
|
||||
if (v.values[d] && v.values[d].x){
|
||||
label = v.values[d].x;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
});
|
||||
self.chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
break;
|
||||
|
||||
case "bar":
|
||||
self.$svg.addClass('o_graph_barchart');
|
||||
|
||||
self.chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.showValues(false)
|
||||
.showYAxis(false)
|
||||
.margin({'left': 0, 'right': 0, 'top': 0, 'bottom': 40});
|
||||
|
||||
self.chart.xAxis.axisLabel(self.data[0].title);
|
||||
self.chart.yAxis.tickFormat(d3.format(',.2f'));
|
||||
|
||||
break;
|
||||
}
|
||||
d3.select(self.$el.find('svg')[0])
|
||||
.datum(self.data)
|
||||
.transition().duration(1200)
|
||||
.call(self.chart);
|
||||
|
||||
self.customize_chart();
|
||||
|
||||
nv.utils.windowResize(self.on_resize);
|
||||
});
|
||||
},
|
||||
|
||||
on_resize: function(){
|
||||
this.chart.update();
|
||||
this.customize_chart();
|
||||
},
|
||||
|
||||
customize_chart: function(){
|
||||
if (this.graph_type === 'bar') {
|
||||
// Add classes related to time on each bar of the bar chart
|
||||
var bar_classes = _.map(this.data[0].values, function (v, k) {return v.type});
|
||||
|
||||
_.each(this.$('.nv-bar'), function(v, k){
|
||||
// classList doesn't work with phantomJS & addClass doesn't work with a SVG element
|
||||
$(v).attr('class', $(v).attr('class') + ' ' + bar_classes[k]);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function(){
|
||||
nv.utils.offWindowResize(this.on_resize);
|
||||
this._super();
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
kanban_widgets.registry.add('dashboard_graph', JournalDashboardGraph);
|
||||
|
||||
});
|
||||
@@ -12,7 +12,6 @@
|
||||
<script type="text/javascript" src="/account/static/src/js/move_line_quickadd.js"></script>
|
||||
<!-- <script type="text/javascript" src="/account/static/src/js/tour_bank_statement_reconciliation.js"></script> -->
|
||||
<script type="text/javascript" src="/account/static/src/js/account_payment_widget.js"></script>
|
||||
<script type="text/javascript" src="/account/static/src/js/account_journal_dashboard_widget.js"></script>
|
||||
</xpath>
|
||||
</template>
|
||||
</data>
|
||||
|
||||
@@ -274,6 +274,97 @@ var KanbanMonetary = AbstractField.extend({
|
||||
}
|
||||
});
|
||||
|
||||
var DashboardGraph = AbstractField.extend({
|
||||
start: function() {
|
||||
this.graph_type = this.$node.attr('graph_type');
|
||||
this.data = JSON.parse(this.field.raw_value);
|
||||
this.display_graph();
|
||||
return this._super();
|
||||
},
|
||||
|
||||
display_graph : function() {
|
||||
var self = this;
|
||||
nv.addGraph(function () {
|
||||
self.$svg = self.$el.append('<svg>');
|
||||
|
||||
switch(self.graph_type) {
|
||||
|
||||
case "line":
|
||||
self.$svg.addClass('o_graph_linechart');
|
||||
|
||||
self.chart = nv.models.lineChart();
|
||||
self.chart.forceY([0]);
|
||||
self.chart.options({
|
||||
x: function(d, u) { return u },
|
||||
margin: {'left': 0, 'right': 0, 'top': 0, 'bottom': 0},
|
||||
showYAxis: false,
|
||||
showLegend: false,
|
||||
});
|
||||
self.chart.xAxis
|
||||
.tickFormat(function(d) {
|
||||
var label = '';
|
||||
_.each(self.data, function(v, k){
|
||||
if (v.values[d] && v.values[d].x){
|
||||
label = v.values[d].x;
|
||||
}
|
||||
});
|
||||
return label;
|
||||
});
|
||||
self.chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
break;
|
||||
|
||||
case "bar":
|
||||
self.$svg.addClass('o_graph_barchart');
|
||||
|
||||
self.chart = nv.models.discreteBarChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.value })
|
||||
.showValues(false)
|
||||
.showYAxis(false)
|
||||
.margin({'left': 0, 'right': 0, 'top': 0, 'bottom': 40});
|
||||
|
||||
self.chart.xAxis.axisLabel(self.data[0].title);
|
||||
self.chart.yAxis.tickFormat(d3.format(',.2f'));
|
||||
|
||||
break;
|
||||
}
|
||||
d3.select(self.$el.find('svg')[0])
|
||||
.datum(self.data)
|
||||
.transition().duration(1200)
|
||||
.call(self.chart);
|
||||
|
||||
self.customize_chart();
|
||||
|
||||
nv.utils.windowResize(self.on_resize);
|
||||
});
|
||||
},
|
||||
|
||||
on_resize: function(){
|
||||
this.chart.update();
|
||||
this.customize_chart();
|
||||
},
|
||||
|
||||
customize_chart: function(){
|
||||
if (this.graph_type === 'bar') {
|
||||
// Add classes related to time on each bar of the bar chart
|
||||
var bar_classes = _.map(this.data[0].values, function (v, k) {return v.type});
|
||||
|
||||
_.each(this.$('.nv-bar'), function(v, k){
|
||||
// classList doesn't work with phantomJS & addClass doesn't work with a SVG element
|
||||
$(v).attr('class', $(v).attr('class') + ' ' + bar_classes[k]);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function(){
|
||||
nv.utils.offWindowResize(this.on_resize);
|
||||
this._super();
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
var fields_registry = new Registry();
|
||||
|
||||
fields_registry
|
||||
@@ -284,6 +375,7 @@ fields_registry
|
||||
.add('float_time', FormatChar)
|
||||
.add('monetary', KanbanMonetary)
|
||||
.add('kanban_label_selection', KanbanLabelSelection)
|
||||
.add('dashboard_graph', DashboardGraph)
|
||||
;
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user