[REF] better code organization for chart drawing in addon web_graph
bzr revid: ged@openerp.com-20131124201049-p7cealv5p11hofr2
This commit is contained in:
Gery Debongnie
parent
40889788d3
commit
46ea9d29fe
|
|
@ -1,75 +1,77 @@
|
|||
|
||||
function draw_chart (svg, mode, pivot) {
|
||||
Charts[mode](pivot);
|
||||
}
|
||||
|
||||
function format_chart_data (pivot) {
|
||||
var values = _.map(pivot.rows.headers[0].children.reverse(), function (pt) {
|
||||
var val = pivot.get_value(pt.id, 2);
|
||||
function draw_chart (mode, pivot) {
|
||||
var values = _.map(pivot.rows.main.children, function (pt) {
|
||||
var val = pivot.get_value(pt.id, pivot.cols.main.id);
|
||||
return {x: pt.name, y: val};
|
||||
});
|
||||
return [{key: 'Bar chart', values: values}];
|
||||
|
||||
switch (mode) {
|
||||
case 'bar_chart':
|
||||
bar_chart(values);
|
||||
break;
|
||||
case 'line_chart':
|
||||
line_chart(values);
|
||||
break;
|
||||
case 'pie_chart':
|
||||
pie_chart(values);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function bar_chart (data) {
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.tooltips(false)
|
||||
.showValues(true)
|
||||
.staggerLabels(true)
|
||||
.width(650)
|
||||
.height(400);
|
||||
|
||||
d3.select('.graph_main_content svg')
|
||||
.datum([{key: 'Bar chart', values:data}])
|
||||
.attr('width', 650)
|
||||
.attr('height', 400)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
};
|
||||
|
||||
var Charts = {
|
||||
bar_chart : function (pivot) {
|
||||
var data = format_chart_data(pivot);
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.tooltips(false)
|
||||
.showValues(true)
|
||||
.staggerLabels(true)
|
||||
.width(650)
|
||||
.height(400);
|
||||
function line_chart (data) {
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.lineChart()
|
||||
.x(function (d,u) { return u; })
|
||||
.width(600)
|
||||
.height(300)
|
||||
.margin({top: 30, right: 20, bottom: 20, left: 60});
|
||||
|
||||
d3.select('.graph_main_content svg')
|
||||
.datum(data)
|
||||
.attr('width', 650)
|
||||
.attr('height', 400)
|
||||
.call(chart);
|
||||
d3.select('.graph_main_content svg')
|
||||
.attr('width', 600)
|
||||
.attr('height', 300)
|
||||
.datum([{key: 'Bar chart', values: data}])
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
},
|
||||
return chart;
|
||||
});
|
||||
};
|
||||
|
||||
line_chart: function (pivot) {
|
||||
data = format_chart_data(pivot);
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.lineChart()
|
||||
.x(function (d,u) { return u; })
|
||||
.width(600)
|
||||
.height(300)
|
||||
.margin({top: 30, right: 20, bottom: 20, left: 60});
|
||||
function pie_chart(data) {
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.color(d3.scale.category10().range())
|
||||
.width(650)
|
||||
.height(400);
|
||||
|
||||
d3.select('.graph_main_content svg')
|
||||
.attr('width', 600)
|
||||
.attr('height', 300)
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
d3.select('.graph_main_content svg')
|
||||
.datum(data)
|
||||
.transition().duration(1200)
|
||||
.attr('width', 650)
|
||||
.attr('height', 400)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
},
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
};
|
||||
|
||||
pie_chart: function (pivot) {
|
||||
data = format_chart_data(pivot);
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.color(d3.scale.category10().range())
|
||||
.width(650)
|
||||
.height(400);
|
||||
|
||||
d3.select('.graph_main_content svg')
|
||||
.datum(data[0].values)
|
||||
.transition().duration(1200)
|
||||
.attr('width', 650)
|
||||
.attr('height', 400)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
@ -178,7 +178,6 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
|||
},
|
||||
|
||||
switch_mode: function (mode) {
|
||||
var self = this;
|
||||
this.mode = mode;
|
||||
if (mode === 'pivot') {
|
||||
this.table.css('display', 'block');
|
||||
|
|
@ -188,7 +187,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
|||
this.svg.remove();
|
||||
this.svg = $('<div><svg></svg></div>');
|
||||
this.$el.filter('.graph_main_content').append(this.svg);
|
||||
draw_chart(this.svg, mode, this.pivot_table);
|
||||
draw_chart(mode, this.pivot_table);
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -326,9 +325,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
|
|||
|
||||
cell.append((value === undefined) ? '' : value);
|
||||
if ((self.heat_map_mode) && (value !== undefined)) {
|
||||
// heat map
|
||||
var ratio = Math.floor(70 + 185*(pivot.total - value)/pivot.total);
|
||||
cell.css("background-color", "rgb(255," + ratio + "," + ratio + ")");
|
||||
var color = Math.floor(50 + 205*(pivot.total - value)/pivot.total);
|
||||
cell.css("background-color", "rgb(255," + color + "," + color + ")");
|
||||
}
|
||||
html_row.append(cell);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue