[IMP]show stackbarchart when there is group and improved code for legend and color.

bzr revid: kch@tinyerp.com-20110506124108-ov131ru1os1acel6
This commit is contained in:
Kunal Chavda (OpenERP) 2011-05-06 18:11:08 +05:30
parent 6b56e10d11
commit e5dc3d5d54
2 changed files with 192 additions and 110 deletions

View File

@ -28,151 +28,232 @@ openerp.base_graph.GraphView = openerp.base.Controller.extend({
on_loaded: function(data) {
var self = this;
this.fields_view = data.fields_view;
this.name = this.fields_view.name || this.fields_view.arch.attrs.string;
this.view_id = this.fields_view.view_id;
this.name = this.fields_view.name || this.fields_view.arch.attrs.string;
this.view_id = this.fields_view.view_id;
this.chart = this.fields_view.arch.attrs.type || 'pie';
this.fields = this.fields_view.fields;
this.chart_info_fields = [];
this.operator_field = '';
this.group_field = '';
this.orientation = this.fields_view.arch.attrs.orientation || '';
for(fld in this.fields_view.arch.children) {
if (this.fields_view.arch.children[fld].attrs.operator) {
if (this.fields_view.arch.children[fld].attrs.operator) {
this.operator_field = this.fields_view.arch.children[fld].attrs.name;
}
else if (this.fields_view.arch.children[fld].attrs.group) {
this.group_field = this.fields_view.arch.children[fld].attrs.name;
this.group_field = this.fields_view.arch.children[fld].attrs.name;
}
else {
this.chart_info_fields.push(this.fields_view.arch.children[fld].attrs.name);
}
}
if(this.operator_field == ''){
this.operator_field = this.chart_info_fields[1];
}
this.chart_info = this.chart_info_fields[0];
this.load_chart();
},
},
load_chart: function() {
load_chart: function(result) {
var self = this;
this.dataset.read_ids(
this.dataset.ids,
this.fields,
function(result) {
self.schedule_chart(result)
}
)
if(result){
self.schedule_chart(result);
}else{
this.dataset.read_ids(
this.dataset.ids,
{},
function(result) {
self.schedule_chart(result);
}
)
}
},
schedule_chart: function(result) {
this.$element.html(QWeb.render("GraphView", {"fields_view": this.fields_view, "chart": this.chart}));
for(res in result) {
for(fld in result[res]) {
if (fld != 'state') {
if (result.length){
for(res in result) {
for(fld in result[res]) {
if (typeof result[res][fld] == 'object') {
result[res][fld] = result[res][fld][result[res][fld].length - 1];
}
}
}
}
if(this.chart == 'bar') {
return this.schedule_bar(result, "barchart")
} else if(this.chart == "pie") {
return this.schedule_pie(result, "piechart");
if(this.chart == 'bar') {
return this.schedule_bar(result);
} else if(this.chart == "pie") {
return this.schedule_pie(result);
}
}
},
schedule_bar: function(result, container) {
schedule_bar: function(result) {
var self = this;
var view_chart = this.orientation == 'horizontal'? 'barH' : this.chart || 'bar';
var view_chart = '';
var xystr = {};
var xyname = {};
var res = [];
var group_list = [];
var opration_fld = {};
for (i in result){
var gen_key = result[i][self.chart_info_fields]+"_"+result[i][self.group_field]
if (opration_fld[gen_key] == undefined){
var map_val = {}
map_val[self.operator_field] = result[i][self.operator_field];
map_val[self.chart_info_fields] = result[i][self.chart_info_fields];
if (this.group_field){
map_val[self.group_field] = result[i][self.group_field].replace(" ", "_");
}else{
map_val[self.group_field] = result[i][self.group_field];
}
opration_fld[gen_key] = map_val;
}else{
map_val = opration_fld[gen_key];
map_val[self.operator_field] = map_val[self.operator_field] + result[i][self.operator_field];
opration_fld[gen_key] = map_val;
}
}
result = []
for (i in opration_fld){
result.push(opration_fld[i]);
}
var COLOR_PALETTE = ['#ff8e00', '#ff0000', '#b0008c', '#9000ff', '#0078ff', '#00ff00', '#e6ff00', '#ffff00',
'#905000', '#9b0000', '#840067', '#9abe00', '#ffc900', '#510090', '#0000c9', '#009b00',
'#75507b', '#3465a4', '#73d216', '#c17d11', '#edd400', '#fcaf3e', '#ef2929', '#ff00c9',
'#ad7fa8', '#729fcf', '#8ae234', '#e9b96e', '#fce94f', '#f57900', '#cc0000', '#d400a8'];
if(this.group_field){
view_chart = this.orientation == 'horizontal'? 'stackedBarH' : 'stackedBar';
}else{
view_chart = this.orientation == 'horizontal'? 'barH' : 'bar';
}
for (i in result){
if (this.group_field){
var newkey =result[i][this.group_field].replace(" ", "_");
}else{
var newkey =result[i][this.group_field];
}
if (jQuery.inArray(newkey, group_list) == -1){
group_list.push(newkey);
}
}
for (i in result){
var xystring = result[i][this.chart_info_fields];
if (this.group_field){
var newkey =result[i][this.group_field].replace(" ", "_");
}else{
var newkey =result[i][this.group_field];
}
if (xystr[xystring] == undefined){
xyname = {};
xyname['name'] = xystring;
for (j in group_list){
xyname[group_list[j]] = 0.0001;
}
xyname[newkey] = result[i][this.operator_field];
xystr[xystring] = xyname;
}
else{
xyname = {};
xyname = xystr[xystring];
xyname[newkey] = result[i][this.operator_field];
xystr[xystring] = xyname;
}
}
for (i in xystr){
res.push(xystr[i]);
}
//for legend color
var grp_color = [];
for (i in group_list){
var legend = {};
if (group_list[i] == undefined){
legend['text'] = self.fields[self.operator_field]['string']
}else{
legend['text'] = group_list[i];
}
legend['color'] = COLOR_PALETTE[i];
grp_color.push(legend);
}
var temp_ax = {};
var oth_ax = {};
temp_ax['template'] = "#name#";
temp_ax['lines'] = true;
oth_ax['lines'] = true;
if (this.orientation == 'horizontal'){
var x_ax = oth_ax;
var y_ax = temp_ax;
}else{
var x_ax = temp_ax;
var y_ax = oth_ax;
}
var bar_chart = new dhtmlxchartChart({
view: view_chart,
container: container,
gradient: "3d",
border: false,
width: 30,
origin:0,
legend: {
view: view_chart,
container: "barchart",
value:"#"+group_list[0]+"#",
gradient: "3d",
border: false,
width: 30,
color:grp_color[0]['color'],
origin:0,
xAxis: x_ax,
yAxis: y_ax,
legend: {
values: grp_color,
align:"right",
valign:"top",
marker:{
type:"round",
width:12
},
template: self.fields[self.operator_field]['string']
valign:"top",
marker:{
type:"round",
width:12
},
}
});
if(self.group_field) {
bar_chart.define("group",{
by:"#"+self.chart_info_fields[0]+"#",
map:{
map_fld:["#"+self.operator_field+"#", "sum"]
}
});
bar_chart.define("value","#map_fld#");
bar_chart.define("label","#map_fld#");
for (var i = 1; i<group_list.length;i++){
bar_chart.addSeries({
value: "#"+grp_color[i]['text']+"#",
color: grp_color[i]['color']
});
}
else{
bar_chart.define("value","#"+self.operator_field+"#");
bar_chart.define("label","#"+self.chart_info_fields[0]+"#");
}
if(view_chart == 'barH') {
bar_chart.define("xAxis",{
title: this.fields[this.operator_field]['string'],
lines: true
});
bar_chart.define("yAxis",{
template: "#id#",
title: this.fields[this.chart_info_fields[0]]['string'],
lines: true
});
} else {
bar_chart.define("xAxis",{
template:"#"+this.chart_info_fields[0]+"#",
title: this.fields[this.chart_info_fields[0]]['string'],
lines: true
});
bar_chart.define("yAxis",{
title: this.fields[this.operator_field]['string'],
lines: true,
});
}
bar_chart.parse(result,"json");
bar_chart.parse(res,"json");
},
schedule_pie: function(result, container) {
schedule_pie: function(result) {
var chart = new dhtmlxchartChart({
view:"pie",
container:container,
value:"#"+this.operator_field+"#",
color:"#d2ed7e",
label:"#"+this.chart_info_fields[0]+"#",
pieInnerText:"<b>#"+this.operator_field+"#</b>",
gradient:"3d",
view:"pie",
container:"piechart",
value:"#"+this.operator_field+"#",
color:"#d2ed7e",
label:"#"+this.chart_info_fields[0]+"#",
pieInnerText:"<b>#"+this.operator_field+"#</b>",
gradient:"3d",
legend: {
width: 100,
align:"right",
valign:"top",
marker:{
type:"round",
width:12
},
valign:"top",
marker:{
type:"round",
width:12
},
template:"#"+this.chart_info_fields[0]+"#"
}
});
chart.parse(result,"json");
});
chart.parse(result,"json");
},
do_search: function(domains, contexts, groupbys) {
@ -184,10 +265,16 @@ openerp.base_graph.GraphView = openerp.base.Controller.extend({
group_by_seq: groupbys
}, function (results) {
// TODO: handle non-empty results.group_by with read_group
if(contexts[0]['group_by']){
self.chart_info_fields = contexts[0]['group_by'];
}
else{
self.chart_info_fields = self.chart_info;
}
self.dataset.context = self.context = results.context;
self.dataset.domain = self.domain = results.domain;
self.dataset.read_slice(self.fields, 0, self.limit,function(result){
self.schedule_chart(result)
self.load_chart(result);
});
});

View File

@ -1,17 +1,12 @@
<template>
<t t-name="GraphView">
<h2 class="oe_view_title"><t t-esc="fields_view.arch.attrs.string"/></h2>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<div t-att-id="chart+'chart'" style="width:900px;height:500px;border:1px solid #A4BED4;"></div>
</td>
<!--<td><div id="barchart" style="width:900px;height:500px;border:1px solid #A4BED4;"></div></td>
<td>
<div id="piechart" style="width:600px;height:250px;border:1px solid #A4BED4;"></div>
<div id="stackedchart" style="width:600px;height:250px;border:1px solid #A4BED4;"></div>
</td> -->
</tr>
</table>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<div t-att-id="chart+'chart'" style="width:900px;height:500px;border:1px solid #A4BED4;"></div>
</td>
</tr>
</table>
</t>
</template>