← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 9896: (PT) Options implemented: show subtotals, display density, font size.

 

Merge authors:
  Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 9896 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2013-02-25 14:49:19 +0100
message:
  (PT) Options implemented: show subtotals, display density, font size.
modified:
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/plugin.js
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css


--
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-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-22 17:27:36 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-25 13:47:24 +0000
@@ -72,10 +72,10 @@
 				var vpw = pt.viewport.getWidth(),
 					targetx = target ? target.getPosition()[0] : 4,
 					winw = w.getWidth(),
-					y = target ? target.getPosition()[1] + target.getHeight() + 6 : 35;
+					y = target ? target.getPosition()[1] + target.getHeight() + 4 : 33;
 
 				if ((targetx + winw) > vpw) {
-					w.setPosition((vpw - winw - 4), y);
+					w.setPosition((vpw - winw - 2), y);
 				}
 				else {
 					w.setPosition(targetx, y);
@@ -144,6 +144,8 @@
 				}
 			}();
 
+			config.options = pt.viewport.optionsWindow.getOptions();
+
 			return config;
 		};
 
@@ -224,10 +226,10 @@
 			sortStore: function() {
 				this.sort('name', 'ASC');
 			},
-			isloaded: false,
+			isLoaded: false,
 			listeners: {
 				load: function(s) {
-					this.isloaded = true;
+					this.isLoaded = true;
 					s.each( function(r) {
 						r.data.name = pt.conf.util.jsonEncodeString(r.data.name);
 					});
@@ -288,7 +290,7 @@
 		return cmp;
 	};
 
-	PT.app.SettingsWindow = function(pt) {
+	PT.app.SettingsWindow = function() {
 		var dimension,
 			dimensionStore,
 			dimensionOrder,
@@ -584,7 +586,132 @@
 			listeners: {
 				show: function(w) {
 					pt.util.window.setAnchorPosition(w, pt.viewport.layoutButton);
-					nissa = w;
+				}
+			}
+		});
+
+		return window;
+	};
+
+	PT.app.OptionsWindow = function() {
+		var showSubTotals,
+			cellPadding,
+			fontSize,
+
+			data,
+			style,
+			window;
+
+		showSubTotals = Ext.create('Ext.form.field.Checkbox', {
+			boxLabel: 'Show sub totals'
+		});
+
+		cellPadding = Ext.create('Ext.form.field.ComboBox', {
+			fieldLabel: 'Display density',
+			labelStyle: 'color:#333',
+			cls: 'pt-combo',
+			width: 230,
+			queryMode: 'local',
+			valueField: 'id',
+			editable: false,
+			value: 'normal',
+			store: Ext.create('Ext.data.Store', {
+				fields: ['id', 'text'],
+				data: [
+					{id: 'comfortable', text: 'Comfortable'},
+					{id: 'normal', text: 'Normal'},
+					{id: 'compact', text: 'Compact'}
+				]
+			})
+		});
+
+		fontSize = Ext.create('Ext.form.field.ComboBox', {
+			xtype: 'combobox',
+			fieldLabel: 'Font size',
+			labelStyle: 'color:#333',
+			cls: 'pt-combo',
+			width: 230,
+			queryMode: 'local',
+			valueField: 'id',
+			editable: false,
+			value: 'normal',
+			store: Ext.create('Ext.data.Store', {
+				fields: ['id', 'text'],
+				data: [
+					{id: 'large', text: 'Large'},
+					{id: 'normal', text: 'Normal'},
+					{id: 'small', text: 'Small'}
+				]
+			})
+		});
+
+		data = {
+			bodyStyle: 'border:0 none',
+			style: 'margin-left:14px',
+			items: [
+				showSubTotals
+			]
+		};
+
+		style = {
+			bodyStyle: 'border:0 none',
+			style: 'margin-left:14px',
+			items: [
+				cellPadding,
+				fontSize
+			]
+		};
+
+		window = Ext.create('Ext.window.Window', {
+			title: 'Table options', //i18n
+			bodyStyle: 'background-color:#fff; padding:8px 8px 3px',
+			closeAction: 'hide',
+			autoShow: true,
+			modal: true,
+			resizable: false,
+			getOptions: function() {
+				return {
+					showSubTotals: showSubTotals.getValue(),
+					cellPadding: cellPadding.getValue(),
+					fontSize: fontSize.getValue()
+				};
+			},
+			items: [
+				{
+					bodyStyle: 'border:0 none; color:#444; font-size:12px; font-weight:bold',
+					style: 'margin-bottom:6px',
+					html: 'Data'
+				},
+				data,
+				{
+					bodyStyle: 'border:0 none; padding:7px'
+				},
+				{
+					bodyStyle: 'border:0 none; color:#444; font-size:12px; font-weight:bold',
+					style: 'margin-bottom:6px',
+					html: 'Style'
+				},
+				style
+			],
+			bbar: [
+				'->',
+				{
+					text: 'Hide',
+					handler: function() {
+						window.hide();
+					}
+				},
+				{
+					text: '<b>Update</b>',
+					handler: function() {
+						pt.viewport.updateViewport();
+						window.hide();
+					}
+				}
+			],
+			listeners: {
+				show: function(w) {
+					pt.util.window.setAnchorPosition(w, pt.viewport.optionsButton);
 				}
 			}
 		});
@@ -732,12 +859,12 @@
 						{
 							xtype: 'combobox',
 							cls: 'pt-combo',
-							style: 'margin-bottom:4px',
+							style: 'margin-bottom:4px; margin-top:2px',
 							width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
 							valueField: 'id',
 							displayField: 'name',
 							fieldLabel: 'Select group', //i18n pt.i18n.select_group
-							labelStyle: 'padding-left:6px',
+							labelStyle: 'padding-left:8px',
 							editable: false,
 							store: {
 								xtype: 'store',
@@ -920,12 +1047,12 @@
 					{
 						xtype: 'combobox',
 						cls: 'pt-combo',
-						style: 'margin-bottom:4px',
+						style: 'margin-bottom:4px; margin-top:2px',
 						width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
 						valueField: 'id',
 						displayField: 'name',
 						fieldLabel: 'Select group', //i18n pt.i18n.select_group
-						labelStyle: 'padding-left:6px',
+						labelStyle: 'padding-left:8px',
 						editable: false,
 						store: {
 							xtype: 'store',
@@ -1082,7 +1209,6 @@
 			dataSet = {
 				xtype: 'panel',
 				title: '<div class="pt-panel-title-data">Reporting rates</div>', //i18n
-				bodyStyle: 'padding-top:3px',
 				hideCollapseTool: true,
 				getData: function() {
 					var data = {
@@ -1103,6 +1229,10 @@
 						this,
 						pt.conf.layout.west_fill_accordion_dataset
 					);
+
+					if (!pt.store.dataSetAvailable.isLoaded) {
+						pt.store.dataSetAvailable.load();
+					}
 				},
 				items: [
 					{
@@ -1442,6 +1572,7 @@
 						xtype: 'panel',
 						layout: 'column',
 						bodyStyle: 'border-style:none',
+						style: 'margin-top:2px',
 						items: [
 							{
 								xtype: 'combobox',
@@ -1451,7 +1582,7 @@
 								valueField: 'id',
 								displayField: 'name',
 								fieldLabel: 'Select type', //i18n pt.i18n.select_type,
-								labelStyle: 'padding-left:6px',
+								labelStyle: 'padding-left:8px',
 								editable: false,
 								queryMode: 'remote',
 								store: pt.store.periodType,
@@ -1526,7 +1657,7 @@
 				//id: 'organisationunit_t',
 				xtype: 'panel',
 				title: '<div class="pt-panel-title-organisationunit">Organisation units</div>', //i18n pt.i18n.organisation_units
-				bodyStyle: 'padding-top:6px',
+				bodyStyle: 'padding-top:5px',
 				hideCollapseTool: true,
 				collapsed: false,
 				getData: function() {
@@ -1557,7 +1688,7 @@
 								boxLabel: 'User organisation unit', //i18n pt.i18n.user_orgunit,
 								labelWidth: pt.conf.layout.form_label_width,
 								handler: function(chb, checked) {
-									pt.cmp.dimension.organisationUnit.toolbar.xable(checked, pt.cmp.favorite.userOrganisationUnitChildren.getValue());
+									//pt.cmp.dimension.organisationUnit.toolbar.xable(checked, pt.cmp.favorite.userOrganisationUnitChildren.getValue());
 									pt.cmp.dimension.organisationUnit.treepanel.xable(checked, pt.cmp.favorite.userOrganisationUnitChildren.getValue());
 								},
 								listeners: {
@@ -1572,7 +1703,7 @@
 								boxLabel: 'User organisation unit children', //i18n pt.i18n.user_orgunit_children,
 								labelWidth: pt.conf.layout.form_label_width,
 								handler: function(chb, checked) {
-									pt.cmp.dimension.organisationUnit.toolbar.xable(checked, pt.cmp.favorite.userOrganisationUnit.getValue());
+									//pt.cmp.dimension.organisationUnit.toolbar.xable(checked, pt.cmp.favorite.userOrganisationUnit.getValue());
 									pt.cmp.dimension.organisationUnit.treepanel.xable(checked, pt.cmp.favorite.userOrganisationUnit.getValue());
 								},
 								listeners: {
@@ -1583,93 +1714,93 @@
 							}
 						]
 					},
-					{
-						id: 'organisationunit_t',
-						xtype: 'toolbar',
-						style: 'margin-bottom: 4px',
-						width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
-						xable: function(checked, value) {
-							if (checked || value) {
-								this.disable();
-							}
-							else {
-								this.enable();
-							}
-						},
-						defaults: {
-							height: 22
-						},
-						items: [
-							{
-								xtype: 'label',
-								text: 'Auto-select organisation units by', //i18n
-								style: 'padding-left:8px; color:#666; line-height:23px'
-							},
-							'->',
-							{
-								text: 'Group..',
-								handler: function() {},
-								listeners: {
-									added: function() {
-										this.menu = Ext.create('Ext.menu.Menu', {
-											shadow: false,
-											showSeparator: false,
-											width: pt.conf.layout.treepanel_toolbar_menu_width_group,
-											items: [
-												{
-													xtype: 'grid',
-													cls: 'pt-menugrid',
-													width: pt.conf.layout.treepanel_toolbar_menu_width_group,
-													scroll: 'vertical',
-													columns: [
-														{
-															dataIndex: 'name',
-															width: pt.conf.layout.treepanel_toolbar_menu_width_group,
-															style: 'display:none'
-														}
-													],
-													setHeightInMenu: function(store) {
-														var h = store.getCount() * 24,
-															sh = pt.util.viewport.getSize().y * 0.6;
-														this.setHeight(h > sh ? sh : h);
-														this.doLayout();
-														this.up('menu').doLayout();
-													},
-													store: pt.store.group,
-													listeners: {
-														itemclick: function(g, r) {
-															g.getSelectionModel().select([], false);
-															this.up('menu').hide();
-															pt.cmp.dimension.organisationUnit.treepanel.selectByGroup(r.data.id);
-														}
-													}
-												}
-											],
-											listeners: {
-												show: function() {
-													var store = pt.store.group;
+					//{
+						//id: 'organisationunit_t',
+						//xtype: 'toolbar',
+						//style: 'margin-bottom: 4px',
+						//width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
+						//xable: function(checked, value) {
+							//if (checked || value) {
+								//this.disable();
+							//}
+							//else {
+								//this.enable();
+							//}
+						//},
+						//defaults: {
+							//height: 22
+						//},
+						//items: [
+							//{
+								//xtype: 'label',
+								//text: 'Auto-select organisation units by', //i18n
+								//style: 'padding-left:8px; color:#666; line-height:23px'
+							//},
+							//'->',
+							//{
+								//text: 'Group..',
+								//handler: function() {},
+								//listeners: {
+									//added: function() {
+										//this.menu = Ext.create('Ext.menu.Menu', {
+											//shadow: false,
+											//showSeparator: false,
+											//width: pt.conf.layout.treepanel_toolbar_menu_width_group,
+											//items: [
+												//{
+													//xtype: 'grid',
+													//cls: 'pt-menugrid',
+													//width: pt.conf.layout.treepanel_toolbar_menu_width_group,
+													//scroll: 'vertical',
+													//columns: [
+														//{
+															//dataIndex: 'name',
+															//width: pt.conf.layout.treepanel_toolbar_menu_width_group,
+															//style: 'display:none'
+														//}
+													//],
+													//setHeightInMenu: function(store) {
+														//var h = store.getCount() * 24,
+															//sh = pt.util.viewport.getSize().y * 0.6;
+														//this.setHeight(h > sh ? sh : h);
+														//this.doLayout();
+														//this.up('menu').doLayout();
+													//},
+													//store: pt.store.group,
+													//listeners: {
+														//itemclick: function(g, r) {
+															//g.getSelectionModel().select([], false);
+															//this.up('menu').hide();
+															//pt.cmp.dimension.organisationUnit.treepanel.selectByGroup(r.data.id);
+														//}
+													//}
+												//}
+											//],
+											//listeners: {
+												//show: function() {
+													//var store = pt.store.group;
 
-													if (!store.isLoaded) {
-														store.load({scope: this, callback: function() {
-															this.down('grid').setHeightInMenu(store);
-														}});
-													}
-													else {
-														this.down('grid').setHeightInMenu(store);
-													}
-												}
-											}
-										});
-									}
-								}
-							}
-						],
-						listeners: {
-							added: function() {
-								pt.cmp.dimension.organisationUnit.toolbar = this;
-							}
-						}
-					},
+													//if (!store.isLoaded) {
+														//store.load({scope: this, callback: function() {
+															//this.down('grid').setHeightInMenu(store);
+														//}});
+													//}
+													//else {
+														//this.down('grid').setHeightInMenu(store);
+													//}
+												//}
+											//}
+										//});
+									//}
+								//}
+							//}
+						//],
+						//listeners: {
+							//added: function() {
+								//pt.cmp.dimension.organisationUnit.toolbar = this;
+							//}
+						//}
+					//},
 					{
 						xtype: 'treepanel',
 						cls: 'pt-tree',
@@ -1975,7 +2106,6 @@
 					panel = {
 						xtype: 'panel',
 						title: '<div class="pt-panel-title-organisationunit">' + groupSet.name + '</div>', //i18n
-						bodyStyle: 'padding-top:3px',
 						hideCollapseTool: true,
 						getData: function() {
 							var data = {
@@ -2147,9 +2277,9 @@
 			optionsButton = Ext.create('Ext.button.Button', {
 				text: 'Options',
 				handler: function() {
-					if (!pt.viewport.optionsWindow) {
-						pt.viewport.optionsWindow = PT.app.OptionsWindow(pt);
-					}
+					//if (!pt.viewport.optionsWindow) {
+						//pt.viewport.optionsWindow = PT.app.OptionsWindow(pt);
+					//}
 
 					pt.viewport.optionsWindow.show();
 				}
@@ -2307,8 +2437,11 @@
 		pt.cmp = PT.app.getCmp();
 		pt.viewport = createViewport();
 
-		pt.viewport.settingsWindow = PT.app.SettingsWindow(pt);
+		pt.viewport.settingsWindow = PT.app.SettingsWindow();
 		pt.viewport.settingsWindow.hide();
+
+		pt.viewport.optionsWindow = PT.app.OptionsWindow();
+		pt.viewport.optionsWindow.hide();
 	};
 
 	Ext.Ajax.request({

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-22 16:25:57 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-25 13:37:47 +0000
@@ -124,13 +124,13 @@
 	conf.layout = {
         west_width: 424,
         west_fieldset_width: 416,
-        west_width_padding: 6,
-        west_fill: 6,
-        west_fill_accordion_indicator: 65,
-        west_fill_accordion_dataelement: 65,
-        west_fill_accordion_dataset: 35,
-        west_fill_accordion_period: 257,
-        west_fill_accordion_organisationunit: 96,
+        west_width_padding: 4,
+        west_fill: 2,
+        west_fill_accordion_indicator: 63,
+        west_fill_accordion_dataelement: 63,
+        west_fill_accordion_dataset: 33,
+        west_fill_accordion_period: 256,
+        west_fill_accordion_organisationunit: 95,
         west_maxheight_accordion_indicator: 620,
         west_maxheight_accordion_dataelement: 620,
         west_maxheight_accordion_dataset: 620,
@@ -156,6 +156,19 @@
         multiselect_fill_reportingrates: 315
     };
 
+	conf.pivot = {
+		cellPadding: {
+			'compact': '3px',
+			'normal': '5px',
+			'comfortable': '10px'
+		},
+		fontSize: {
+			'small': '10px',
+			'normal': '11px',
+			'large': '13px'
+		}
+	};
+
     conf.util = {
 		jsonEncodeString: function(str) {
 			return typeof str === 'string' ? str.replace(/[^a-zA-Z 0-9(){}<>_!+;:?*&%#-]+/g,'') : str;
@@ -412,8 +425,31 @@
 	};
 
 	util.pivot = {
+		getTdHtml: function(options, config) {
+			var cls,
+				colspan,
+				rowspan,
+				htmlValue,
+				cellPadding,
+				fontSize;
+
+			if (!(config && Ext.isObject(config))) {
+				return '<td></td>';
+			}
+
+			cls = config.cls ? 'class="' + config.cls + '"' : '';
+			colspan = config.colspan ? 'colspan="' + config.colspan + '"' : '';
+			rowspan = config.rowspan ? 'rowspan="' + config.rowspan + '"' : '';
+			htmlValue = config.htmlValue || config.value || '&nbsp;';
+			cellPadding = pt.conf.pivot.cellPadding[config.cellPadding] || pt.conf.pivot.cellPadding[options.cellPadding];
+			fontSize = pt.conf.pivot.fontSize[config.fontSize] || pt.conf.pivot.fontSize[options.fontSize];
+
+			return '<td ' + cls + ' ' + colspan + ' ' + rowspan + ' style="padding:' + cellPadding + '; font-size:' + fontSize + ';">' + htmlValue + '</td>';
+		},
+
 		getTable: function(settings, pt, container) {
-			var getParamStringFromDimensions,
+			var options = settings.options,
+				getParamStringFromDimensions,
 				extendSettings,
 				validateResponse,
 				extendResponse,
@@ -881,27 +917,29 @@
 					htmlArray;
 
 				doSubTotals = function(xAxis) {
-					var multiItemDimension = 0,
-						unique;
-
-					if (!(true && xAxis && xAxis.dims > 1)) {
-						return false;
-					}
-
-					unique = xAxis.xItems.unique;
-
-					for (var i = 0; i < unique.length; i++) {
-						if (unique[i].length > 1) {
-							multiItemDimension++;
-						}
-					}
-
-					return (multiItemDimension > 1);
+					return !!options.showSubTotals;
+
+					//var multiItemDimension = 0,
+						//unique;
+
+					//if (!(options.showSubTotals && xAxis && xAxis.dims > 1)) {
+						//return false;
+					//}
+
+					//unique = xAxis.xItems.unique;
+
+					//for (var i = 0; i < unique.length; i++) {
+						//if (unique[i].length > 1) {
+							//multiItemDimension++;
+						//}
+					//}
+
+					//return (multiItemDimension > 1);
 				};
 
 				getEmptyHtmlArray = function() {
 					return (xColAxis && xRowAxis) ?
-						'<td class="pivot-dim-empty " colspan="' + xRowAxis.dims + '" rowspan="' + xColAxis.dims + '">&nbsp;</td>' : '';
+						pt.util.pivot.getTdHtml(options, {cls: 'pivot-dim-empty', colspan: xRowAxis.dims, rowspan: xColAxis.dims}) : '';
 				};
 
 				getColAxisHtmlArray = function() {
@@ -922,15 +960,25 @@
 
 						for (var j = 0, id; j < dimItems.length; j++) {
 							id = dimItems[j];
-							dimHtml.push('<td class="pivot-dim" colspan="' + colSpan + '">' + xResponse.metaData[id] + '</td>');
+							dimHtml.push(pt.util.pivot.getTdHtml(options, {
+								cls: 'pivot-dim',
+								colspan: colSpan,
+								htmlValue: xResponse.metaData[id]
+							}));
 
-							//todo subtotal
 							if (doSubTotals(xColAxis) && i === 0) {
-								dimHtml.push('<td class="pivot-dim-subtotal" rowspan="' + xColAxis.dims + '"></td>');
+								dimHtml.push(pt.util.pivot.getTdHtml(options, {
+									cls: 'pivot-dim-subtotal',
+									rowspan: xColAxis.dims
+								}));
 							}
 
 							if (i === 0 && j === (dimItems.length - 1)) {
-								dimHtml.push('<td class="pivot-dim-total" rowspan="' + xColAxis.dims + '">Total</td>');
+								dimHtml.push(pt.util.pivot.getTdHtml(options, {
+									cls: 'pivot-dim-total',
+									rowspan: xColAxis.dims,
+									htmlValue: 'Total'
+								}));
 							}
 						}
 
@@ -965,7 +1013,11 @@
 							object = allObjects[j][i];
 
 							if (object.rowSpan) {
-								row.push('<td class="pivot-dim nobreak" rowspan="' + object.rowSpan + '">' + xResponse.metaData[object.id] + '</td>');
+								row.push(pt.util.pivot.getTdHtml(options, {
+									cls: 'pivot-dim nobreak',
+									rowspan: object.rowSpan,
+									htmlValue: xResponse.metaData[object.id]
+								}));
 							}
 						}
 
@@ -974,7 +1026,10 @@
 						//todo subtotal
 						if (doSubTotals(xRowAxis) && rowCount === rowUniqueFactor) {
 							row = [];
-							row.push('<td class="pivot-dim-subtotal" colspan="' + xRowAxis.dims + '"></td>');
+							row.push(pt.util.pivot.getTdHtml(options, {
+								cls: 'pivot-dim-subtotal',
+								colspan: xRowAxis.dims
+							}));
 							a.push(row);
 							rowCount = 0;
 						}
@@ -1099,7 +1154,10 @@
 								//cls = value < 5000 ? 'bad' : (value < 20000 ? 'medium' : 'good'); //basic legendset
 							//}
 
-							row.push('<td class="' + item.cls + '">' + pt.util.number.pp(item.htmlValue) + '</td>');
+							row.push(pt.util.pivot.getTdHtml(options, {
+								cls: item.cls,
+								htmlValue: pt.util.number.pp(item.htmlValue)
+							}));
 						}
 
 						a.push(row);
@@ -1144,7 +1202,10 @@
 							item = totalRowItems[i];
 							item.htmlValue = pt.util.number.roundIf(item.htmlValue, 1);
 
-							a.push(['<td class="' + item.cls + '">' + pt.util.number.pp(item.htmlValue) + '</td>']);
+							a.push([pt.util.pivot.getTdHtml(options, {
+								cls: item.cls,
+								htmlValue: pt.util.number.pp(item.htmlValue)
+							})]);
 						}
 					}
 
@@ -1192,7 +1253,10 @@
 							item = totalColItems[i];
 							item.htmlValue = pt.util.number.roundIf(item.htmlValue, 1);
 
-							a.push('<td class="' + item.cls + '">' + pt.util.number.pp(item.htmlValue) + '</td>');
+							a.push(pt.util.pivot.getTdHtml(options, {
+								cls: item.cls,
+								htmlValue: pt.util.number.pp(item.htmlValue)
+							}));
 						}
 					}
 
@@ -1212,7 +1276,10 @@
 						grandTotalSum = Ext.Array.sum(values) || 0;
 						grandTotalSum = pt.util.number.roundIf(grandTotalSum, 1);
 
-						a.push('<td class="pivot-value-grandtotal">' + pt.util.number.pp(grandTotalSum) + '</td>');
+						a.push(pt.util.pivot.getTdHtml(options, {
+							cls: 'pivot-value-grandtotal',
+							htmlValue: pt.util.number.pp(grandTotalSum)
+						}));
 					}
 
 					return a;
@@ -1242,7 +1309,11 @@
 						a = [];
 
 					if (xRowAxis) {
-						dimTotalArray = ['<td class="pivot-dim-total" colspan="' + xRowAxis.dims + '">Total</td>'];
+						dimTotalArray = [pt.util.pivot.getTdHtml(options, {
+							cls: 'pivot-dim-total',
+							colspan: xRowAxis.dims,
+							htmlValue: 'Total'
+						})];
 					}
 
 					row = [].concat(dimTotalArray || [], Ext.clone(colTotal) || [], Ext.clone(grandTotal) || []);
@@ -1355,7 +1426,13 @@
 
 			removeEmptyDimensions,
 			getValidatedAxis,
-			validateSettings;
+			validateSettings,
+
+			defaultOptions = {
+				showSubTotals: true,
+				cellPadding: 'normal',
+				fontSize: 'normal'
+			};
 
 		removeEmptyDimensions = function(axis) {
 			if (!axis) {
@@ -1406,6 +1483,18 @@
 			return axis.length ? axis : null;
 		};
 
+		getValidatedOptions = function(options) {
+			if (!(options && Ext.isObject(options))) {
+				return defaultOptions;
+			}
+
+			options.showSubTotals = Ext.isDefined(options.showSubTotals) ? options.showSubTotals : defaultOptions.showSubTotals;
+			options.cellPadding = options.cellPadding || defaultOptions.cellPadding;
+			options.fontSize = options.fontSize || defaultOptions.fontSize;
+
+			return options;
+		};
+
 		validateSettings = function() {
 			var a = [].concat(Ext.clone(col), Ext.clone(row), Ext.clone(filter)),
 				names = [];
@@ -1460,6 +1549,8 @@
 				obj.filter = filter;
 			}
 
+			obj.options = getValidatedOptions(config.options);
+
 			return obj;
 		}();
 	};

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/plugin.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/plugin.js	2013-02-21 14:57:02 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/plugin.js	2013-02-25 12:18:48 +0000
@@ -11,7 +11,12 @@
 	],
 	filter: [
 		{name: 'ou', items: ['ImspTQPwCqd']}
-	]
+	],
+	options: {
+		showSubTotals: false,
+		cellPadding: 'normal',
+		fontSize: 'normal'
+	}
 };
 
 xSettings = {
@@ -50,6 +55,11 @@
 		'pe': ['201201', '201202', '201203'],
 		'Bpx0589u8y0': ['MAs88nJc9nL', 'PVLOW4bCshG'],
 		'ou': ['ImspTQPwCqd']
+	},
+	options: {
+		showSubTotals: false,
+		cellPadding: 'normal',
+		fontSize: 'normal'
 	}
 };
 

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-22 16:25:57 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-25 13:37:19 +0000
@@ -322,6 +322,7 @@
 .x-form-cb-label-after {
     padding-left: 1px;
     font-size: 11px;
+    color: #333;
 }
 
 	/* Icons */
@@ -787,7 +788,7 @@
 
 	/* accordion item body */
 .pt-accordion .x-accordion-body {
-	padding: 5px 3px 0px;
+	padding: 2px 2px 0px;
 	border-top: 1px solid #c5c5c5 !important;
 }