← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 20495: DV EV enums + intro spinners.

 

------------------------------------------------------------
revno: 20495
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Sat 2015-10-03 15:51:50 +0300
message:
  DV EV enums + intro spinners.
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/styles/style.css
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/core.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/styles/style.css
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/styles/style.css
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/app.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/core.js


--
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-apps/src/main/webapp/dhis-web-event-reports/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/index.html	2014-10-22 16:41:32 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/index.html	2015-10-03 12:51:50 +0000
@@ -12,7 +12,10 @@
 </head>
 
 <body>
-    <div id="init"></div>
+    <div id="init">
+        <div><span class="text-medium">DHIS2</span> EVENT REPORT</div>
+        <div class="spinner"></div>
+    </div>
 
     <script type="text/javascript" src="../dhis-web-commons/javascripts/ext/ext-all.js"></script>
     <script type="text/javascript" src="../dhis-web-commons/javascripts/ext-ux/layout/component/form/MultiSelect.js"></script>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js	2015-09-24 11:40:52 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js	2015-10-03 12:51:50 +0000
@@ -8412,7 +8412,6 @@
                                                 NS.i18n = dhis2.util.parseJavaProperties(r.responseText);
 
                                                 if (keyUiLocale === defaultKeyUiLocale) {
-                                                    Ext.get('init').update(NS.i18n.initializing + '..');
                                                     fn();
                                                 }
                                                 else {
@@ -8425,7 +8424,6 @@
                                                             console.log('No translations found for system locale (' + keyUiLocale + ')');
                                                         },
                                                         callback: function() {
-                                                            Ext.get('init').update(NS.i18n.initializing + '..');
                                                             fn();
                                                         }
                                                     });
@@ -8436,7 +8434,6 @@
                                                     url: 'i18n/i18n_app_' + keyUiLocale + '.properties',
                                                     success: function(r) {
                                                         NS.i18n = dhis2.util.parseJavaProperties(r.responseText);
-                                                        Ext.get('init').update(NS.i18n.initializing + '..');
                                                     },
                                                     failure: function() {
                                                         alert('No translations found for system locale (' + keyUiLocale + ') or default locale (' + defaultKeyUiLocale + ').');

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/styles/style.css	2015-08-09 19:59:57 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/styles/style.css	2015-10-03 12:51:50 +0000
@@ -62,8 +62,9 @@
 
 #init {
     display: table;
-    margin: 200px auto;
-    font-size: 15px;
+    margin: 300px auto;
+    font-size: 13px;
+    color: #444;
 }
 
 	/* Scrollbar Webkit */
@@ -195,6 +196,48 @@
     background: #fff;
 }
 
