From 04b619f7bb8339259b7d17b9ec90a71669f67c61 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Fri, 28 Oct 2011 14:26:08 +0200
Subject: [FIX] incorrect rendering of hidden graphs

dhtmlx is apparently entirely unable to render invisible graphs
(hidden via display:none on itself or a parent, visibility: hidden
does not trouble it), it apparently uses the actual size of the graph
container in its rendering and display:none elements have no
dimensions.

A graph in an o2m in a secondary tab gets rendered in display:none
environment yielding a completely broken and unusable graph.

Worked around this by deferring the graph's rendering until
visibility: the actual graph rendering is stored in a function which
is periodically deferred (via setTimeout) until we know the graph view
is visible (meaning its root element isn't invisible
anymore). Ideally, we'd use a library which is not broken instead...

The check periodicity is currently set to 100ms, seems sufficiently
reactive for our purposes.

lp bug: https://launchpad.net/bugs/880789 fixed

bzr revid: xmo@openerp.com-20111028122608-6hyi7lqpr3jh9rw3
---
 addons/web_graph/static/src/js/graph.js | 177 +++++++++++++++++++-------------
 1 file changed, 104 insertions(+), 73 deletions(-)

(limited to 'addons/web_graph/static/src')

diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index bac147b1a91..33321da970a 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -29,6 +29,14 @@ openerp.web_graph.GraphView = openerp.web.View.extend({
         this.columns = [];
         this.group_field = null;
         this.is_loaded = $.Deferred();
+
+        this.renderer = null;
+    },
+    stop: function () {
+        if (this.renderer) {
+            clearTimeout(this.renderer);
+        }
+        this._super();
     },
     do_show: function () {
         this.$element.show();
@@ -256,90 +264,113 @@ openerp.web_graph.GraphView = openerp.web.View.extend({
             x_axis = abscissa_description;
             y_axis = ordinate_description;
         }
-        
-        var bar_chart = new dhtmlXChart({
-            view: view_chart,
-            container: this.element_id+"-barchart",
-            value:"#"+group_list[0].group+"#",
-            gradient: "3d",
-            border: false,
-            width: 1024,
-            tooltip:{
-                template: _.sprintf("#%s#, %s=#%s#",
-                    this.abscissa, group_list[0].text, group_list[0].group)
-            },
-            radius: 0,
-            color:group_list[0].color,
-            origin:0,
-            xAxis: x_axis,
-            yAxis: y_axis,
-            padding: {
-                left: 75
-            },
-            legend: {
-                values: group_list,
-                align:"left",
-                valign:"top",
-                layout: "x",
-                marker: {
-                    type:"round",
-                    width:12
-                }
+
+        var renderer = function () {
+            if (self.$element.is(':hidden')) {
+                self.renderer = setTimeout(renderer, 100);
+                return;
             }
-        });
-        for (var m = 1; m<group_list.length;m++){
-            var column = group_list[m];
-            if (column.group === this.group_field) { continue; }
-            bar_chart.addSeries({
-                value: "#"+column.group+"#",
+            self.renderer = null;
+            var bar_chart = new dhtmlXChart({
+                view: view_chart,
+                container: self.element_id+"-barchart",
+                value:"#"+group_list[0].group+"#",
+                gradient: "3d",
+                border: false,
+                width: 1024,
                 tooltip:{
                     template: _.sprintf("#%s#, %s=#%s#",
-                        this.abscissa, column.text, column.group)
+                        self.abscissa, group_list[0].text, group_list[0].group)
+                },
+                radius: 0,
+                color:group_list[0].color,
+                origin:0,
+                xAxis: x_axis,
+                yAxis: y_axis,
+                padding: {
+                    left: 75
                 },
-                color: column.color
+                legend: {
+                    values: group_list,
+                    align:"left",
+                    valign:"top",
+                    layout: "x",
+                    marker: {
+                        type:"round",
+                        width:12
+                    }
+                }
+            });
+            for (var m = 1; m<group_list.length;m++){
+                var column = group_list[m];
+                if (column.group === self.group_field) { continue; }
+                bar_chart.addSeries({
+                    value: "#"+column.group+"#",
+                    tooltip:{
+                        template: _.sprintf("#%s#, %s=#%s#",
+                            self.abscissa, column.text, column.group)
+                    },
+                    color: column.color
+                });
+            }
+            bar_chart.parse(results, "json");
+            self.$element.find("#"+self.element_id+"-barchart").height(
+                self.$element.find("#"+self.element_id+"-barchart").height()+50);
+            bar_chart.attachEvent("onItemClick", function(id) {
+                self.open_list_view(bar_chart.get(id));
             });
+        };
+        if (this.renderer) {
+            clearTimeout(this.renderer);
         }
-        bar_chart.parse(results, "json");
-        jQuery("#"+this.element_id+"-barchart").height(jQuery("#"+this.element_id+"-barchart").height()+50);
-        bar_chart.attachEvent("onItemClick", function(id) {
-            self.open_list_view(bar_chart.get(id));
-        });
+        this.renderer = setTimeout(renderer, 0);
     },
     schedule_pie: function(result) {
         var self = this;
-        var chart =  new dhtmlXChart({
-            view:"pie3D",
-            container:self.element_id+"-piechart",
-            value:"#"+self.ordinate+"#",
-            pieInnerText:function(obj) {
-                var sum = chart.sum("#"+self.ordinate+"#");
-                var val = obj[self.ordinate] / sum * 100 ;
-                return val.toFixed(1) + "%";
-            },
-            tooltip:{
-                template:"#"+self.abscissa+"#"+"="+"#"+self.ordinate+"#"
-            },
-            gradient:"3d",
-            height: 20,
-            radius: 200,
-            legend: {
-                width: 300,
-                align:"left",
-                valign:"top",
-                layout: "x",
-                marker:{
-                    type:"round",
-                    width:12
+        var renderer = function () {
+            if (self.$element.is(':hidden')) {
+                self.renderer = setTimeout(renderer, 100);
+                return;
+            }
+            self.renderer = null;
+            var chart =  new dhtmlXChart({
+                view:"pie3D",
+                container:self.element_id+"-piechart",
+                value:"#"+self.ordinate+"#",
+                pieInnerText:function(obj) {
+                    var sum = chart.sum("#"+self.ordinate+"#");
+                    var val = obj[self.ordinate] / sum * 100 ;
+                    return val.toFixed(1) + "%";
                 },
-                template:function(obj){
-                    return obj[self.abscissa] || 'Undefined';
+                tooltip:{
+                    template:"#"+self.abscissa+"#"+"="+"#"+self.ordinate+"#"
+                },
+                gradient:"3d",
+                height: 20,
+                radius: 200,
+                legend: {
+                    width: 300,
+                    align:"left",
+                    valign:"top",
+                    layout: "x",
+                    marker:{
+                        type:"round",
+                        width:12
+                    },
+                    template:function(obj){
+                        return obj[self.abscissa] || 'Undefined';
+                    }
                 }
-            }
-        });
-        chart.parse(result,"json");
-        chart.attachEvent("onItemClick", function(id) {
-            self.open_list_view(chart.get(id));
-        });
+            });
+            chart.parse(result,"json");
+            chart.attachEvent("onItemClick", function(id) {
+                self.open_list_view(chart.get(id));
+            });
+        };
+        if (this.renderer) {
+            clearTimeout(this.renderer);
+        }
+        this.renderer = setTimeout(renderer, 0);
     },
     open_list_view : function (id){
         var self = this;
-- 
cgit v1.2.3


From ae0bf044ef1d63bc0bb19eb9dccc0218c63a9c65 Mon Sep 17 00:00:00 2001
From: Christophe Simonis <chs@openerp.com>
Date: Wed, 2 Nov 2011 12:11:05 +0100
Subject: [IMP] qweb templates are stored in addon manifest and given by the
 server

bzr revid: chs@openerp.com-20111102111105-ibyupno1e47sv9ho
---
 addons/web_graph/static/src/js/graph.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'addons/web_graph/static/src')

diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index bac147b1a91..91aaf8bdb9c 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -13,7 +13,6 @@ var COLOR_PALETTE = [
     '#cc0000', '#d400a8'];
 
 var QWeb = openerp.web.qweb;
-QWeb.add_template('/web_graph/static/src/xml/web_graph.xml');
 openerp.web.views.add('graph', 'openerp.web_graph.GraphView');
 openerp.web_graph.GraphView = openerp.web.View.extend({
 
-- 
cgit v1.2.3