[FIX] styllistic fixes|
bzr revid: xmo@openerp.com-20120607141712-48kp7blb7ijvyk2u
This commit is contained in:
Xavier Morel
@@ -4,8 +4,7 @@
|
||||
|
||||
openerp.web_graph = function (instance) {
|
||||
|
||||
var QWeb = instance.web.qweb,
|
||||
_lt = instance.web._lt;
|
||||
var _lt = instance.web._lt;
|
||||
|
||||
instance.web.views.add('graph', 'instance.web_graph.GraphView');
|
||||
instance.web_graph.GraphView = instance.web.View.extend({
|
||||
@@ -19,125 +18,116 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
||||
this.dataset = dataset;
|
||||
this.view_id = view_id;
|
||||
|
||||
this.mode="bar"; // line, bar, area, pie, radar
|
||||
this.orientation=false; // true: horizontal, false: vertical
|
||||
this.stacked=true;
|
||||
this.mode = "bar"; // line, bar, area, pie, radar
|
||||
this.orientation = false; // true: horizontal, false: vertical
|
||||
this.stacked = true;
|
||||
|
||||
this.spreadsheet=false; // Display data gris, allows copy to CSV
|
||||
this.forcehtml=false;
|
||||
this.legend_container;
|
||||
this.legend="top"; // top, inside, no
|
||||
this.spreadsheet = false; // Display data grid, allows copy to CSV
|
||||
this.forcehtml = false;
|
||||
this.legend = "top"; // top, inside, no
|
||||
|
||||
this.domain = [];
|
||||
this.context = {};
|
||||
this.group_by = {};
|
||||
this.group_by = [];
|
||||
|
||||
|
||||
this.is_loaded = $.Deferred();
|
||||
this.graph = null;
|
||||
},
|
||||
destroy: function () {
|
||||
if (this.graph)
|
||||
if (this.graph) {
|
||||
this.graph.destroy();
|
||||
}
|
||||
this._super();
|
||||
},
|
||||
|
||||
on_loaded: function(fields_view_get) {
|
||||
// TODO: move to load_view and document
|
||||
var width, height;
|
||||
var self = this;
|
||||
this.fields_view = fields_view_get;
|
||||
this.container = this.$element.find("#editor-render-body");
|
||||
|
||||
this.mode = this.fields_view.arch.attrs.type || 'bar';
|
||||
this.orientation = this.fields_view.arch.attrs.orientation == 'horizontal';
|
||||
|
||||
width = this.$element.parent().width();
|
||||
this.container.css("width", width);
|
||||
var width = this.$element.parent().width();
|
||||
this.$element.css("width", width);
|
||||
this.container.css("height", Math.min(500, width*0.8));
|
||||
this.container = this.container[0];
|
||||
this.container = this.$element.find("#editor-render-body").css({
|
||||
width: width,
|
||||
height: Math.min(500, width * 0.8)
|
||||
})[0];
|
||||
|
||||
var graph_render = this.proxy('graph_render');
|
||||
this.$element.find("#graph_bar,#graph_bar_stacked").click(
|
||||
{mode: 'bar', stacked: true, legend: 'top'}, $.proxy(this,"graph_render"))
|
||||
{mode: 'bar', stacked: true, legend: 'top'}, graph_render);
|
||||
|
||||
this.$element.find("#graph_bar_not_stacked").click(
|
||||
{mode: 'bar', stacked: false, legend: 'top'}, $.proxy(this,"graph_render"))
|
||||
{mode: 'bar', stacked: false, legend: 'top'}, graph_render);
|
||||
|
||||
this.$element.find("#graph_area,#graph_area_stacked").click(
|
||||
{mode: "area", stacked: true, legend: "top"}, $.proxy(this,"graph_render"));
|
||||
{mode: "area", stacked: true, legend: "top"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_area_not_stacked").click(
|
||||
{mode: "area", stacked: false, legend: "top"}, $.proxy(this,"graph_render"));
|
||||
{mode: "area", stacked: false, legend: "top"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_radar").click(
|
||||
{orientation: 0, mode: "radar", legend: "inside"}, $.proxy(this,"graph_render"));
|
||||
{orientation: 0, mode: "radar", legend: "inside"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_pie").click(
|
||||
{mode: "pie", legend: "inside"}, $.proxy(this,"graph_render"));
|
||||
{mode: "pie", legend: "inside"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_legend_top").click(
|
||||
{legend: "top"}, $.proxy(self,"graph_render"));
|
||||
{legend: "top"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_legend_inside").click(
|
||||
{legend: "inside"}, $.proxy(self,"graph_render"));
|
||||
{legend: "inside"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_legend_no").click(
|
||||
{legend: "no"}, $.proxy(self,"graph_render"));
|
||||
{legend: "no"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_line").click(
|
||||
{mode: "line"}, $.proxy(this,"graph_render"));
|
||||
{mode: "line"}, graph_render);
|
||||
|
||||
this.$element.find("#graph_show_data").click(
|
||||
function() {
|
||||
self.spreadsheet = ! self.spreadsheet;
|
||||
self.graph_render();
|
||||
this.$element.find("#graph_show_data").click(function () {
|
||||
self.spreadsheet = ! self.spreadsheet;
|
||||
self.graph_render();
|
||||
});
|
||||
this.$element.find("#graph_switch").click(function () {
|
||||
if (self.mode != 'radar') {
|
||||
self.orientation = ! self.orientation;
|
||||
}
|
||||
);
|
||||
this.$element.find("#graph_switch").click(
|
||||
function() {
|
||||
if (this.mode != 'radar')
|
||||
self.orientation = ! self.orientation;
|
||||
self.graph_render();
|
||||
}
|
||||
);
|
||||
self.graph_render();
|
||||
});
|
||||
|
||||
this.$element.find("#graph_download").click(
|
||||
function() {
|
||||
if (Flotr.isIE && Flotr.isIE < 9) {
|
||||
alert(
|
||||
"Your browser doesn't allow you to get a bitmap image from the plot, " +
|
||||
"you can only get a VML image that you can use in Microsoft Office."
|
||||
);
|
||||
}
|
||||
if (self.legend=="top") self.legend="inside";
|
||||
self.forcehtml = true;
|
||||
return self.graph_get_data(
|
||||
function (result) {
|
||||
var graph;
|
||||
graph = self.graph_render_all(result)
|
||||
graph.download.saveImage('png');
|
||||
self.forcehtml = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
this._super();
|
||||
this.$element.find("#graph_download").click(function () {
|
||||
if (self.legend == "top") { self.legend = "inside"; }
|
||||
self.forcehtml = true;
|
||||
|
||||
self.graph_get_data().then(function (result) {
|
||||
self.graph_render_all(result).download.saveImage('png');
|
||||
}).always(function () {
|
||||
self.forcehtml = false;
|
||||
});
|
||||
});
|
||||
return this._super();
|
||||
},
|
||||
|
||||
get_format: function get_format(options) {
|
||||
var result = {
|
||||
show: this.legend!='no',
|
||||
get_format: function (options) {
|
||||
options = options || {};
|
||||
var legend = {
|
||||
show: this.legend != 'no',
|
||||
};
|
||||
|
||||
switch (this.legend) {
|
||||
case 'top':
|
||||
legend.noColumns = 4;
|
||||
legend.container = this.$element.find("div.graph_header_legend")[0];
|
||||
break;
|
||||
case 'inside':
|
||||
legend.position = 'nw';
|
||||
legend.backgroundColor = '#D2E8FF';
|
||||
break;
|
||||
}
|
||||
if (this.legend=="top") {
|
||||
result.noColumns = 4;
|
||||
result.container = this.$element.find("div.graph_header_legend")[0];
|
||||
} else if (this.legend=="inside") {
|
||||
result.position = 'nw';
|
||||
result.backgroundColor = '#D2E8FF';
|
||||
}
|
||||
return $.extend({
|
||||
legend: result,
|
||||
|
||||
return _.extend({
|
||||
legend: legend,
|
||||
mouse: {
|
||||
track: true,
|
||||
relative: true
|
||||
@@ -146,143 +136,129 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
||||
show: this.spreadsheet,
|
||||
initialTab: "data"
|
||||
},
|
||||
HtmlText : (options && options.xaxis && options.xaxis.labelsAngle)?false:!this.forcehtml,
|
||||
}, options)
|
||||
HtmlText : (options.xaxis && options.xaxis.labelsAngle) ? false : !this.forcehtml,
|
||||
}, options);
|
||||
},
|
||||
|
||||
|
||||
graph_bar: function (container, data) {
|
||||
return Flotr.draw(container, data.data, this.get_format({
|
||||
bars : {
|
||||
show : true,
|
||||
stacked : this.stacked,
|
||||
horizontal : this.orientation,
|
||||
barWidth : 0.7,
|
||||
lineWidth : 1
|
||||
},
|
||||
grid : {
|
||||
verticalLines : this.orientation,
|
||||
horizontalLines : !this.orientation,
|
||||
outline : "sw",
|
||||
},
|
||||
yaxis : {
|
||||
ticks: this.orientation?data.ticks:false
|
||||
},
|
||||
xaxis : {
|
||||
labelsAngle: 45,
|
||||
ticks: this.orientation?false:data.ticks
|
||||
}
|
||||
})
|
||||
)
|
||||
make_graph: function (mode, container, data) {
|
||||
if (mode === 'area') { mode = 'line'; }
|
||||
return Flotr.draw(
|
||||
container, data.data,
|
||||
this.get_format(this['options_' + mode](data)));
|
||||
},
|
||||
|
||||
graph_pie: function (container, data) {
|
||||
return Flotr.draw(container, data.data, this.get_format({
|
||||
pie : {
|
||||
show: true
|
||||
},
|
||||
grid : {
|
||||
verticalLines : false,
|
||||
horizontalLines : false,
|
||||
outline : "",
|
||||
},
|
||||
xaxis : {showLabels: false},
|
||||
yaxis : {showLabels: false},
|
||||
})
|
||||
)
|
||||
options_bar: function (data) {
|
||||
return {
|
||||
bars : {
|
||||
show : true,
|
||||
stacked : this.stacked,
|
||||
horizontal : this.orientation,
|
||||
barWidth : 0.7,
|
||||
lineWidth : 1
|
||||
},
|
||||
grid : {
|
||||
verticalLines : this.orientation,
|
||||
horizontalLines : !this.orientation,
|
||||
outline : "sw",
|
||||
},
|
||||
yaxis : {
|
||||
ticks: this.orientation ? data.ticks : false
|
||||
},
|
||||
xaxis : {
|
||||
labelsAngle: 45,
|
||||
ticks: this.orientation ? false : data.ticks
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
graph_radar: function (container, data) {
|
||||
return Flotr.draw(container, data.data, this.get_format({
|
||||
radar : {
|
||||
show : true,
|
||||
stacked : this.stacked
|
||||
},
|
||||
grid : {
|
||||
circular : true,
|
||||
minorHorizontalLines : true
|
||||
},
|
||||
xaxis : {
|
||||
ticks: data.ticks
|
||||
},
|
||||
})
|
||||
)
|
||||
options_pie: function (data) {
|
||||
return {
|
||||
pie : {
|
||||
show: true
|
||||
},
|
||||
grid : {
|
||||
verticalLines : false,
|
||||
horizontalLines : false,
|
||||
outline : "",
|
||||
},
|
||||
xaxis : {showLabels: false},
|
||||
yaxis : {showLabels: false},
|
||||
};
|
||||
},
|
||||
|
||||
graph_line: function (container, data) {
|
||||
return Flotr.draw(container, data.data, this.get_format({
|
||||
lines : {
|
||||
show : true,
|
||||
stacked : this.stacked
|
||||
},
|
||||
grid : {
|
||||
verticalLines : this.orientation,
|
||||
horizontalLines : !this.orientation,
|
||||
outline : "sw",
|
||||
},
|
||||
yaxis : {
|
||||
ticks: this.orientation?data.ticks:false
|
||||
},
|
||||
xaxis : {
|
||||
labelsAngle: 45,
|
||||
ticks: this.orientation?false:data.ticks
|
||||
}
|
||||
})
|
||||
)
|
||||
options_radar: function (data) {
|
||||
return {
|
||||
radar : {
|
||||
show : true,
|
||||
stacked : this.stacked
|
||||
},
|
||||
grid : {
|
||||
circular : true,
|
||||
minorHorizontalLines : true
|
||||
},
|
||||
xaxis : {
|
||||
ticks: data.ticks
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
graph_get_data: function (callback) {
|
||||
var data = this.rpc(
|
||||
'/web_graph/graph/data_get',
|
||||
{
|
||||
model: this.dataset.model,
|
||||
domain: this.domain,
|
||||
context: this.context,
|
||||
group_by: this.group_by,
|
||||
view_id: this.view_id,
|
||||
mode: this.mode,
|
||||
orientation: this.orientation,
|
||||
stacked: this.stacked
|
||||
}, callback
|
||||
);
|
||||
return data
|
||||
options_line: function (data) {
|
||||
return {
|
||||
lines : {
|
||||
show : true,
|
||||
stacked : this.stacked
|
||||
},
|
||||
grid : {
|
||||
verticalLines : this.orientation,
|
||||
horizontalLines : !this.orientation,
|
||||
outline : "sw",
|
||||
},
|
||||
yaxis : {
|
||||
ticks: this.orientation ? data.ticks : false
|
||||
},
|
||||
xaxis : {
|
||||
labelsAngle: 45,
|
||||
ticks: this.orientation ? false : data.ticks
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
graph_get_data: function () {
|
||||
return this.rpc('/web_graph/graph/data_get', {
|
||||
model: this.dataset.model,
|
||||
domain: this.domain,
|
||||
context: this.context,
|
||||
group_by: this.group_by,
|
||||
view_id: this.view_id,
|
||||
mode: this.mode,
|
||||
orientation: this.orientation,
|
||||
stacked: this.stacked
|
||||
});
|
||||
},
|
||||
|
||||
// Render the graph and update menu styles
|
||||
graph_render: function (options) {
|
||||
var i;
|
||||
var self = this;
|
||||
if (options)
|
||||
for (i in options.data)
|
||||
this[i] = options.data[i];
|
||||
options = options || {};
|
||||
_.extend(this, options.data);
|
||||
|
||||
return this.graph_get_data(
|
||||
function (result) {
|
||||
self.graph_render_all(result)
|
||||
}
|
||||
);
|
||||
return this.graph_get_data()
|
||||
.then(this.proxy('graph_render_all'));
|
||||
},
|
||||
|
||||
graph_render_all: function (data) {
|
||||
var graph;
|
||||
var i;
|
||||
if (this.mode=='area')
|
||||
for (i=0; i<data.data.length; i++) {
|
||||
data.data[i].lines = {fill: true}
|
||||
}
|
||||
if (this.graph)
|
||||
var i;
|
||||
if (this.mode=='area') {
|
||||
for (i=0; i<data.data.length; i++) {
|
||||
data.data[i].lines = {fill: true}
|
||||
}
|
||||
}
|
||||
if (this.graph) {
|
||||
this.graph.destroy();
|
||||
}
|
||||
|
||||
// Render the graph
|
||||
this.$element.find(".graph_header_legend").children().remove()
|
||||
this.graph = {
|
||||
radar: $.proxy(this, "graph_radar"),
|
||||
pie: $.proxy(this, "graph_pie"),
|
||||
bar: $.proxy(this, "graph_bar"),
|
||||
area: $.proxy(this, "graph_line"),
|
||||
line: $.proxy(this, "graph_line")
|
||||
}[this.mode](this.container, data)
|
||||
this.$element.find(".graph_header_legend").children().remove();
|
||||
this.graph = this.make_graph(this.mode, this.container, data);
|
||||
|
||||
// Update styles of menus
|
||||
|
||||
@@ -290,15 +266,17 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
||||
this.$element.find("a[id='graph_"+this.mode+"']").addClass("active");
|
||||
this.$element.find("a[id='graph_"+this.mode+(this.stacked?"_stacked":"_not_stacked")+"']").addClass("active");
|
||||
|
||||
if (this.legend=='inside')
|
||||
if (this.legend == 'inside') {
|
||||
this.$element.find("a[id='graph_legend_inside']").addClass("active");
|
||||
else if (this.legend=='top')
|
||||
} else if (this.legend == 'top') {
|
||||
this.$element.find("a[id='graph_legend_top']").addClass("active");
|
||||
else
|
||||
} else {
|
||||
this.$element.find("a[id='graph_legend_no']").addClass("active");
|
||||
}
|
||||
|
||||
if (this.spreadsheet)
|
||||
if (this.spreadsheet) {
|
||||
this.$element.find("a[id='graph_show_data']").addClass("active");
|
||||
}
|
||||
return this.graph;
|
||||
},
|
||||
|
||||
@@ -311,13 +289,11 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
||||
this.group_by = group_by;
|
||||
|
||||
this.graph_render();
|
||||
//});
|
||||
},
|
||||
|
||||
do_show: function() {
|
||||
this.do_push_state({});
|
||||
return this._super();
|
||||
},
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user