[IMP] working version of graphs, remaining: size & fetch

bzr revid: fp@tinyerp.com-20120507133821-7mmwxo81vfjpq3e5

addons/web_graph/__openerp__.py

@@ -13,6 +13,7 @@
     "version": "3.0",
     "depends": ['web'],
     "js": [
+        "static/lib/dropdown.js",
         "static/lib/flotr2/lib/bean.js",
         "static/lib/flotr2/js/Flotr.js",
         "static/lib/flotr2/js/DefaultOptions.js",

addons/web_graph/static/lib/dropdown.js

@@ -0,0 +1,92 @@
+/* ============================================================
+ * bootstrap-dropdown.js v2.0.2
+ * http://twitter.github.com/bootstrap/javascript.html#dropdowns
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function( $ ){
+
+  "use strict"
+
+ /* DROPDOWN CLASS DEFINITION
+  * ========================= */
+
+  var toggle = '[data-toggle="dropdown"]'
+    , Dropdown = function ( element ) {
+        var $el = $(element).on('click.dropdown.data-api', this.toggle)
+        $('html').on('click.dropdown.data-api', function () {
+          $el.parent().removeClass('open')
+        })
+      }
+
+  Dropdown.prototype = {
+
+    constructor: Dropdown
+
+  , toggle: function ( e ) {
+      var $this = $(this)
+        , selector = $this.attr('data-target')
+        , $parent
+        , isActive
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      $parent = $(selector)
+      $parent.length || ($parent = $this.parent())
+
+      isActive = $parent.hasClass('open')
+
+      clearMenus()
+      !isActive && $parent.toggleClass('open')
+
+      return false
+    }
+
+  }
+
+  function clearMenus() {
+    $(toggle).parent().removeClass('open')
+  }
+
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.dropdown = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('dropdown')
+      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  $(function () {
+    $('html').on('click.dropdown.data-api', clearMenus)
+    $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+  })
+
+}( window.jQuery );

addons/web_graph/static/src/js/graph.js

