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

   1 /*---------------------------------------------------------
   2  * OpenERP web_graph
   3  *---------------------------------------------------------*/
   4
   5 openerp.web_graph = function (openerp) {
   6 var COLOR_PALETTE = [
   7     '#cc99ff', '#ccccff', '#48D1CC', '#CFD784', '#8B7B8B', '#75507b',
   8     '#b0008c', '#ff0000', '#ff8e00', '#9000ff', '#0078ff', '#00ff00',
   9     '#e6ff00', '#ffff00', '#905000', '#9b0000', '#840067', '#9abe00',
  10     '#ffc900', '#510090', '#0000c9', '#009b00', '#75507b', '#3465a4',
  11     '#73d216', '#c17d11', '#edd400', '#fcaf3e', '#ef2929', '#ff00c9',
  12     '#ad7fa8', '#729fcf', '#8ae234', '#e9b96e', '#fce94f', '#f57900',
  13     '#cc0000', '#d400a8'];
  14
  15 var QWeb = openerp.web.qweb,
  16      _lt = openerp.web._lt;
  17 openerp.web.views.add('graph', 'openerp.web_graph.GraphView');
  18 openerp.web_graph.GraphView = openerp.web.View.extend({
  19     display_name: _lt('Graph'),
  20
  21     init: function(parent, dataset, view_id, options) {
  22         this._super(parent);
  23         this.set_default_options(options);
  24         this.dataset = dataset;
  25         this.view_id = view_id;
  26
  27         this.first_field = null;
  28         this.abscissa = null;
  29         this.ordinate = null;
  30         this.columns = [];
  31         this.group_field = null;
  32         this.is_loaded = $.Deferred();
  33
  34         this.renderer = null;
  35     },
  36     stop: function () {
  37         if (this.renderer) {
  38             clearTimeout(this.renderer);
  39         }
  40         this._super();
  41     },
  42     start: function() {
  43         var self = this;
  44         this._super();
  45         var loaded;
  46         if (this.embedded_view) {
  47             loaded = $.when([self.embedded_view]);
  48         } else {
  49             loaded = this.rpc('/web/view/load', {
  50                     model: this.dataset.model,
  51                     view_id: this.view_id,
  52                     view_type: 'graph'
  53             });
  54         }
  55         return $.when(
  56             this.dataset.call_and_eval('fields_get', [false, {}], null, 1),
  57             loaded)
  58             .then(function (fields_result, view_result) {
  59                 self.fields = fields_result[0];
  60                 self.fields_view = view_result[0];
  61                 self.on_loaded(self.fields_view);
  62             });
  63     },
  64     /**
  65      * Returns all object fields involved in the graph view
  66      */
  67     list_fields: function () {
  68         var fs = [this.abscissa];
  69         fs.push.apply(fs, _(this.columns).pluck('name'));
  70         if (this.group_field) {
  71             fs.push(this.group_field);
  72         }
  73         return fs;
  74     },
  75     on_loaded: function() {
  76         this.chart = this.fields_view.arch.attrs.type || 'pie';
  77         this.orientation = this.fields_view.arch.attrs.orientation || 'vertical';
  78
  79         _.each(this.fields_view.arch.children, function (field) {
  80             var attrs = field.attrs;
  81             if (attrs.group) {
  82                 this.group_field = attrs.name;
  83             } else if(!this.abscissa) {
  84                 this.first_field = this.abscissa = attrs.name;
  85             } else {
  86                 this.columns.push({
  87                     name: attrs.name,
  88                     operator: attrs.operator || '+'
  89                 });
  90             }
  91         }, this);
  92         this.ordinate = this.columns[0].name;
  93         this.is_loaded.resolve();
  94     },
  95     schedule_chart: function(results) {
  96         var self = this;
  97         this.$element.html(QWeb.render("GraphView", {
  98             "fields_view": this.fields_view,
  99             "chart": this.chart,
 100             'element_id': this.widget_parent.element_id
 101         }));
 102
 103         var fields = _(this.columns).pluck('name').concat([this.abscissa]);
 104         if (this.group_field) { fields.push(this.group_field); }
 105         // transform search result into usable records (convert from OpenERP
 106         // value shapes to usable atomic types
 107         var records = _(results).map(function (result) {
 108             var point = {};
 109             _(result).each(function (value, field) {
 110                 if (!_(fields).contains(field)) { return; }
 111                 if (value === false) { point[field] = false; return; }
 112                 switch (self.fields[field].type) {
 113                 case 'selection':
 114                     point[field] = _(self.fields[field].selection).detect(function (choice) {
 115                         return choice[0] === value;
 116                     })[1];
 117                     break;
 118                 case 'many2one':
 119                     point[field] = value[1];
 120                     break;
 121                 case 'integer': case 'float': case 'char':
 122                 case 'date': case 'datetime':
 123                     point[field] = value;
 124                     break;
 125                 default:
 126                     throw new Error(
 127                         "Unknown field type " + self.fields[field].type
 128                         + "for field " + field + " (" + value + ")");
 129                 }
 130             });
 131             return point;
 132         });
 133         // aggregate data, because dhtmlx is crap. Aggregate on abscissa field,
 134         // leave split on group field => max m*n records where m is the # of
 135         // values for the abscissa and n is the # of values for the group field
 136         var graph_data = [];
 137         _(records).each(function (record) {
 138             var abscissa = record[self.abscissa],
 139                 group = record[self.group_field];
 140             var r = _(graph_data).detect(function (potential) {
 141                 return potential[self.abscissa] === abscissa
 142                         && (!self.group_field
 143                             || potential[self.group_field] === group);
 144             });
 145             var datapoint = r || {};
 146
 147             datapoint[self.abscissa] = abscissa;
 148             if (self.group_field) { datapoint[self.group_field] = group; }
 149             _(self.columns).each(function (column) {
 150                 var val = record[column.name],
 151                     aggregate = datapoint[column.name];
 152                 switch(column.operator) {
 153                 case '+':
 154                     datapoint[column.name] = (aggregate || 0) + val;
 155                     return;
 156                 case '*':
 157                     datapoint[column.name] = (aggregate || 1) * val;
 158                     return;
 159                 case 'min':
 160                     datapoint[column.name] = (aggregate || Infinity) > val
 161                                            ? val
 162                                            : aggregate;
 163                     return;
 164                 case 'max':
 165                     datapoint[column.name] = (aggregate || -Infinity) < val
 166                                            ? val
 167                                            : aggregate;
 168                 }
 169             });
 170
 171             if (!r) { graph_data.push(datapoint); }
 172         });
 173         graph_data = _(graph_data).sortBy(function (point) {
 174             return point[self.abscissa] + '[[--]]' + point[self.group_field];
 175         });
 176         if (_.include(['bar','line','area'],this.chart)) {
 177             return this.schedule_bar_line_area(graph_data);
 178         } else if (this.chart == "pie") {
 179             return this.schedule_pie(graph_data);
 180         }
 181     },
 182     schedule_bar_line_area: function(results) {
 183         var self = this;
 184         var group_list,
 185         view_chart = (self.chart == 'line')?'line':(self.chart == 'area')?'area':'';
 186         if (!this.group_field || !results.length) {
 187             if (self.chart == 'bar'){
 188                 view_chart = (this.orientation === 'horizontal') ? 'barH' : 'bar';
 189             }
 190             group_list = _(this.columns).map(function (column, index) {
 191                 return {
 192                     group: column.name,
 193                     text: self.fields[column.name].string,
 194                     color: COLOR_PALETTE[index % (COLOR_PALETTE.length)]
 195                 }
 196             });
 197         } else {
 198             // dhtmlx handles clustered bar charts (> 1 column per abscissa
 199             // value) and stacked bar charts (basically the same but with the
 200             // columns on top of one another instead of side by side), but it
 201             // does not handle clustered stacked bar charts
 202             if (self.chart == 'bar' && (this.columns.length > 1)) {
 203                 this.$element.text(
 204                     'OpenERP Web does not support combining grouping and '
 205                   + 'multiple columns in graph at this time.');
 206                 throw new Error(
 207                     'dhtmlx can not handle columns counts of that magnitude');
 208             }
 209             // transform series for clustered charts into series for stacked
 210             // charts
 211             if (self.chart == 'bar'){
 212                 view_chart = (this.orientation === 'horizontal')
 213                         ? 'stackedBarH' : 'stackedBar';
 214             }
 215             group_list = _(results).chain()
 216                     .pluck(this.group_field)
 217                     .uniq()
 218                     .map(function (value, index) {
 219                         return {
 220                             group: self.ordinate + '_' +
 221                                     value.toLowerCase().replace(/[\s\/]+/g,'_'),
 222                             text: value,
 223                             color: COLOR_PALETTE[index % COLOR_PALETTE.length]
 224                         };
 225                     }).value();
 226
 227             results = _(results).chain()
 228                 .groupBy(function (record) { return record[self.abscissa]; })
 229                 .map(function (records) {
 230                     var r = {};
 231                     // second argument is coerced to a str, no good for boolean
 232                     r[self.abscissa] = records[0][self.abscissa];
 233                     _(records).each(function (record) {
 234                         var key = _.str.sprintf('%s_%s',
 235                             self.ordinate,
 236                             record[self.group_field].toLowerCase().replace(/[\s\/]+/g,'_'));
 237                         r[key] = record[self.ordinate];
 238                     });
 239                     return r;
 240                 })
 241                 .value();
 242         }
 243         var abscissa_description = {
 244             title: "<b>" + this.fields[this.abscissa].string + "</b>",
 245             template: function (obj) {
 246                 return obj[self.abscissa] || 'Undefined';
 247             }
 248         };
 249         var ordinate_description = {
 250             lines: true,
 251             title: "<b>" + this.fields[this.ordinate].string + "</b>"
 252         };
 253
 254         var x_axis, y_axis;
 255         if (self.chart == 'bar' && self.orientation == 'horizontal') {
 256             x_axis = ordinate_description;
 257             y_axis = abscissa_description;
 258         } else {
 259             x_axis = abscissa_description;
 260             y_axis = ordinate_description;
 261         }
 262         var renderer = function () {
 263             if (self.$element.is(':hidden')) {
 264                 self.renderer = setTimeout(renderer, 100);
 265                 return;
 266             }
 267             self.renderer = null;
 268             var charts = new dhtmlXChart({
 269                 view: view_chart,
 270                 container: self.widget_parent.element_id+"-"+self.chart+"chart",
 271                 value:"#"+group_list[0].group+"#",
 272                 gradient: (self.chart == "bar") ? "3d" : "light",
 273                 alpha: (self.chart == "area") ? 0.6 : 1,
 274                 border: false,
 275                 width: 1024,
 276                 tooltip:{
 277                     template: _.str.sprintf("#%s#, %s=#%s#",
 278                         self.abscissa, group_list[0].text, group_list[0].group)
 279                 },
 280                 radius: 0,
 281                 color: (self.chart != "line") ? group_list[0].color : "",
 282                 item: (self.chart == "line") ? {
 283                             borderColor: group_list[0].color,
 284                             color: "#000000"
 285                         } : "",
 286                 line: (self.chart == "line") ? {
 287                             color: group_list[0].color,
 288                             width: 3
 289                         } : "",
 290                 origin:0,
 291                 xAxis: x_axis,
 292                 yAxis: y_axis,
 293                 padding: {
 294                     left: 75
 295                 },
 296                 legend: {
 297                     values: group_list,
 298                     align:"left",
 299                     valign:"top",
 300                     layout: "x",
 301                     marker: {
 302                         type:"round",
 303                         width:12
 304                     }
 305                 }
 306             });
 307             self.$element.find("#"+self.widget_parent.element_id+"-"+self.chart+"chart").width(
 308                 self.$element.find("#"+self.widget_parent.element_id+"-"+self.chart+"chart").width()+120);
 309
 310             for (var m = 1; m<group_list.length;m++){
 311                 var column = group_list[m];
 312                 if (column.group === self.group_field) { continue; }
 313                 charts.addSeries({
 314                     value: "#"+column.group+"#",
 315                     tooltip:{
 316                         template: _.str.sprintf("#%s#, %s=#%s#",
 317                             self.abscissa, column.text, column.group)
 318                     },
 319                     color: (self.chart != "line") ? column.color : "",
 320                     item: (self.chart == "line") ? {
 321                             borderColor: column.color,
 322                             color: "#000000"
 323                         } : "",
 324                     line: (self.chart == "line") ? {
 325                             color: column.color,
 326                             width: 3
 327                         } : ""
 328                 });
 329             }
 330             charts.parse(results, "json");
 331             self.$element.find("#"+self.widget_parent.element_id+"-"+self.chart+"chart").height(
 332                 self.$element.find("#"+self.widget_parent.element_id+"-"+self.chart+"chart").height()+50);
 333             charts.attachEvent("onItemClick", function(id) {
 334                 self.open_list_view(charts.get(id));
 335             });
 336         };
 337         if (this.renderer) {
 338             clearTimeout(this.renderer);
 339         }
 340         this.renderer = setTimeout(renderer, 0);
 341     },
 342     schedule_pie: function(result) {
 343         var self = this;
 344         var renderer = function () {
 345             if (self.$element.is(':hidden')) {
 346                 self.renderer = setTimeout(renderer, 100);
 347                 return;
 348             }
 349             self.renderer = null;
 350             var chart =  new dhtmlXChart({
 351                 view:"pie3D",
 352                 container:self.element_id+"-piechart",
 353                 value:"#"+self.ordinate+"#",
 354                 pieInnerText:function(obj) {
 355                     var sum = chart.sum("#"+self.ordinate+"#");
 356                     var val = obj[self.ordinate] / sum * 100 ;
 357                     return val.toFixed(1) + "%";
 358                 },
 359                 tooltip:{
 360                     template:"#"+self.abscissa+"#"+"="+"#"+self.ordinate+"#"
 361                 },
 362                 gradient:"3d",
 363                 height: 20,
 364                 radius: 200,
 365                 legend: {
 366                     width: 300,
 367                     align:"left",
 368                     valign:"top",
 369                     layout: "x",
 370                     marker:{
 371                         type:"round",
 372                         width:12
 373                     },
 374                     template:function(obj){
 375                         return obj[self.abscissa] || 'Undefined';
 376                     }
 377                 }
 378             });
 379             chart.parse(result,"json");
 380             chart.attachEvent("onItemClick", function(id) {
 381                 self.open_list_view(chart.get(id));
 382             });
 383         };
 384         if (this.renderer) {
 385             clearTimeout(this.renderer);
 386         }
 387         this.renderer = setTimeout(renderer, 0);
 388     },
 389     open_list_view : function (id){
 390         var self = this;
 391         // unconditionally nuke tooltips before switching view
 392         $(".dhx_tooltip").remove('div');
 393         id = id[this.abscissa];
 394         if(this.fields[this.abscissa].type == "selection"){
 395             id = _.detect(this.fields[this.abscissa].selection,function(select_value){
 396                 return _.include(select_value, id);
 397             });
 398         }
 399         if (typeof id == 'object'){
 400             id = id[0];
 401         }
 402
 403         var views;
 404         if (this.widget_parent.action) {
 405             views = this.widget_parent.action.views;
 406             if (!_(views).detect(function (view) {
 407                     return view[1] === 'list' })) {
 408                 views = [[false, 'list']].concat(views);
 409             }
 410         } else {
 411             views = _(["list", "form", "graph"]).map(function(mode) {
 412                 return [false, mode];
 413             });
 414         }
 415         this.do_action({
 416             res_model : this.dataset.model,
 417             domain: [[this.abscissa, '=', id], ['id','in',this.dataset.ids]],
 418             views: views,
 419             type: "ir.actions.act_window",
 420             flags: {default_view: 'list'}
 421         });
 422     },
 423
 424     do_search: function(domain, context, group_by) {
 425         var self = this;
 426         return $.when(this.is_loaded).pipe(function() {
 427             // TODO: handle non-empty group_by with read_group?
 428             if (!_(group_by).isEmpty()) {
 429                 self.abscissa = group_by[0];
 430             } else {
 431                 self.abscissa = self.first_field;
 432             }
 433             return self.dataset.read_slice(self.list_fields()).then($.proxy(self, 'schedule_chart'));
 434         });
 435     },
 436
 437     do_show: function() {
 438         this.do_push_state({});
 439         return this._super();
 440     }
 441 });
 442 };
 443 // vim:et fdc=0 fdl=0: