dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #17455
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 6950: Impl data table javascript plugin
------------------------------------------------------------
revno: 6950
committer: Lars Helge Overland <larshelge@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2012-05-15 22:21:11 +0200
message:
Impl data table javascript plugin
added:
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/plugin/table.js
modified:
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/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
=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/plugin/table.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/plugin/table.js 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/plugin/table.js 2012-05-15 20:21:11 +0000
@@ -0,0 +1,145 @@
+DHIS.table = {};
+
+DHIS.table.finals = {
+ dataGet: 'api/reportTables/data.jsonp?minimal=true',
+ data: 'data',
+ periods: 'periods',
+ orgunits: 'orgunits',
+ crosstab: 'crosstab',
+ orgUnitIsParent: 'orgUnitIsParent',
+ defaultConf: {
+ indicators: [],
+ dataelements: [],
+ datasets: [],
+ periods: ['last12Months'],
+ orgunits: [],
+ crosstab: ['data'],
+ orgUnitIsParent: false,
+ useExtGrid: false,
+ el: '',
+ url: ''
+ }
+};
+
+DHIS.table.utils = {
+ appendUrlIfTrue: function(url, param, expression) {
+ if (expression && expression == true) {
+ url = Ext.String.urlAppend(url, param + '=true');
+ }
+ return url;
+ },
+ getDataUrl: function(conf) {
+ var url = conf.url + DHIS.table.finals.dataGet;
+
+ Ext.Array.each(conf.indicators, function(item) {
+ url = Ext.String.urlAppend(url, 'in=' + item);
+ });
+ Ext.Array.each(conf.dataelements, function(item) {
+ url = Ext.String.urlAppend(url, 'de=' + item);
+ });
+ Ext.Array.each(conf.datasets, function(item) {
+ url = Ext.String.urlAppend(url, 'ds=' + item);
+ });
+ Ext.Array.each(conf.periods, function(item) {
+ url = Ext.String.urlAppend(url, item + '=true');
+ });
+ Ext.Array.each(conf.orgunits, function(item) {
+ url = Ext.String.urlAppend(url, 'ou=' + item);
+ });
+ Ext.Array.each(conf.crosstab, function(item) {
+ url = Ext.String.urlAppend(url, 'crosstab=' + item);
+ });
+ url = DHIS.table.utils.appendUrlIfTrue(url, DHIS.table.finals.orgUnitIsParent, conf.orgUnitIsParent);
+ return url;
+ }
+};
+
+DHIS.table.grid = {
+ getHeaderArray: function(data) {
+ var headers = [];
+ Ext.Array.each(data.headers, function(header, index) {
+ headers.push(header.name);
+ });
+ return headers;
+ },
+ getColumnArray: function(data) {
+ var columns = [];
+ Ext.Array.each(data.headers, function(header, index) {
+ columns.push({text: header.name, dataIndex: header.name});
+ });
+ return columns;
+ },
+ getStore: function(data) {
+ var store = Ext.create('Ext.data.ArrayStore', {
+ fields: DHIS.table.grid.getHeaderArray(data),
+ data: data.rows
+ });
+ return store;
+ },
+ render: function(conf) {
+ Ext.data.JsonP.request({
+ url: DHIS.table.utils.getDataUrl(conf),
+ disableCaching: false,
+ success: function(data) {
+ var el = conf.el;
+ var grid = Ext.create('Ext.grid.Panel', {
+ store: DHIS.table.grid.getStore(data),
+ columns: DHIS.table.grid.getColumnArray(data),
+ renderTo: el
+ });
+ }
+ });
+ }
+};
+
+DHIS.table.plain = {
+ getMarkup: function(data) {
+ var html = '<table><tr>';
+ var classMap = []; // Col index -> class markup
+
+ Ext.Array.each(data.headers, function(header, index) {
+ var clazz = !header.meta ? ' class=\"val\"' : '';
+ classMap[index] = clazz;
+ html += '<th' + clazz + '>' + header.name + '<\/th>';
+ });
+
+ html += '<\/tr>';
+
+ Ext.Array.each(data.rows, function(row) {
+ html += '<tr>';
+ Ext.Array.each(row, function(field, index) {
+ var clazz = classMap[index];
+ html += '<td' + clazz + '>' + field + '<\/td>';
+ });
+ html += '<\/tr>';
+ });
+
+ html += '<\/table>';
+ return html;
+ },
+ render: function(conf) {
+ Ext.data.JsonP.request({
+ url: DHIS.table.utils.getDataUrl(conf),
+ disableCaching: false,
+ success: function(data) {
+ var html = DHIS.table.plain.getMarkup(data);
+ var el = conf.el;
+ Ext.get(el).update(html);
+ }
+ });
+ }
+};
+
+DHIS.table.impl = {
+ render: function(conf) {
+ conf = Ext.applyIf(conf, DHIS.table.finals.defaultConf);
+ if ( conf.useExtGrid ) {
+ DHIS.table.grid.render(conf);
+ }
+ else {
+ DHIS.table.plain.render(conf);
+ }
+ }
+}
+
+DHIS.getTable = DHIS.table.impl.render;
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/index.html'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/index.html 2012-05-11 09:57:03 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/index.html 2012-05-15 20:21:11 +0000
@@ -1,20 +1,29 @@
<html>
<head>
- <link rel="stylesheet" type="text/css" href="../../../dhis-web-commons/javascripts/plugin/css/chart.css" />
+ <link rel="stylesheet" type="text/css" href="../../../dhis-web-commons/javascripts/ext/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="../../../dhis-web-commons/javascripts/ext/ext-all.js"></script>
<script type="text/javascript" src="../../../dhis-web-commons/javascripts/plugin/chart.js"></script>
+ <script type="text/javascript" src="../../../dhis-web-commons/javascripts/plugin/table.js"></script>
- <style>
- body {margin: 0 0 0 60px;}
+ <style type="text/css">
+ body {font-family: sans-serif; margin: 0 0 0 60px;}
h1 {font-size: 20px; margin: 20px 0;}
#chart1 {width: 900px; height: 400px; border: 2px solid #d1d1d1; margin-bottom: 100px; border-radius: 3px;}
- #chart2 {width: 1200px; height: 400px; border: 2px solid #d1d1d1; margin-bottom: 100px; border-radius: 3px;}
+ #chart2 {width: 1000px; height: 400px; border: 2px solid #d1d1d1; margin-bottom: 100px; border-radius: 3px;}
+
+ #table1, #table2 {width: 1000px;}
+
+ table {border-collapse: collapse;}
+
+ table th, td {text-align: left; border: 1px solid #ccc;}
+
+ table .val {text-align: center;}
</style>
- <script>
+ <script type="text/javascript">
Ext.onReady( function() {
var url = '../../../'; // http://apps.dhis2.org/dev/
@@ -36,6 +45,27 @@
url: url
});
+ DHIS.getTable({
+ indicators: ['Uvn6LCg7dVU'],
+ periods: ['last12Months'],
+ orgunits: ['ImspTQPwCqd'],
+ crosstab: ['periods'],
+ orgUnitIsParent: true,
+ useExtGrid: false,
+ el: 'table1',
+ url: url
+ });
+
+ DHIS.getTable({
+ indicators: ['OdiHJayrsKo'],
+ periods: ['last12Months'],
+ orgunits: ['ImspTQPwCqd'],
+ crosstab: ['periods'],
+ orgUnitIsParent: true,
+ useExtGrid: true,
+ el: 'table2',
+ url: url
+ });
});
</script>
@@ -66,5 +96,11 @@
<h1>My chart 2</h1>
<div id="chart2"></div>
+
+ <h1>My table 1</h1>
+ <div id="table1"></div>
+
+ <h1>My table 2</h1>
+ <div id="table2"></div>
</body>
</html>