@@ -9,6 +9,7 @@ var QWeb = instance.web.qweb,
 
 instance.web.views.add('graph', 'instance.web_graph.GraphView');
 instance.web_graph.GraphView = instance.web.View.extend({
+    template: "GraphView",
     display_name: _lt('Graph'),
     view_type: "graph",
 
@@ -18,7 +19,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
         this.dataset = dataset;
         this.view_id = view_id;
 
-        this.mode="pie";          // line, bar, area, pie, radar
+        this.mode="bar";          // line, bar, area, pie, radar
         this.orientation=true;    // true: horizontal, false: vertical
         this.stacked=true;
 
@@ -29,60 +30,59 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
 
         this.is_loaded = $.Deferred();
-        this.renderer = null;
+        this.graph = null;
     },
     destroy: function () {
-        if (this.renderer) {
+        if (this.graph)
-            clearTimeout(this.renderer);
+            this.graph.destroy();
-        }
         this._super();
     },
 
     on_loaded: function(fields_view_get) {
-        var container;
+        // TODO: move  to load_view and document
-        this.$element.html(QWeb.render("GraphView", {}));
+        var self = this;
-
+        this.fields_view = fields_view_get;
-        container = this.$element.find("#editor-render-body");
+        this.container = this.$element.find("#editor-render-body")[0];
         this.$element.find("#graph_bar,#graph_bar_stacked").click(
-            {mode: 'bar', stacked: true, legend: 'top'}, this.graph_render)
+            {mode: 'bar', stacked: true, legend: 'top'}, $.proxy(this,"graph_render"))
 
         this.$element.find("#graph_bar_not_stacked").click(
-            {mode: 'bar', stacked: false, legend: 'top'}, this.graph_render)
+            {mode: 'bar', stacked: false, legend: 'top'}, $.proxy(this,"graph_render"))
 
         this.$element.find("#graph_area,#graph_area_stacked").click(
-            {mode: "area", stacked: true, legend: "top"}, this.graph_render);
+            {mode: "area", stacked: true, legend: "top"}, $.proxy(this,"graph_render"));
 
         this.$element.find("#graph_area_not_stacked").click(
-            {mode: "area", stacked: false, legend: "top"}, this.graph_render);
+            {mode: "area", stacked: false, legend: "top"}, $.proxy(this,"graph_render"));
 
         this.$element.find("#graph_radar").click(
-            {orientation: 0, mode: "radar", legend: "inside"}, this.graph_render);
+            {orientation: 0, mode: "radar", legend: "inside"}, $.proxy(this,"graph_render"));
 
         this.$element.find("#graph_pie").click(
-            {mode: "pie", legend: "inside"}, this.graph_render);
+            {mode: "pie", legend: "inside"}, $.proxy(this,"graph_render"));
 
         this.$element.find("#graph_legend_top").click(
-            {legend: "top"}, this.graph_render);
+            {legend: "top"}, $.proxy(self,"graph_render"));
 
         this.$element.find("#graph_legend_inside").click(
-            {legend: "inside"}, this.graph_render);
+            {legend: "inside"}, $.proxy(self,"graph_render"));
 
         this.$element.find("#graph_legend_no").click(
-            {legend: "no"}, this.graph_render);
+            {legend: "no"}, $.proxy(self,"graph_render"));
 
         this.$element.find("#graph_line").click(
-            {mode: "line"}, this.graph_render);
+            {mode: "line"}, $.proxy(this,"graph_render"));
 
         this.$element.find("#graph_show_data").click(
             function() {
-                spreadsheet = ! spreadsheet;
+                self.spreadsheet = ! self.spreadsheet;
-                this.graph_render();
+                self.graph_render();
             }
         );
         this.$element.find("#graph_switch").click(
             function() {
-                orientation = ! orientation;
+                self.orientation = ! self.orientation;
-                this.graph_render();
+                self.graph_render();
             }
         );
 
@@ -95,26 +95,25 @@ instance.web_graph.GraphView = instance.web.View.extend({
                         "you can only get a VML image that you can use in Microsoft Office."
                     );
                 }
-                if (legend=="top") legend="inside";
+                if (self.legend=="top") self.legend="inside";
-                forcehtml = true;
+                self.forcehtml = true;
-                graph = this.graph_render();
+                graph = self.graph_render();
                 graph.download.saveImage('png');
-                forcehtml = false;
+                self.forcehtml = false;
             }
         );
-
         this._super();
