[REF] refactoring in progress. removes widget chartview and merges basicdataview with pivottable widgets in addon web_graph

bzr revid: ged@openerp.com-20131115163209-iebydq0jth2f8lee
This commit is contained in:
Gery Debongnie 2013-11-15 17:32:09 +01:00
parent 08a26f9e95
commit 990deeebe4
3 changed files with 38 additions and 73 deletions

View File

@ -25,7 +25,7 @@ var Charts = {
.width(650)
.height(400);
d3.select('.graph_chart svg')
d3.select('.graph_main_content svg')
.datum(formatted_data)
.attr('width', 650)
.attr('height', 400)
@ -49,7 +49,7 @@ var Charts = {
.height(300)
.margin({top: 30, right: 20, bottom: 20, left: 60});
d3.select('.graph_chart svg')
d3.select('.graph_main_content svg')
.attr('width', 600)
.attr('height', 300)
.datum(formatted_data)
@ -68,7 +68,7 @@ var Charts = {
.width(650)
.height(400);
d3.select('.graph_chart svg')
d3.select('.graph_main_content svg')
.datum(formatted_data)
.transition().duration(1200)
.attr('width', 650)

View File

@ -22,18 +22,12 @@ instance.web_graph.GraphView = instance.web.View.extend({
template: 'GraphView',
display_name: _lt('Graph'),
view_type: 'graph',
mode: 'pivot', // pivot => display pivot table, chart => display chart
mode: 'pivot', // pivot, bar_chart, line_chart or pie_chart
events: {
'click .graph_mode_selection li' : function (event) {
event.preventDefault();
var view_mode = event.target.attributes['data-mode'].nodeValue;
if (view_mode === 'data') {
this.mode = 'pivot';
} else {
this.mode = 'chart';
this.chart_view.set_mode(view_mode);
}
this.mode = event.target.attributes['data-mode'].nodeValue;
this.display_data();
},
'click .graph_clear_groups' : function (event) {
@ -91,31 +85,48 @@ instance.web_graph.GraphView = instance.web.View.extend({
return $.when(important_fields_def, field_descr_def)
.then(function () {
self.data = {
model: model,
domain: options.domain,
fields: options.fields,
important_fields: options.important_fields,
measure: options.measure,
measure_label: options.fields[options.measure].string,
col_groupby: [],
row_groupby: options.row_groupby,
groups: [],
total: null,
};
self.pivot_table = new PivotTable(model, options);
self.chart_view = new ChartView(model, options);
})
.then(function () {
return self.pivot_table.appendTo('.graph_main_content');
})
.then(function() {
return self.chart_view.appendTo('.graph_main_content');
});
},
display_data : function () {
var content = this.$el.filter('.graph_main_content');
content.find('svg').remove();
var self = this;
if (this.mode === 'pivot') {
this.chart_view.hide();
this.pivot_table.show();
} else {
this.pivot_table.hide();
this.chart_view.show();
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);
});
}
},
do_search: function (domain, context, group_by) {
this.domain = new instance.web.CompoundDomain(domain);
this.data.domain = new instance.web.CompoundDomain(domain);
this.pivot_table.set_domain(domain);
this.chart_view.set_domain(domain);
this.display_data();
},
@ -127,14 +138,15 @@ instance.web_graph.GraphView = instance.web.View.extend({
});
/**
* BasicDataView widget. Basic widget to manage show/hide functionality
* and to initialize some attributes. It is inherited by PivotTable
* and ChartView widget.
* PivotTable widget. It displays the data in tabular data and allows the
* user to drill down and up in the table
*/
var BasicDataView = instance.web.Widget.extend({
var PivotTable = instance.web.Widget.extend({
template: 'pivot_table',
rows: [],
cols: [],
current_row_id : 0,
need_redraw: false,
// Input parameters:
@ -198,54 +210,12 @@ var BasicDataView = instance.web.Widget.extend({
this.$el.css('display', 'none');
},
draw: function() {
},
get_data: function (groupby) {
var view_fields = this.groupby.row.concat(this.measure, this.groupby.col);
return query_groups(this.model, view_fields, this.domain, groupby);
},
});
/**
* ChartView widget. It displays the data in chart form, using the nvd3
* library. Various modes include bar charts, pie charts or line charts.
*/
var ChartView = BasicDataView.extend({
template: 'chart_view',
set_mode: function (mode) {
this.mode = mode;
console.log("mode",mode);
this.render = this['render_' + mode];
this.need_redraw = true;
},
draw: function () {
var self = this;
this.$el.empty();
console.log("measrue",self.measure);
this.$el.append('<svg></svg>');
this.get_data(this.groupby.row).done(function (data) {
Charts[self.mode](data, self.measure, self.measure_label);
});
},
});
/**
* PivotTable widget. It displays the data in tabular data and allows the
* user to drill down and up in the table
*/
var PivotTable = BasicDataView.extend({
template: 'pivot_table',
rows: [],
cols: [],
current_row_id : 0,
events: {
'click .web_graph_click' : function (event) {
@ -297,10 +267,6 @@ var PivotTable = BasicDataView.extend({
this.draw();
},
init: function (model, options) {
this._super(model, options);
},
generate_id: function () {
this.current_row_id += 1;
return this.current_row_id - 1;

View File

@ -6,12 +6,11 @@
Chart type <span class="caret"></span>
</label>
<ul class="dropdown-menu graph_mode_selection" role="menu">
<li><a data-mode="data" href="#">Pivot table</a></li>
<li><a data-mode="pivot" href="#">Pivot table</a></li>
<li><a data-mode="bar_chart" href="#">Bar chart</a></li>
<li><a data-mode="line_chart" href="#">Line Chart</a></li>
<li><a data-mode="pie_chart" href="#">Pie chart</a></li>
</ul>
<label type="button" class="btn btn-default graph_clear_groups">Clear groups</label>
</div>
</div>
<div class="graph_main_content">