+.text-medium {
+    font-weight: 600;
+}
+
+
+/*----------------------------------------------------------------------------
+ * Spinner
+ *--------------------------------------------------------------------------*/
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    margin: 50px auto;
+    background-color: #aaa;
+
+    border-radius: 100%;
+    -webkit-animation: sk-scaleout 0.8s infinite ease-in-out;
+    animation: sk-scaleout 0.8s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0)
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
+@keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
 
 /*----------------------------------------------------------------------------
  * Pivot

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/index.html	2014-10-22 16:41:32 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/index.html	2015-10-03 12:51:50 +0000
@@ -12,7 +12,10 @@
 </head>
 
 <body>
-    <div id="init"></div>
+    <div id="init">
+        <div><span class="text-medium">DHIS2</span> EVENT VISUALIZER</div>
+        <div class="spinner"></div>
+    </div>
     
     <form id="exportForm" method="post">
         <input type="hidden" id="svgField" name="svg"/>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js	2015-09-11 21:01:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js	2015-10-03 12:51:50 +0000
@@ -11,6 +11,7 @@
 		extendCore,
 		createViewport,
 		dimConf,
+        chartConf,
 
 		ns = {
 			core: {},
@@ -2686,6 +2687,8 @@
 				favorite = Ext.clone(ns.app.layout);
 
 				// server sync
+                favorite.type = chartConf.c2s[favorite.type];
+                
 				favorite.showData = favorite.showValues;
 				delete favorite.showValues;
 
@@ -4435,8 +4438,7 @@
 					'ou': {id: 'ou', name: 'Organisation units'}
 				},
                 extendDim = function(dim) {
-                    var md = ns.app.response.metaData,
-                        dimConf = ns.core.conf.finals.dimension;
+                    var md = ns.app.response.metaData;
 
                     dim.id = dim.id || dim.dimension;
                     dim.name = dim.name || md.names[dim.dimension] || dimConf.objectNameMap[dim.dimension].name;
@@ -7160,9 +7162,9 @@
 
         column = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.column,
+            chartType: chartConf.client.column,
             icon: 'images/column.png',
-            name: ns.core.conf.finals.chart.column,
+            name: chartConf.client.column,
             tooltipText: NS.i18n.column_chart,
             pressed: true,
             listeners: {
@@ -7172,9 +7174,9 @@
 
         stackedcolumn = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.stackedcolumn,
+            chartType: chartConf.client.stackedcolumn,
             icon: 'images/column-stacked.png',
-            name: ns.core.conf.finals.chart.stackedcolumn,
+            name: chartConf.client.stackedcolumn,
             tooltipText: NS.i18n.stacked_column_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7183,9 +7185,9 @@
 
         bar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.bar,
+            chartType: chartConf.client.bar,
             icon: 'images/bar.png',
-            name: ns.core.conf.finals.chart.bar,
+            name: chartConf.client.bar,
             tooltipText: NS.i18n.bar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7194,9 +7196,9 @@
 
         stackedbar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.stackedbar,
+            chartType: chartConf.client.stackedbar,
             icon: 'images/bar-stacked.png',
-            name: ns.core.conf.finals.chart.stackedbar,
+            name: chartConf.client.stackedbar,
             tooltipText: NS.i18n.stacked_bar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7205,9 +7207,9 @@
 
         line = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.line,
+            chartType: chartConf.client.line,
             icon: 'images/line.png',
-            name: ns.core.conf.finals.chart.line,
+            name: chartConf.client.line,
             tooltipText: NS.i18n.line_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7216,9 +7218,9 @@
 
         area = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.area,
+            chartType: chartConf.client.area,
             icon: 'images/area.png',
-            name: ns.core.conf.finals.chart.area,
+            name: chartConf.client.area,
             tooltipText: NS.i18n.area_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7227,9 +7229,9 @@
 
         pie = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.pie,
+            chartType: chartConf.client.pie,
             icon: 'images/pie.png',
-            name: ns.core.conf.finals.chart.pie,
+            name: chartConf.client.pie,
             tooltipText: NS.i18n.pie_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7238,9 +7240,9 @@
 
         radar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.radar,
+            chartType: chartConf.client.radar,
             icon: 'images/radar.png',
-            name: ns.core.conf.finals.chart.radar,
+            name: chartConf.client.radar,
             tooltipText: NS.i18n.radar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7911,6 +7913,8 @@
 			layout: 'border',
             getLayoutWindow: getLayoutWindow,
             chartType: chartType,
+            westRegion: westRegion,
+            centerRegion: centerRegion,
             update: update,
 			items: [
 				westRegion,
@@ -8008,6 +8012,7 @@
 				extendCore(ns.core);
 
 				dimConf = ns.core.conf.finals.dimension;
+                chartConf = ns.core.conf.finals.chart;
 				ns.app.viewport = createViewport();
 
                 ns.core.app.getViewportWidth = function() { return ns.app.viewport.getWidth(); };
@@ -8110,7 +8115,6 @@
                                                 NS.i18n = dhis2.util.parseJavaProperties(r.responseText);
 
                                                 if (keyUiLocale === defaultKeyUiLocale) {
-                                                    Ext.get('init').update(NS.i18n.initializing + '..');
                                                     fn();
                                                 }
                                                 else {
@@ -8123,7 +8127,6 @@
                                                             console.log('No translations found for system locale (' + keyUiLocale + ')');
                                                         },
                                                         callback: function() {
-                                                            Ext.get('init').update(NS.i18n.initializing + '..');
                                                             fn();
                                                         }
                                                     });
@@ -8134,7 +8137,6 @@
                                                     url: 'i18n/i18n_app_' + keyUiLocale + '.properties',
                                                     success: function(r) {
                                                         NS.i18n = dhis2.util.parseJavaProperties(r.responseText);
-                                                        Ext.get('init').update(NS.i18n.initializing + '..');
                                                     },
                                                     failure: function() {
                                                         alert('No translations found for system locale (' + keyUiLocale + ') or default locale (' + defaultKeyUiLocale + ').');

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/core.js	2015-09-11 21:01:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/core.js	2015-10-03 12:51:50 +0000
@@ -613,17 +613,30 @@
 					}
 				},
                 chart: {
-                    series: 'series',
-                    category: 'category',
-                    filter: 'filter',
-                    column: 'column',
-                    stackedcolumn: 'stackedcolumn',
-                    bar: 'bar',
-                    stackedbar: 'stackedbar',
-                    line: 'line',
-                    area: 'area',
-                    pie: 'pie',
-                    radar: 'radar'
+                    client: {
+                        series: 'series',
+                        category: 'category',
+                        filter: 'filter',
+                        column: 'column',
+                        stackedcolumn: 'stackedcolumn',
+                        bar: 'bar',
+                        stackedbar: 'stackedbar',
+                        line: 'line',
+                        area: 'area',
+                        pie: 'pie',
+                        radar: 'radar'
+                    },
+                    server: {
+                        column: 'COLUMN',
+                        stackedcolumn: 'STACKED_COLUMN',
+                        bar: 'BAR',
+                        stackedbar: 'STACKED_BAR',
+                        line: 'LINE',
+                        area: 'AREA',
+                        pie: 'PIE',
+                        radar: 'RADAR',
+                        gauge: 'GAUGE'
+                    }
                 },
                 data: {
                     domain: 'domain_',
@@ -645,6 +658,36 @@
                 }
 			};
 
+            conf.finals.chart.c2s = {};
+            conf.finals.chart.s2c = {};
+
+            (function() {
+                var client = conf.finals.chart.client,
+                    server = conf.finals.chart.server,
+                    c2s = conf.finals.chart.c2s,
+                    s2c = conf.finals.chart.s2c;
+
+                c2s[client.column] = server.column;
+                c2s[client.stackedcolumn] = server.stackedcolumn;
+                c2s[client.bar] = server.bar;
+                c2s[client.stackedbar] = server.stackedbar;
+                c2s[client.line] = server.line;
+                c2s[client.area] = server.area;
+                c2s[client.pie] = server.pie;
+                c2s[client.radar] = server.radar;
+                c2s[client.gauge] = server.gauge;
+
+                s2c[server.column] = client.column;
+                s2c[server.stackedcolumn] = client.stackedcolumn;
+                s2c[server.bar] = client.bar;
+                s2c[server.stackedbar] = client.stackedbar;
+                s2c[server.line] = client.line;
+                s2c[server.area] = client.area;
+                s2c[server.pie] = client.pie;
+                s2c[server.radar] = client.radar;
+                s2c[server.gauge] = client.gauge;
+            })();
+
 			dimConf = conf.finals.dimension;
 
 			dimConf.objectNameMap = {};
@@ -1103,7 +1146,7 @@
 					layout.rows = config.rows;
 					layout.filters = config.filters;
 
-                    layout.type = Ext.isString(config.type) ? config.type : 'column';
+                    layout.type = conf.finals.chart.s2c[config.type] || conf.finals.chart.client[config.type] || 'column';
                     layout.program = config.program;
                     layout.programStage = config.programStage;
 
@@ -2872,7 +2915,7 @@
 			web.window = web.window || {};
 
 			web.window.setAnchorPosition = function(w, target) {
-				var vpw = ns.app.viewport.getWidth(),
+				var vpw = app.getViewportWidth(),
 					targetx = target ? target.getPosition()[0] : 4,
 					winw = w.getWidth(),
 					y = target ? target.getPosition()[1] + target.getHeight() + 4 : 33;
@@ -2959,7 +3002,7 @@
                 config.html += obj.message + (obj.message.substr(obj.message.length - 1) === '.' ? '' : '.');
 
                 // bodyStyle
-                config.bodyStyle = 'padding: 12px; background: #fff; max-width: 600px; max-height: ' + ns.app.centerRegion.getHeight() / 2 + 'px';
+                config.bodyStyle = 'padding: 12px; background: #fff; max-width: 600px; max-height: ' + app.getCenterRegionHeight() / 2 + 'px';
 
                 // destroy handler
                 config.modal = true;
@@ -3662,7 +3705,7 @@
                         //minLength = 5,
                         maxLength = support.prototype.array.getMaxLength(titles),
                         fallbackLength = 10,
-                        maxWidth = ns.app.centerRegion.getWidth(),
+                        maxWidth = app.getCenterRegionWidth(),
                         width,
                         validateTitles;
 
@@ -3942,7 +3985,7 @@
 
                     width = (numberOfItems * itemLength) + (numberOfChars * charLength);
 
-                    if (width > ns.app.centerRegion.getWidth() - 6) {
+                    if (width > app.getCenterRegionWidth() - 6) {
                         position = 'right';
                     }
 
@@ -4016,7 +4059,7 @@
                     else if (xLayout.title) {
                         text += (text.length ? ', ' : '') + xLayout.title;
                     }
-                    else if (xLayout.type === conf.finals.chart.pie) {
+                    else if (xLayout.type === conf.finals.chart.client.pie) {
                         var ids = Ext.Array.clean([].concat(columnIds || []));
 
                         if (Ext.isArray(ids) && ids.length) {
@@ -4136,8 +4179,8 @@
 
                 getDefaultChartSizeHandler = function() {
                     return function() {
-                        var width = ns.app.centerRegion.getWidth(),
-                            height = ns.app.centerRegion.getHeight();
+                        var width = app.getCenterRegionWidth(),
+                            height = app.getCenterRegionHeight();
                             
 						this.animate = false;
                         this.setWidth(appConfig.dashboard ? width : width - 15);
@@ -4175,8 +4218,8 @@
                 getDefaultChart = function(config) {
                     var chart,
                         store = config.store || {},
-                        width = ns.app.centerRegion.getWidth(),
-                        height = ns.app.centerRegion.getHeight(),
+                        width = app.getCenterRegionWidth(),
+                        height = app.getCenterRegionHeight(),
                         isLineBased = Ext.Array.contains(['line', 'area'], xLayout.type),
                         defaultConfig = {
                             //animate: true,
@@ -4270,7 +4313,7 @@
                     for (var i = 0, item; i < chart.series.items.length; i++) {
                         item = chart.series.items[i];
 
-                        if (item.type === conf.finals.chart.column) {
+                        if (item.type === conf.finals.chart.client.column) {
                             item.stacked = true;
                         }
                     }
@@ -4356,7 +4399,7 @@
                     for (var i = 0, item; i < chart.series.items.length; i++) {
                         item = chart.series.items[i];
 
-                        if (item.type === conf.finals.chart.bar) {
+                        if (item.type === conf.finals.chart.client.bar) {
                             item.stacked = true;
                         }
                     }

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/styles/style.css	2015-08-09 19:59:57 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/styles/style.css	2015-10-03 12:51:50 +0000
@@ -61,8 +61,9 @@
 
 #init {
     display: table;
-    margin: 200px auto;
-    font-size: 15px;
+    margin: 300px auto;
+    font-size: 13px;
+    color: #444;
 }
 
 	/* Scrollbar Webkit */