+        this.graph_render()
     },
 
     get_format: function get_format(options) {
          var result = {
             show: this.legend!='no',
         }
-        if (legend=="top") {
+        if (this.legend=="top") {
             result.noColumns = 4;
-            // todo: I guess I should add something like this.renderer ?
+            result.container = this.$element.find("div.graph_header_legend")[0];
-            result.container = this.$element.find("div .graph_header_legend", this)[0];
+        } else if (this.legend=="inside") {
-        } else if (legend=="inside") {
             result.position = 'nw';
             result.backgroundColor = '#D2E8FF';
         }
@@ -157,7 +156,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
 
     graph_bar: function (container, data) {
-        return Flotr.draw(container, data, get_format({
+        return Flotr.draw(container, data, this.get_format({
                 bars : {
                     show : true,
                     stacked : this.stacked,
@@ -176,7 +175,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
     },
 
     graph_pie: function (container, data) {
-        return Flotr.draw(container, data, get_format({
+        return Flotr.draw(container, data, this.get_format({
                 pie : {
                     show: true
                 },
@@ -192,7 +191,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
     },
 
     graph_radar: function (container, data) {
-        return Flotr.draw(container, data, get_format({
+        return Flotr.draw(container, data, this.get_format({
                 radar : {
                     show : true,
                     stacked : this.stacked
@@ -206,7 +205,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
     },
 
     graph_line: function (container, data) {
-        return Flotr.draw(container, data, get_format({
+        return Flotr.draw(container, data, this.get_format({
                 lines : {
                     show : true,
                     stacked : this.stacked
@@ -230,23 +229,25 @@ instance.web_graph.GraphView = instance.web.View.extend({
                 this[i] = options.data[i];
 
         mode_options = (this.mode=='area')?{lines: {fill: true}}:{}
+        if (this.graph)
+            this.graph.destroy();
 
         // Render the graph
         this.$element.find(".graph_header_legend").children().remove()
-        data = this.get_data(mode_options);
+        data = this.graph_get_data(mode_options);
-        graph = {
+        this.graph = {
-            radar: graph_radar,
+            radar: $.proxy(this, "graph_radar"),
-            pie: graph_pie,
+            pie: $.proxy(this, "graph_pie"),
-            bar: graph_bar,
+            bar: $.proxy(this, "graph_bar"),
-            area: graph_line,
+            area: $.proxy(this, "graph_line"),
-            line: graph_line
+            line: $.proxy(this, "graph_line")
-        }[this.mode](container, data)
+        }[this.mode](this.container, data)
 
         // Update styles of menus
 
         this.$element.find("a[id^='graph_']").removeClass("active");
-        this.$element.find("a[id='graph_"+mode+"']").addClass("active");
+        this.$element.find("a[id='graph_"+this.mode+"']").addClass("active");
-        this.$element.find("a[id='graph_"+mode+(this.stacked?"_stacked":"_not_stacked")+"']").addClass("active");
+        this.$element.find("a[id='graph_"+this.mode+(this.stacked?"_stacked":"_not_stacked")+"']").addClass("active");
 
         if (this.legend=='inside')
             this.$element.find("a[id='graph_legend_inside']").addClass("active");
@@ -257,11 +258,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
         if (this.spreadsheet)
             this.$element.find("a[id='graph_show_data']").addClass("active");
-        return graph;
+        return this.graph;
-    },
-
-    schedule_chart: function(results) {
-        this.graph_render({})
     },
 
     // render the graph using the domain, context and group_by
@@ -271,7 +268,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
         return $.when(this.is_loaded).pipe(function() {
             // todo: find the right syntax to perform an Ajax call
             // return self.rpc.graph_get_data(self.view_id, domain, context, group_by).then($.proxy(self, 'schedule_chart'));
-            $.proxy(self, "schedule_chart");
+            $.proxy(self, "graph_render");
         });
     },
 

addons/web_graph/static/src/xml/web_graph.xml

@@ -1,9 +1,8 @@
 <template>
     <div t-name="GraphView" id="element_id-chart" class="editor-render" style="height:300px; width:300px; position:relative;">
-        <h1>This is a test</h1>
         <div class="graph_header_legend">
         </div>
-        <a href="#" class="i dropdown-menu-icon" data-toggle="dropdown">B</a>
+        <a href="#" class="oe_i dropdown-menu-icon" data-toggle="dropdown">B</a>
         <div class="graph-dropdown">
             <div class="menu-section">
                 Graph Mode:
@@ -12,14 +11,14 @@
                 <li><a href="#" id="graph_pie">Pie</a></li>
                 <li>
                     <a href="#" id="graph_bar">Bars</a>
-                    <div class="i graph-menu-options">
+                    <div class="oe_i graph-menu-options">
                         <a href="#" id="graph_bar_stacked">w</a>
                         <a href="#" id="graph_bar_not_stacked">O</a>
                     </div>
                 </li>
                 <li><a href="#" id="graph_line">Lines</a></li>
                 <li><a href="#" id="graph_area">Areas</a>
-                    <div class="i graph-menu-options">
+                    <div class="oe_i graph-menu-options">
                         <a href="#" id="graph_area_stacked">w</a>
                         <a href="#" id="graph_area_not_stacked">O</a>
                     </div>