2011-04-15 06:42:41 +00:00
|
|
|
/*---------------------------------------------------------
|
2011-09-05 12:28:15 +00:00
|
|
|
* OpenERP web_graph
|
2011-04-15 06:42:41 +00:00
|
|
|
*---------------------------------------------------------*/
|
2013-11-08 15:41:14 +00:00
|
|
|
|
2013-11-12 08:38:27 +00:00
|
|
|
/* jshint undef: false */
|
|
|
|
|
2011-04-15 06:42:41 +00:00
|
|
|
|
2012-04-17 12:48:30 +00:00
|
|
|
openerp.web_graph = function (instance) {
|
2013-11-13 10:50:59 +00:00
|
|
|
'use strict';
|
2011-06-17 13:25:50 +00:00
|
|
|
|
2012-06-07 14:17:12 +00:00
|
|
|
var _lt = instance.web._lt;
|
2013-01-25 07:02:40 +00:00
|
|
|
var _t = instance.web._t;
|
2013-11-12 13:53:44 +00:00
|
|
|
var QWeb = instance.web.qweb;
|
2012-05-07 08:19:08 +00:00
|
|
|
|
2012-04-17 12:48:30 +00:00
|
|
|
instance.web.views.add('graph', 'instance.web_graph.GraphView');
|
2013-11-08 13:08:06 +00:00
|
|
|
|
2013-11-08 15:20:48 +00:00
|
|
|
/**
|
2013-11-18 09:07:15 +00:00
|
|
|
* GraphView view. It mostly contains a widget (PivotTable), some data, and
|
|
|
|
* calls to charts function.
|
2013-11-08 15:20:48 +00:00
|
|
|
*/
|
2012-04-17 12:48:30 +00:00
|
|
|
instance.web_graph.GraphView = instance.web.View.extend({
|
2013-11-08 13:08:06 +00:00
|
|
|
template: 'GraphView',
|
2011-12-16 13:00:00 +00:00
|
|
|
display_name: _lt('Graph'),
|
2013-11-08 13:08:06 +00:00
|
|
|
view_type: 'graph',
|
2013-11-15 16:32:09 +00:00
|
|
|
mode: 'pivot', // pivot, bar_chart, line_chart or pie_chart
|
2013-11-18 12:53:20 +00:00
|
|
|
pivot_table: null,
|
2013-11-12 11:31:34 +00:00
|
|
|
|
2013-11-08 13:08:06 +00:00
|
|
|
events: {
|
|
|
|
'click .graph_mode_selection li' : function (event) {
|
|
|
|
event.preventDefault();
|
2013-11-15 16:32:09 +00:00
|
|
|
this.mode = event.target.attributes['data-mode'].nodeValue;
|
2013-11-12 16:10:34 +00:00
|
|
|
this.display_data();
|
2013-11-08 13:08:06 +00:00
|
|
|
},
|
|
|
|
},
|
2011-04-15 06:42:41 +00:00
|
|
|
|
2013-11-08 13:08:06 +00:00
|
|
|
view_loading: function (fields_view_get) {
|
2013-11-08 15:20:48 +00:00
|
|
|
var self = this;
|
2013-11-13 10:50:59 +00:00
|
|
|
var model = new instance.web.Model(fields_view_get.model, {group_by_no_leaf: true});
|
2013-11-18 12:53:20 +00:00
|
|
|
var domain = [];
|
|
|
|
var col_groupby = [];
|
|
|
|
var row_groupby = [];
|
|
|
|
var measure = null;
|
|
|
|
var fields;
|
|
|
|
var important_fields = [];
|
2013-11-08 15:20:48 +00:00
|
|
|
|
|
|
|
// get the default groupbys and measure defined in the field view
|
|
|
|
_.each(fields_view_get.arch.children, function (field) {
|
|
|
|
if ('name' in field.attrs) {
|
|
|
|
if ('operator' in field.attrs) {
|
2013-11-18 12:53:20 +00:00
|
|
|
measure = field.attrs.name;
|
2013-11-08 15:20:48 +00:00
|
|
|
} else {
|
2013-11-18 12:53:20 +00:00
|
|
|
row_groupby.push(field.attrs.name);
|
2013-11-08 15:20:48 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-11-13 15:47:31 +00:00
|
|
|
// get the most important fields (of the model) by looking at the
|
|
|
|
// groupby filters defined in the search view
|
|
|
|
var load_view = instance.web.fields_view_get({
|
|
|
|
model: model,
|
|
|
|
view_type: 'search',
|
2013-11-12 08:38:27 +00:00
|
|
|
});
|
2013-11-08 15:20:48 +00:00
|
|
|
|
2013-11-13 15:47:31 +00:00
|
|
|
var important_fields_def = $.when(load_view).then(function (search_view) {
|
|
|
|
var groups = _.select(search_view.arch.children, function (c) {
|
|
|
|
return (c.tag == 'group') && (c.attrs.string != 'Display');
|
|
|
|
});
|
|
|
|
_.each(groups, function(g) {
|
|
|
|
_.each(g.children, function (g) {
|
|
|
|
if (g.attrs.context) {
|
|
|
|
var field_id = py.eval(g.attrs.context).group_by;
|
2013-11-18 12:53:20 +00:00
|
|
|
important_fields.push(field_id);
|
2013-11-13 15:47:31 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2013-11-14 10:34:46 +00:00
|
|
|
});
|
2013-11-13 15:47:31 +00:00
|
|
|
|
|
|
|
// get the fields descriptions from the model
|
|
|
|
var field_descr_def = model.call('fields_get', [])
|
2013-11-18 12:53:20 +00:00
|
|
|
.then(function (fs) { fields = fs; });
|
2013-11-13 15:47:31 +00:00
|
|
|
|
|
|
|
return $.when(important_fields_def, field_descr_def)
|
|
|
|
.then(function () {
|
2013-11-15 16:32:09 +00:00
|
|
|
self.data = {
|
|
|
|
model: model,
|
2013-11-18 12:53:20 +00:00
|
|
|
domain: domain,
|
|
|
|
fields: fields,
|
|
|
|
important_fields: important_fields,
|
|
|
|
measure: measure,
|
|
|
|
measure_label: fields[measure].string,
|
2013-11-15 16:32:09 +00:00
|
|
|
col_groupby: [],
|
2013-11-18 12:53:20 +00:00
|
|
|
row_groupby: row_groupby,
|
2013-11-15 16:32:09 +00:00
|
|
|
groups: [],
|
|
|
|
total: null,
|
|
|
|
};
|
2013-11-13 15:47:31 +00:00
|
|
|
});
|
2013-11-12 16:10:34 +00:00
|
|
|
},
|
|
|
|
|
2013-11-13 09:18:07 +00:00
|
|
|
display_data : function () {
|
2013-11-15 16:32:09 +00:00
|
|
|
var content = this.$el.filter('.graph_main_content');
|
|
|
|
content.find('svg').remove();
|
|
|
|
var self = this;
|
2013-11-13 09:18:07 +00:00
|
|
|
if (this.mode === 'pivot') {
|
|
|
|
this.pivot_table.show();
|
|
|
|
} else {
|
|
|
|
this.pivot_table.hide();
|
2013-11-15 16:32:09 +00:00
|
|
|
content.append('<svg></svg>');
|
|
|
|
var view_fields = this.data.row_groupby.concat(this.data.measure, this.data.col_groupby);
|
|
|
|
query_groups(this.data.model, view_fields, this.data.domain, this.data.row_groupby).then(function (groups) {
|
|
|
|
Charts[self.mode](groups, self.data.measure, self.data.measure_label);
|
|
|
|
});
|
|
|
|
|
2013-11-13 09:18:07 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-11-08 15:20:48 +00:00
|
|
|
do_search: function (domain, context, group_by) {
|
2013-11-15 16:32:09 +00:00
|
|
|
this.data.domain = new instance.web.CompoundDomain(domain);
|
2013-11-18 12:53:20 +00:00
|
|
|
|
|
|
|
if (this.pivot_table) {
|
2013-11-18 13:07:56 +00:00
|
|
|
this.pivot_table.draw(true);
|
2013-11-18 12:53:20 +00:00
|
|
|
} else {
|
|
|
|
this.pivot_table = new PivotTable(this.data);
|
|
|
|
this.pivot_table.appendTo('.graph_main_content');
|
|
|
|
}
|
2013-11-13 10:50:59 +00:00
|
|
|
this.display_data();
|
2011-05-06 12:41:08 +00:00
|
|
|
},
|
2012-05-07 09:40:59 +00:00
|
|
|
|
2013-11-08 11:32:10 +00:00
|
|
|
do_show: function () {
|
2012-01-03 16:06:50 +00:00
|
|
|
this.do_push_state({});
|
|
|
|
return this._super();
|
2012-05-07 08:19:08 +00:00
|
|
|
},
|
2013-11-08 15:20:48 +00:00
|
|
|
|
2013-11-08 13:08:06 +00:00
|
|
|
});
|
|
|
|
|
2013-11-15 15:16:59 +00:00
|
|
|
|
2013-11-08 15:20:48 +00:00
|
|
|
/**
|
2013-11-15 16:32:09 +00:00
|
|
|
* PivotTable widget. It displays the data in tabular data and allows the
|
|
|
|
* user to drill down and up in the table
|
2013-11-08 15:20:48 +00:00
|
|
|
*/
|
2013-11-15 16:32:09 +00:00
|
|
|
var PivotTable = instance.web.Widget.extend({
|
|
|
|
template: 'pivot_table',
|
2013-11-18 12:53:20 +00:00
|
|
|
data: null,
|
|
|
|
headers: [],
|
2013-11-15 16:32:09 +00:00
|
|
|
rows: [],
|
|
|
|
cols: [],
|
|
|
|
current_row_id : 0,
|
2013-11-13 09:26:46 +00:00
|
|
|
|
2013-11-13 15:47:31 +00:00
|
|
|
events: {
|
2013-11-15 12:13:15 +00:00
|
|
|
'click .web_graph_click' : function (event) {
|
2013-11-18 14:19:55 +00:00
|
|
|
var row_id = event.target.attributes['data-row-id'].nodeValue,
|
|
|
|
row = this.get_row(row_id);
|
|
|
|
|
2013-11-13 15:47:31 +00:00
|
|
|
event.preventDefault();
|
2013-11-14 10:34:46 +00:00
|
|
|
|
2013-11-14 16:31:07 +00:00
|
|
|
if (row.expanded) {
|
2013-11-15 08:50:37 +00:00
|
|
|
this.fold_row(row_id);
|
2013-11-14 16:31:07 +00:00
|
|
|
} else {
|
2013-11-18 12:53:20 +00:00
|
|
|
if (row.path.length < this.data.row_groupby.length) {
|
|
|
|
var field_to_expand = this.data.row_groupby[row.path.length];
|
2013-11-15 09:24:11 +00:00
|
|
|
this.expand_row(row_id, field_to_expand);
|
|
|
|
} else {
|
2013-11-18 14:19:55 +00:00
|
|
|
this.display_dropdown(row_id, $(event.target), event.pageY, event.pageY);
|
2013-11-15 09:24:11 +00:00
|
|
|
}
|
2013-11-14 16:31:07 +00:00
|
|
|
}
|
2013-11-14 10:34:46 +00:00
|
|
|
|
|
|
|
},
|
2013-11-18 14:19:55 +00:00
|
|
|
|
2013-11-14 10:34:46 +00:00
|
|
|
'click a.field-selection' : function (event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.dropdown.remove();
|
2013-11-13 15:47:31 +00:00
|
|
|
var row_id = event.target.attributes['data-row-id'].nodeValue;
|
2013-11-14 10:34:46 +00:00
|
|
|
var field_id = event.target.attributes['data-field-id'].nodeValue;
|
|
|
|
this.expand_row(row_id, field_id);
|
2013-11-13 15:47:31 +00:00
|
|
|
},
|
|
|
|
},
|
2013-11-18 13:07:56 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
init: function (data) {
|
|
|
|
this.data = data;
|
|
|
|
},
|
2013-11-13 15:47:31 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
start: function () {
|
2013-11-18 13:07:56 +00:00
|
|
|
this.draw(true);
|
2013-11-14 15:33:48 +00:00
|
|
|
},
|
|
|
|
|
2013-11-18 13:07:56 +00:00
|
|
|
draw: function (load_data) {
|
2013-11-18 12:53:20 +00:00
|
|
|
var self = this;
|
|
|
|
|
2013-11-18 13:07:56 +00:00
|
|
|
if (load_data === true) {
|
|
|
|
this.get_groups(this.data.row_groupby)
|
|
|
|
.then(function (groups) {
|
|
|
|
self.data.groups = groups;
|
|
|
|
return self.get_groups([]);
|
|
|
|
}).then(function (total) {
|
|
|
|
self.data.total = total;
|
|
|
|
self.build_table();
|
|
|
|
self.draw(false);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.$el.empty();
|
2013-11-18 12:53:20 +00:00
|
|
|
|
2013-11-18 13:07:56 +00:00
|
|
|
_.each(this.headers, function (header) {
|
|
|
|
self.$el.append(header);
|
|
|
|
});
|
|
|
|
|
|
|
|
_.each(this.rows, function (row) {
|
|
|
|
self.$el.append(row.html);
|
|
|
|
});
|
|
|
|
}
|
2013-11-13 15:47:31 +00:00
|
|
|
},
|
2013-11-12 11:31:34 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
show: function () {
|
|
|
|
this.$el.css('display', 'block');
|
|
|
|
},
|
|
|
|
|
|
|
|
hide: function () {
|
|
|
|
this.$el.css('display', 'none');
|
|
|
|
},
|
|
|
|
|
2013-11-18 14:19:55 +00:00
|
|
|
display_dropdown: function (row_id, target, x, y) {
|
|
|
|
var self = this,
|
|
|
|
already_grouped = self.data.row_groupby.concat(self.data.col_groupby),
|
|
|
|
possible_groups = _.difference(self.data.important_fields, already_grouped),
|
|
|
|
dropdown_options = {
|
|
|
|
fields: _.map(possible_groups, function (field) {
|
|
|
|
return {id: field, value: self.get_descr(field)};
|
|
|
|
}),
|
|
|
|
row_id: row_id,
|
|
|
|
};
|
|
|
|
this.dropdown = $(QWeb.render('field_selection', dropdown_options));
|
|
|
|
target.after(this.dropdown);
|
|
|
|
this.dropdown.css({position:'absolute',
|
|
|
|
left:x,
|
|
|
|
top:y});
|
|
|
|
$('.field-selection').next('.dropdown-menu').toggle();
|
|
|
|
},
|
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
build_table: function () {
|
|
|
|
var self = this;
|
|
|
|
|
2013-11-18 14:19:55 +00:00
|
|
|
var header = $('<tr></tr>');
|
|
|
|
header.append(this.make_cell(' ', {is_border:true}));
|
|
|
|
header.append(this.make_cell(this.data.measure_label,
|
|
|
|
{is_border:true, foldable: true}));
|
|
|
|
this.headers = [header];
|
2013-11-18 12:53:20 +00:00
|
|
|
|
|
|
|
var main_row = this.make_row(this.data.total[0]);
|
|
|
|
|
|
|
|
_.each(this.data.groups, function (group) {
|
|
|
|
self.make_row(group, main_row.id);
|
2013-11-14 10:34:46 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
get_descr: function (field_id) {
|
|
|
|
return this.data.fields[field_id].string;
|
|
|
|
},
|
2013-11-14 13:17:47 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
get_groups: function (groupby) {
|
|
|
|
var view_fields = this.data.row_groupby.concat(this.data.measure, this.data.col_groupby);
|
|
|
|
return query_groups(this.data.model, view_fields, this.data.domain, groupby);
|
2013-11-14 13:17:47 +00:00
|
|
|
},
|
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
make_row: function (group, parent_id) {
|
|
|
|
var path,
|
|
|
|
value,
|
|
|
|
expanded,
|
|
|
|
domain,
|
|
|
|
parent,
|
|
|
|
has_parent = (parent_id !== undefined),
|
|
|
|
row_id = this.generate_id();
|
|
|
|
|
2013-11-14 15:33:48 +00:00
|
|
|
if (has_parent) {
|
2013-11-18 12:53:20 +00:00
|
|
|
parent = this.get_row(parent_id);
|
|
|
|
path = parent.path.concat(group.attributes.grouped_on);
|
|
|
|
value = group.attributes.value[1];
|
|
|
|
expanded = false;
|
|
|
|
parent.children.push(row_id);
|
|
|
|
domain = group.model._domain;
|
2013-11-14 15:33:48 +00:00
|
|
|
} else {
|
2013-11-18 12:53:20 +00:00
|
|
|
parent = null;
|
2013-11-14 15:33:48 +00:00
|
|
|
path = [];
|
2013-11-18 12:53:20 +00:00
|
|
|
value = 'Total';
|
|
|
|
expanded = true;
|
|
|
|
domain = this.data.domain;
|
2013-11-14 15:33:48 +00:00
|
|
|
}
|
2013-11-14 13:17:47 +00:00
|
|
|
|
|
|
|
var jquery_row = $('<tr></tr>');
|
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
var header = this.make_cell(value, {is_border:true, indent: path.length, foldable:true, row_id: row_id});
|
2013-11-14 13:17:47 +00:00
|
|
|
jquery_row.html(header);
|
2013-11-18 12:53:20 +00:00
|
|
|
jquery_row.append(this.make_cell(group.attributes.aggregates[this.data.measure]));
|
2013-11-14 13:17:47 +00:00
|
|
|
|
|
|
|
var row = {
|
|
|
|
id: row_id,
|
|
|
|
path: path,
|
2013-11-14 15:33:48 +00:00
|
|
|
value: value,
|
2013-11-18 12:53:20 +00:00
|
|
|
expanded: expanded,
|
2013-11-14 13:17:47 +00:00
|
|
|
parent: parent_id,
|
|
|
|
children: [],
|
2013-11-18 12:53:20 +00:00
|
|
|
html: jquery_row,
|
|
|
|
domain: domain,
|
2013-11-14 13:17:47 +00:00
|
|
|
};
|
2013-11-18 12:53:20 +00:00
|
|
|
this.rows.push(row); // to do, insert it properly, after all childs of parent
|
|
|
|
return row;
|
|
|
|
},
|
2013-11-14 13:17:47 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
generate_id: function () {
|
|
|
|
this.current_row_id += 1;
|
|
|
|
return this.current_row_id - 1;
|
|
|
|
},
|
|
|
|
|
|
|
|
get_row: function (id) {
|
|
|
|
return _.find(this.rows, function(row) {
|
|
|
|
return (row.id == id);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
make_cell: function (content, options) {
|
|
|
|
options = _.extend({is_border: false, indent:0, foldable:false}, options);
|
|
|
|
content = (content) ? content : 'Undefined';
|
|
|
|
|
|
|
|
var cell = $('<td></td>');
|
|
|
|
if (options.is_border) cell.addClass('graph_border');
|
|
|
|
_.each(_.range(options.indent), function () {
|
|
|
|
cell.prepend($('<span/>', {class:'web_graph_indent'}));
|
|
|
|
});
|
|
|
|
|
|
|
|
if (options.foldable) {
|
|
|
|
var plus = $('<span/>', {'data-row-id':options.row_id,
|
|
|
|
class:'icon-plus-sign web_graph_click',
|
|
|
|
href:'#'});
|
|
|
|
plus.append(' ');
|
|
|
|
plus.append(content);
|
|
|
|
cell.append(plus);
|
|
|
|
} else {
|
|
|
|
cell.append(content);
|
2013-11-14 13:17:47 +00:00
|
|
|
}
|
2013-11-18 12:53:20 +00:00
|
|
|
return cell;
|
2013-11-14 10:34:46 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
expand_row: function (row_id, field_id) {
|
2013-11-14 13:17:47 +00:00
|
|
|
var self = this;
|
2013-11-14 10:34:46 +00:00
|
|
|
var row = this.get_row(row_id);
|
2013-11-15 09:24:11 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
if (row.path.length == this.data.row_groupby.length) {
|
|
|
|
this.data.row_groupby.push(field_id);
|
2013-11-15 09:24:11 +00:00
|
|
|
}
|
2013-11-18 12:53:20 +00:00
|
|
|
row.expanded = true;
|
|
|
|
row.html.find('.icon-plus-sign')
|
|
|
|
.removeClass('icon-plus-sign')
|
|
|
|
.addClass('icon-minus-sign');
|
2013-11-14 15:33:48 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
var visible_fields = this.data.row_groupby.concat(this.data.col_groupby, this.data.measure);
|
|
|
|
query_groups(this.data.model, visible_fields, row.domain, [field_id])
|
2013-11-14 10:34:46 +00:00
|
|
|
.then(function (data) {
|
2013-11-14 16:31:07 +00:00
|
|
|
_.each(data.reverse(), function (datapt) {
|
2013-11-18 12:53:20 +00:00
|
|
|
var new_row = self.make_row(datapt, row_id);
|
|
|
|
row.html.after(new_row.html);
|
|
|
|
|
2013-11-14 13:17:47 +00:00
|
|
|
});
|
2013-11-14 10:34:46 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2013-11-14 16:31:07 +00:00
|
|
|
fold_row: function (row_id) {
|
2013-11-15 08:50:37 +00:00
|
|
|
var self = this;
|
|
|
|
var row = this.get_row(row_id);
|
|
|
|
|
|
|
|
_.each(row.children, function (child_row) {
|
2013-11-15 11:19:32 +00:00
|
|
|
self.remove_row(child_row);
|
2013-11-15 08:50:37 +00:00
|
|
|
});
|
|
|
|
row.children = [];
|
|
|
|
|
|
|
|
row.expanded = false;
|
2013-11-18 12:53:20 +00:00
|
|
|
row.html.find('.icon-minus-sign')
|
2013-11-15 08:50:37 +00:00
|
|
|
.removeClass('icon-minus-sign')
|
2013-11-15 11:19:32 +00:00
|
|
|
.addClass('icon-plus-sign');
|
2013-11-15 08:50:37 +00:00
|
|
|
|
2013-11-15 11:19:32 +00:00
|
|
|
var fold_levels = _.map(self.rows, function(g) {return g.path.length;});
|
|
|
|
var new_groupby_length = _.reduce(fold_levels, function (x, y) {
|
|
|
|
return Math.max(x,y);
|
|
|
|
}, 0);
|
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
this.data.row_groupby.splice(new_groupby_length);
|
2013-11-15 08:50:37 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
remove_row: function (row_id) {
|
|
|
|
var self = this;
|
|
|
|
var row = this.get_row(row_id);
|
|
|
|
|
|
|
|
_.each(row.children, function (child_row) {
|
|
|
|
self.remove_row(child_row);
|
|
|
|
});
|
2013-11-14 16:31:07 +00:00
|
|
|
|
2013-11-18 12:53:20 +00:00
|
|
|
row.html.remove();
|
2013-11-15 11:19:32 +00:00
|
|
|
removeFromArray(this.rows, row);
|
2013-11-14 16:31:07 +00:00
|
|
|
},
|
|
|
|
|
2013-11-08 13:08:06 +00:00
|
|
|
});
|
|
|
|
|
2011-04-15 06:42:41 +00:00
|
|
|
};
|