@@ -187,6 +188,48 @@
     background: #fff;
 }
 
+.text-medium {
+    font-weight: 600;
+}
+
+
+/*----------------------------------------------------------------------------
+ * Spinner
+ *--------------------------------------------------------------------------*/
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    margin: 50px auto;
+    background-color: #aaa;
+
+    border-radius: 100%;
+    -webkit-animation: sk-scaleout 0.8s infinite ease-in-out;
+    animation: sk-scaleout 0.8s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0)
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
+@keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
 
 /*----------------------------------------------------------------------------
  * Pivot

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/index.html	2015-03-30 14:18:36 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/index.html	2015-10-03 12:51:50 +0000
@@ -10,7 +10,10 @@
 </head>
 
 <body>
-    <div id="init"></div>
+    <div id="init">
+        <div><span class="text-medium">DHIS2</span> GIS</div>
+        <div class="spinner"></div>
+    </div>
 
 	<div id="layerItems"></div>
 

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js	2015-09-28 11:56:16 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js	2015-10-03 12:51:50 +0000
@@ -10165,7 +10165,6 @@
                                                 GIS.i18n = dhis2.util.parseJavaProperties(r.responseText);
 
                                                 if (keyUiLocale === defaultKeyUiLocale) {
-                                                    Ext.get('init').update(GIS.i18n.initializing + '..');
                                                     fn();
                                                 }
                                                 else {
@@ -10178,7 +10177,6 @@
                                                             console.log('No translations found for system locale (' + keyUiLocale + ')');
                                                         },
                                                         callback: function() {
-                                                            Ext.get('init').update(GIS.i18n.initializing + '..');
                                                             fn();
                                                         }
                                                     });
@@ -10189,7 +10187,6 @@
                                                     url: 'i18n/i18n_app_' + keyUiLocale + '.properties',
                                                     success: function(r) {
                                                         GIS.i18n = dhis2.util.parseJavaProperties(r.responseText);
-                                                        Ext.get('init').update(GIS.i18n.initializing + '..');
                                                     },
                                                     failure: function() {
                                                         alert('No translations found for system locale (' + keyUiLocale + ') or default locale (' + defaultKeyUiLocale + ').');

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/styles/style.css	2015-09-27 12:09:57 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/styles/style.css	2015-10-03 12:51:50 +0000
@@ -54,8 +54,9 @@
 
 #init {
     display: table;
-    margin: 200px auto;
-    font-size: 15px;
+    margin: 300px auto;
+    font-size: 13px;
+    color: #444;
 }
 
 	/* Scrollbar Webkit */
