diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js index c751f99f48c..ea18bb8500d 100644 --- a/addons/web_graph/static/src/js/graph.js +++ b/addons/web_graph/static/src/js/graph.js @@ -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