odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[FIX] fixes an issue where the chart code didn't select the correct DOM node to display the chart (addon web_graph) 

bzr revid: ged@openerp.com-20131127110538-rsm6hl4lgdkxya3p
This commit is contained in:
Gery Debongnie 2013-11-27 12:05:38 +01:00
parent 22162b5a10
commit e0744a7427
3 changed files with 39 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
addons/web_graph/static/src/js/charts.js
View File

@ -1,5 +1,5 @@
openerp.web_graph.draw_chart = function (mode, pivot) {
openerp.web_graph.draw_chart = function (mode, pivot, svg) {
var values = _.map(pivot.rows.main.children, function (pt) {
var val = pivot.get_value(pt.id, pivot.cols.main.id);
return {x: pt.title, y: val};
@ -7,18 +7,18 @@ openerp.web_graph.draw_chart = function (mode, pivot) {
switch (mode) {
case 'bar_chart':
openerp.web_graph.bar_chart(values);
openerp.web_graph.bar_chart(values, svg);
break;
case 'line_chart':
openerp.web_graph.line_chart(values);
openerp.web_graph.line_chart(values, svg);
break;
case 'pie_chart':
openerp.web_graph.pie_chart(values);
openerp.web_graph.pie_chart(values, svg);
break;
}
}
openerp.web_graph.bar_chart = function (data) {
openerp.web_graph.bar_chart = function (data, svg) {
nv.addGraph(function () {
var chart = nv.models.discreteBarChart()
.tooltips(false)
@ -27,7 +27,7 @@ openerp.web_graph.bar_chart = function (data) {
.width(650)
.height(400);
d3.select('.graph_main_content svg')
d3.select(svg)
.datum([{key: 'Bar chart', values:data}])
.attr('width', 650)
.attr('height', 400)
@ -38,7 +38,7 @@ openerp.web_graph.bar_chart = function (data) {
});
};
openerp.web_graph.line_chart = function (data) {
openerp.web_graph.line_chart = function (data, svg) {
nv.addGraph(function () {
var chart = nv.models.lineChart()
.x(function (d,u) { return u; })
@ -46,7 +46,7 @@ openerp.web_graph.line_chart = function (data) {
.height(300)
.margin({top: 30, right: 20, bottom: 20, left: 60});
d3.select('.graph_main_content svg')
d3.select(svg)
.attr('width', 600)
.attr('height', 300)
.datum([{key: 'Bar chart', values: data}])
@ -56,14 +56,14 @@ openerp.web_graph.line_chart = function (data) {
});
};
openerp.web_graph.pie_chart = function(data) {
openerp.web_graph.pie_chart = function(data, svg) {
nv.addGraph(function () {
var chart = nv.models.pieChart()
.color(d3.scale.category10().range())
.width(650)
.height(400);
d3.select('.graph_main_content svg')
d3.select(svg)
.datum(data)
.transition().duration(1200)
.attr('width', 650)

30
addons/web_graph/static/src/js/graph.js
View File

@ -27,7 +27,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
'click .graph_mode_selection li' : function (event) {
event.preventDefault();
var mode = event.target.attributes['data-mode'].nodeValue;
this.switch_mode(mode);
this.mode = mode;
this.display_data();
},
'click .graph_expand_selection li' : function (event) {
@ -151,9 +152,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
start: function () {
this.table = $('<table></table>');
this.svg = $('<div><svg></svg></div>');
this.$el.filter('.graph_main_content').append(this.table);
this.$el.filter('.graph_main_content').append(this.svg);
this.$('.graph_main_content').append(this.table);
return this.load_view();
},
@ -177,20 +176,17 @@ instance.web_graph.GraphView = instance.web.View.extend({
return this._super();
},
switch_mode: function (mode) {
this.mode = mode;
var table_modes = ['pivot', 'heatmap', 'row_heatmap', 'col_heatmap'];
if (_.contains(table_modes, mode)) {
this.draw_table();
this.table.css('display', 'block');
this.svg.css('display','none');
} else {
this.table.css('display', 'none');
this.svg.remove();
this.svg = $('<div><svg></svg></div>');
this.$el.filter('.graph_main_content').append(this.svg);
openerp.web_graph.draw_chart(mode, this.pivot_table);
display_data: function () {
this.$('.graph_main_content svg').remove();
this.table.empty();
var table_modes = ['pivot', 'heatmap', 'row_heatmap', 'col_heatmap'];
if (_.contains(table_modes, this.mode)) {
this.draw_table();
} else {
this.$('.graph_main_content').append($('<div><svg></svg></div>'));
var svg = this.$('.graph_main_content svg')[0];
openerp.web_graph.draw_chart(this.mode, this.pivot_table, svg);
}
},

34
addons/web_graph/static/src/xml/web_graph.xml
View File

@ -1,5 +1,5 @@
<templates>
<t t-name="GraphView">
<div t-name="GraphView">
<div class="graph_header">
<div class="btn-group">
<label type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@ -48,23 +48,21 @@
</div>
</div>
<div class="graph_main_content"></div>
</t>
</div>
<t t-name="field_selection">
<div class="btn-group">
<span class="btn btn-default field-selection dropdown-toggle" data-toggle="dropdown"></span>
<ul class="dropdown-menu" role="menu">
<t t-foreach="fields" t-as="field">
<li>
<a class="field-selection" t-att-data-field-id="field.id" t-att-data-id="header_id" href="#">
<t t-esc="field.value"/>
</a>
</li>
</t>
<li class="divider"></li>
<li><a>Clear groups</a></li>
</ul>
</div>
</t>
<div t-name="field_selection" class="btn-group">
<span class="btn btn-default field-selection dropdown-toggle" data-toggle="dropdown"></span>
<ul class="dropdown-menu" role="menu">
<t t-foreach="fields" t-as="field">
<li>
<a class="field-selection" t-att-data-field-id="field.id" t-att-data-id="header_id" href="#">
<t t-esc="field.value"/>
</a>
</li>
</t>
<li class="divider"></li>
<li><a>Clear groups</a></li>
</ul>
</div>
</templates>