@@ -150,6 +151,48 @@
     font-size: 11px;
 }
 
+.text-medium {
+    font-weight: 600;
+}
+
+
+/*----------------------------------------------------------------------------
+ * Spinner
+ *--------------------------------------------------------------------------*/
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    margin: 50px auto;
+    background-color: #aaa;
+
+    border-radius: 100%;
+    -webkit-animation: sk-scaleout 0.8s infinite ease-in-out;
+    animation: sk-scaleout 0.8s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0)
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
+@keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    100% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+        opacity: 0;
+    }
+}
+
 
 /*----------------------------------------------------------------------------
  * Openlayers

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/app.js	2015-10-02 22:14:02 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/app.js	2015-10-03 12:51:50 +0000
@@ -11,6 +11,7 @@
         extendCore,
         createViewport,
         dimConf,
+        chartConf,
 
         ns = {
             core: {},
@@ -1199,6 +1200,8 @@
 				dimensions = [].concat(favorite.columns || [], favorite.rows || [], favorite.filters || []);
 
 				// server sync
+                favorite.type = chartConf.c2s[favorite.type];
+
 				favorite.showData = favorite.showValues;
 				delete favorite.showValues;
 
@@ -2757,9 +2760,9 @@
 
         column = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.column,
+            chartType: chartConf.client.column,
             icon: 'images/column.png',
-            name: ns.core.conf.finals.chart.column,
+            name: chartConf.client.column,
             tooltipText: NS.i18n.column_chart,
             pressed: true,
             listeners: {
@@ -2769,9 +2772,9 @@
 
         stackedcolumn = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.stackedcolumn,
+            chartType: chartConf.client.stackedcolumn,
             icon: 'images/column-stacked.png',
-            name: ns.core.conf.finals.chart.stackedcolumn,
+            name: chartConf.client.stackedcolumn,
             tooltipText: NS.i18n.stacked_column_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2780,9 +2783,9 @@
 
         bar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.bar,
+            chartType: chartConf.client.bar,
             icon: 'images/bar.png',
-            name: ns.core.conf.finals.chart.bar,
+            name: chartConf.client.bar,
             tooltipText: NS.i18n.bar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2791,9 +2794,9 @@
 
         stackedbar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.stackedbar,
+            chartType: chartConf.client.stackedbar,
             icon: 'images/bar-stacked.png',
-            name: ns.core.conf.finals.chart.stackedbar,
+            name: chartConf.client.stackedbar,
             tooltipText: NS.i18n.stacked_bar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2802,9 +2805,9 @@
 
         line = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.line,
+            chartType: chartConf.client.line,
             icon: 'images/line.png',
-            name: ns.core.conf.finals.chart.line,
+            name: chartConf.client.line,
             tooltipText: NS.i18n.line_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2813,9 +2816,9 @@
 
         area = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.area,
+            chartType: chartConf.client.area,
             icon: 'images/area.png',
-            name: ns.core.conf.finals.chart.area,
+            name: chartConf.client.area,
             tooltipText: NS.i18n.area_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2824,9 +2827,9 @@
 
         pie = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.pie,
+            chartType: chartConf.client.pie,
             icon: 'images/pie.png',
-            name: ns.core.conf.finals.chart.pie,
+            name: chartConf.client.pie,
             tooltipText: NS.i18n.pie_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2835,9 +2838,9 @@
 
         radar = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.radar,
+            chartType: chartConf.client.radar,
             icon: 'images/radar.png',
-            name: ns.core.conf.finals.chart.radar,
+            name: chartConf.client.radar,
             tooltipText: NS.i18n.radar_chart,
             listeners: {
                 added: buttonAddedListener
@@ -2846,9 +2849,9 @@
 
         gauge = Ext.create('Ext.button.Button', {
             xtype: 'button',
-            chartType: ns.core.conf.finals.chart.gauge,
+            chartType: chartConf.client.gauge,
             icon: 'images/gauge.png',
-            name: ns.core.conf.finals.chart.gauge,
+            name: chartConf.client.gauge,
             tooltipText: NS.i18n.meter_chart,
             listeners: {
                 added: buttonAddedListener
@@ -7821,6 +7824,7 @@
 				extendCore(ns.core);
 
 				dimConf = ns.core.conf.finals.dimension;
+                chartConf = ns.core.conf.finals.chart;
 				ns.app.viewport = createViewport();
 
                 ns.core.app.getViewportWidth = function() { return ns.app.viewport.getWidth(); };

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/core.js	2015-10-02 22:14:02 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/core.js	2015-10-03 12:51:50 +0000
@@ -615,18 +615,30 @@
 					}
                 },
                 chart: {
-                    series: 'series',
-                    category: 'category',
-                    filter: 'filter',
-                    column: 'COLUMN',
-                    stackedcolumn: 'STACKED_COLUMN',
-                    bar: 'BAR',
-                    stackedbar: 'STACKED_BAR',
-                    line: 'LINE',
-                    area: 'AREA',
-                    pie: 'PIE',
-                    radar: 'RADAR',
-                    gauge: 'GAUGE'
+                    client: {
+                        series: 'series',
+                        category: 'category',
+                        filter: 'filter',
+                        column: 'column',
+                        stackedcolumn: 'stackedcolumn',
+                        bar: 'bar',
+                        stackedbar: 'stackedbar',
+                        line: 'line',
+                        area: 'area',
+                        pie: 'pie',
+                        radar: 'radar'
+                    },
+                    server: {
+                        column: 'COLUMN',
+                        stackedcolumn: 'STACKED_COLUMN',
+                        bar: 'BAR',
+                        stackedbar: 'STACKED_BAR',
+                        line: 'LINE',
+                        area: 'AREA',
+                        pie: 'PIE',
+                        radar: 'RADAR',
+                        gauge: 'GAUGE'
+                    }
                 },
                 data: {
                     domain: 'domain_',
@@ -648,6 +660,36 @@
                 }
             };
 
+            conf.finals.chart.c2s = {};
+            conf.finals.chart.s2c = {};
+
+            (function() {
+                var client = conf.finals.chart.client,
+                    server = conf.finals.chart.server,
+                    c2s = conf.finals.chart.c2s,
+                    s2c = conf.finals.chart.s2c;
+
+                c2s[client.column] = server.column;
+                c2s[client.stackedcolumn] = server.stackedcolumn;
+                c2s[client.bar] = server.bar;
+                c2s[client.stackedbar] = server.stackedbar;
+                c2s[client.line] = server.line;
+                c2s[client.area] = server.area;
+                c2s[client.pie] = server.pie;
+                c2s[client.radar] = server.radar;
+                c2s[client.gauge] = server.gauge;
+
+                s2c[server.column] = client.column;
+                s2c[server.stackedcolumn] = client.stackedcolumn;
+                s2c[server.bar] = client.bar;
+                s2c[server.stackedbar] = client.stackedbar;
+                s2c[server.line] = client.line;
+                s2c[server.area] = client.area;
+                s2c[server.pie] = client.pie;
+                s2c[server.radar] = client.radar;
+                s2c[server.gauge] = client.gauge;
+            })();
+
             dimConf = conf.finals.dimension;
 
             dimConf.objectNameMap = {};
@@ -1128,7 +1170,7 @@
 					//config = analytical2layout(config);
 
                     // layout
-                    layout.type = Ext.isString(config.type) ? config.type : conf.finals.chart.column;
+                    layout.type = conf.finals.chart.s2c[config.type] || conf.finals.chart.client[config.type] || 'column';
 
                     layout.columns = config.columns;
                     layout.rows = config.rows;
@@ -3413,7 +3455,7 @@
                     return chart;
                 };
 
-                generator['COLUMN'] = function(isStacked) {
+                generator.column = function(isStacked) {
                     var store = getDefaultStore(isStacked),
                         numericAxis = getDefaultNumericAxis(store),
                         categoryAxis = getDefaultCategoryAxis(store),
@@ -3443,13 +3485,13 @@
                     });
                 };
 
-                generator['STACKED_COLUMN'] = function() {
+                generator.stackedcolumn = function() {
                     var chart = this.column(true);
 
                     for (var i = 0, item; i < chart.series.items.length; i++) {
                         item = chart.series.items[i];
 
-                        if (item.type === conf.finals.chart.column) {
+                        if (item.type === conf.finals.chart.client.column) {
                             item.stacked = true;
                         }
                     }
@@ -3457,7 +3499,7 @@
                     return chart;
                 };
 
-                generator['BAR'] = function(isStacked) {
+                generator.bar = function(isStacked) {
                     var store = getDefaultStore(isStacked),
                         numericAxis = getDefaultNumericAxis(store),
                         categoryAxis = getDefaultCategoryAxis(store),
@@ -3529,13 +3571,13 @@
                     });
                 };
 
-                generator['STACKED_BAR'] = function() {
+                generator.stackedbar = function() {
                     var chart = this.bar(true);
 
                     for (var i = 0, item; i < chart.series.items.length; i++) {
                         item = chart.series.items[i];
 
-                        if (item.type === conf.finals.chart.bar) {
+                        if (item.type === conf.finals.chart.client.bar) {
                             item.stacked = true;
                         }
                     }
@@ -3543,7 +3585,7 @@
                     return chart;
                 };
 
-                generator['LINE'] = function() {
+                generator.line = function() {
                     var store = getDefaultStore(),
                         numericAxis = getDefaultNumericAxis(store),
                         categoryAxis = getDefaultCategoryAxis(store),
@@ -3617,7 +3659,7 @@
                     });
                 };
 
-                generator['AREA'] = function() {
+                generator.area = function() {
 
                     // NB, always true for area charts as extjs area charts cannot handle nulls
                     xLayout.hideEmptyRows = true;
@@ -3658,7 +3700,7 @@
                     });
                 };
 
-                generator['PIE'] = function() {
+                generator.pie = function() {
                     var store = getDefaultStore(),
                         series,
                         colors,
@@ -3757,7 +3799,7 @@
                     return chart;
                 };
 
-                generator['RADAR'] = function() {
+                generator.radar = function() {
                     var store = getDefaultStore(),
                         axes = [],
                         series = [],
@@ -3837,7 +3879,7 @@
                     return chart;
                 };
 
-                generator['GAUGE'] = function() {
+                generator.gauge = function() {
                     var valueColor = '#aaa',
                         store,
                         axis,