dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #14405
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 4886: (DV) Pie chart implemented.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 4886 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2011-10-10 14:21:05 +0200
message:
(DV) Pie chart implemented.
added:
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/pie.png
modified:
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js 2011-10-10 09:47:19 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js 2011-10-10 12:12:21 +0000
@@ -37,19 +37,6 @@
pie: 'pie'
}
},
- chart: {
- legend: {
- position: 'top',
- boxStroke: '#ffffff',
- boxStrokeWidth: 0
- },
- grid: {
- opacity: 1,
- fill: '#f1f1f1',
- stroke: '#aaa',
- 'stroke-width': 0.2
- }
- },
style: {
label: {
period: 'font:bold 11px arial; color:#444; line-height:20px',
@@ -207,7 +194,7 @@
getNames: function() {
var a = [];
DV.util.getCmp('multiselect[name="selectedIndicators"]').store.each( function(r) {
- a.push(DV.util.chart.encodeSeriesName(r.data.shortName));
+ a.push(DV.util.chart.getEncodedSeriesName(r.data.shortName));
});
return a;
}
@@ -223,7 +210,7 @@
getNames: function() {
var a = [];
DV.util.getCmp('multiselect[name="selectedDataElements"]').store.each( function(r) {
- a.push(DV.util.chart.encodeSeriesName(r.data.shortName));
+ a.push(DV.util.chart.getEncodedSeriesName(r.data.shortName));
});
return a;
}
@@ -245,7 +232,7 @@
Ext.Array.each(cmp, function(item) {
if (item.getValue()) {
Ext.Array.each(DV.init.system.periods[item.paramName], function(item) {
- a.push(DV.util.chart.encodeSeriesName(item.name));
+ a.push(DV.util.chart.getEncodedSeriesName(item.name));
});
}
});
@@ -285,16 +272,31 @@
treepanel.selectRoot();
}
Ext.Array.each(selection, function(r) {
- a.push(DV.util.chart.encodeSeriesName(r.data.text));
+ a.push(DV.util.chart.getEncodedSeriesName(r.data.text));
});
return a;
}
}
},
chart: {
- encodeSeriesName: function(text) {
+ getEncodedSeriesName: function(text) {
return text.replace(/\./g,'');
},
+ getLegend: function(len) {
+ return {
+ position: len > 3 ? 'right' : 'top',
+ boxStroke: '#ffffff',
+ boxStrokeWidth: 0
+ };
+ },
+ getGrid: function() {
+ return {
+ opacity: 1,
+ fill: '#f1f1f1',
+ stroke: '#aaa',
+ 'stroke-width': 0.2
+ };
+ },
line: {
getSeriesArray: function() {
var a = [];
@@ -378,7 +380,7 @@
getChartStore: function(exe) {
this[DV.state.type](exe);
},
- column: function(exe) {
+ defaultChartStore: function(exe) {
var properties = Ext.Object.getKeys(DV.data.data[0]);
this.chart = Ext.create('Ext.data.Store', {
fields: properties,
@@ -409,38 +411,6 @@
else {
return DV.store.chart;
}
- },
- line: function(exe) {
- var properties = Ext.Object.getKeys(DV.data.data[0]);
- this.chart = Ext.create('Ext.data.Store', {
- fields: properties,
- data: DV.data.data
- });
- this.chart.bottom = properties.slice(0, 1);
- this.chart.left = properties.slice(1, properties.length);
-
- if (exe) {
- DV.chart.getChart(true);
- }
- else {
- return DV.store.chart;
- }
- },
- area: function(exe) {
- var properties = Ext.Object.getKeys(DV.data.data[0]);
- this.chart = Ext.create('Ext.data.Store', {
- fields: properties,
- data: DV.data.data
- });
- this.chart.bottom = properties.slice(0, 1);
- this.chart.left = properties.slice(1, properties.length);
-
- if (exe) {
- DV.chart.getChart(true);
- }
- else {
- return DV.store.chart;
- }
}
};
@@ -610,20 +580,19 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: DV.conf.chart.legend,
+ legend: DV.util.chart.getLegend(DV.state.series.data.length),
axes: [
{
title: 'Value',
type: 'Numeric',
position: 'left',
minimum: 0,
- grid: true,
fields: DV.store.chart.left,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
- even: DV.conf.chart.grid
+ even: DV.util.chart.getGrid()
}
},
{
@@ -652,7 +621,7 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: DV.conf.chart.legend,
+ legend: DV.util.chart.getLegend(DV.state.series.data.length),
axes: [
{
title: DV.conf.finals.dimension[DV.state.category.dimension].rawvalue,
@@ -665,13 +634,12 @@
type: 'Numeric',
position: 'bottom',
minimum: 0,
- grid: true,
fields: DV.store.chart.bottom,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
- even: DV.conf.chart.grid
+ even: DV.util.chart.getGrid()
}
}
],
@@ -694,20 +662,19 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: DV.conf.chart.legend,
+ legend: DV.util.chart.getLegend(DV.state.series.data.length),
axes: [
{
title: 'Value',
type: 'Numeric',
position: 'left',
minimum: 0,
- grid: true,
fields: DV.store.chart.left,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
- even: DV.conf.chart.grid
+ even: DV.util.chart.getGrid()
}
},
{
@@ -726,20 +693,19 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: DV.conf.chart.legend,
+ legend: DV.util.chart.getLegend(DV.state.series.data.length),
axes: [
{
title: 'Value',
type: 'Numeric',
position: 'left',
minimum: 0,
- grid: true,
fields: DV.store.chart.left,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
- even: DV.conf.chart.grid
+ even: DV.util.chart.getGrid()
}
},
{
@@ -760,6 +726,38 @@
}]
});
},
+ pie: function() {
+ this.chart = Ext.create('Ext.chart.Chart', {
+ width: DV.util.viewport.getSize().x,
+ height: DV.util.viewport.getSize().y,
+ animate: true,
+ shadow: true,
+ store: DV.store.chart,
+ legend: DV.util.chart.getLegend(DV.state.category.data.length),
+ insetPadding: 60,
+ series: [{
+ type: 'pie',
+ field: DV.store.chart.left[0],
+ showInLegend: true,
+ tips: {
+ trackMouse: false,
+ width: 160,
+ height: 31,
+ renderer: function(i) {
+ this.setTitle('<span class="dv-chart-tips">' + i.data.x + ': <b>' + i.data[DV.store.chart.left[0]] + '</b></span>');
+ }
+ },
+ label: {
+ field: DV.store.chart.bottom[0]
+ },
+ highlight: {
+ segment: {
+ margin: 10
+ }
+ }
+ }]
+ });
+ },
reload: function() {
var c = DV.util.getCmp('panel[region="center"]');
c.removeAll(true);
@@ -824,6 +822,11 @@
icon: 'images/area.png',
name: DV.conf.finals.chart.area,
tooltip: 'Area chart'
+ },
+ {
+ icon: 'images/pie.png',
+ name: DV.conf.finals.chart.pie,
+ tooltip: 'Pie chart'
}
]
},
@@ -1569,14 +1572,7 @@
cls: 'x-btn-text-icon',
icon: 'images/exit.png',
handler: function() {
- //var d = generateData(8);
- //console.log(DV.store.chart.left);
- //console.log(DV.store.chart.bottom);
- console.log(DV.data.data);
-
-
-
- //window.location.href = DV.conf.finals.ajax.url_portal + 'redirect.action';
+ window.location.href = DV.conf.finals.ajax.url_portal + 'redirect.action';
}
}
]
@@ -1588,6 +1584,11 @@
s.filter(s, vp);
var c = this.query('combobox[name="' + DV.conf.finals.chart.category + '"]')[0];
c.filter(c, vp);
+
+ DV.store.column = DV.store.defaultChartStore;
+ DV.store.line = DV.store.defaultChartStore;
+ DV.store.area = DV.store.defaultChartStore;
+ DV.store.pie = DV.store.defaultChartStore;
},
resize: function() {
this.query('panel[region="west"]')[0].setWidth(DV.conf.layout.west_width);
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css 2011-10-07 10:33:31 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css 2011-10-10 12:12:21 +0000
@@ -162,6 +162,11 @@
background-color: #ddd;
}
+/* Chart tips (tooltip) */
+.x-tip .x-tip-header .x-box-item {
+ text-align: center;
+}
+
/****************
Data Visualizer
***************/
@@ -252,4 +257,10 @@
.dv-multiselect {
color: #111;
}
+
+/* Chart tips */
+.dv-chart-tips {
+ font: normal 13px arial;
+ padding: 0 0 3px 3px;
+}
=== added file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/pie.png'
Binary files dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/pie.png 1970-01-01 00:00:00 +0000 and dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/pie.png 2011-10-10 12:12:21 +0000 differ
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html 2011-10-10 09:47:19 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html 2011-10-10 12:12:21 +0000
@@ -7,7 +7,6 @@
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
- <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.2a/examples/example-data.js";></script>
</head>
