[IMP] add widgets (chart view and pivot view) in addon web_graph

bzr revid: ged@openerp.com-20131108130806-ez2a6sxdsy0bzg62
This commit is contained in:
Gery Debongnie 2013-11-08 14:08:06 +01:00
parent 23b9f226c7
commit 7ad9aecc13
2 changed files with 85 additions and 7 deletions

View File

@ -1,28 +1,79 @@
/*---------------------------------------------------------
* OpenERP web_graph
*---------------------------------------------------------*/
/*global openerp:true*/
/*global $:true*/
'use strict';
openerp.web_graph = function (instance) {
var _lt = instance.web._lt;
var _t = instance.web._t;
instance.web.views.add('graph', 'instance.web_graph.GraphView');
instance.web_graph.GraphView = instance.web.View.extend({
template: "GraphView",
template: 'GraphView',
display_name: _lt('Graph'),
view_type: "graph",
view_type: 'graph',
events: {
'click .graph_mode_selection li' : function (event) {
event.preventDefault();
var mode = event.target.attributes['data-mode'].nodeValue;
if (mode == 'data') {
this.chart_view.hide();
this.pivot_table.show();
} else {
this.pivot_table.hide();
this.chart_view.show(mode);
}
},
},
init: function(parent, dataset, view_id, options) {
this._super(parent, dataset, view_id, options);
this.pivot_table = new PivotTable(this);
this.chart_view = new ChartView(this);
},
view_loading: function (fields_view_get) {
this.pivot_table.appendTo('.graph_pivot');
this.chart_view.appendTo('.graph_chart');
this.chart_view.hide();
},
do_show: function () {
this.do_push_state({});
return this._super();
},
});
var PivotTable = instance.web.Widget.extend({
template: 'pivot_table',
show: function () {
this.$el.css('display', 'block');
},
hide: function () {
this.$el.css('display', 'none');
},
});
var ChartView = instance.web.Widget.extend({
template: 'chart_view',
show: function () {
this.$el.css('display', 'block');
},
hide: function () {
this.$el.css('display', 'none');
},
});
};

View File

@ -1,4 +1,31 @@
<template>
<div t-name="GraphView">
</div>
</template>
<templates>
<t t-name="GraphView">
<div class="graph_header">
<div class="btn-group">
<label type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Chart type <span class="caret"></span>
</label>
<ul class="dropdown-menu graph_mode_selection" role="menu">
<li><a data-mode="data" href="#">Pivot table</a></li>
<li><a data-mode="bar_chart" href="#">Bar chart</a></li>
<li><a data-mode="line_chart" href="#">Line Chart</a></li>
<li><a data-mode="pie_chart" href="#">Pie chart</a></li>
</ul>
</div>
</div>
<div class="graph_main_content">
<div class="graph_pivot"></div>
<div class="graph_chart"></div>
</div>
</t>
<t t-name="pivot_table">
<div>Hello Pivot</div>
</t>
<t t-name="chart_view">
<svg></svg>
</t>
</templates>