=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/java/org/hisp/dhis/pivot/action/InitializeAction.java' --- dhis-2/dhis-web/dhis-web-pivot/src/main/java/org/hisp/dhis/pivot/action/InitializeAction.java 2013-06-24 17:06:04 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/java/org/hisp/dhis/pivot/action/InitializeAction.java 2013-08-03 11:22:56 +0000 @@ -94,8 +94,24 @@ } // ------------------------------------------------------------------------- + // Input + // ------------------------------------------------------------------------- + + private String callback; + + public void setCallback( String callback ) + { + this.callback = callback; + } + + // ------------------------------------------------------------------------- // Output // ------------------------------------------------------------------------- + + public String getCallback() + { + return callback; + } private String contextPath; === added file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/plugin.html' --- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/plugin.html 1970-01-01 00:00:00 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/plugin.html 2013-08-03 13:23:23 +0000 @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + +

TABLE 1

+
+ +

TABLE 2

+
+ + === 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-07-23 13:50:11 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js 2013-08-03 11:22:56 +0000 @@ -20,8 +20,7 @@ // Init pt = PT.core.getInstance(); - - PT.core.instances = [pt]; + PT.core.instances.push(pt); PT.app.getInits = function(r) { var init = Ext.decode(r.responseText); @@ -264,12 +263,6 @@ return unescape(output); } }; - - util.str = { - replaceAll: function(str, find, replace) { - return str.replace(new RegExp(find, 'g'), replace); - } - }; return util; }; === 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-07-23 13:50:11 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js 2013-08-03 13:23:23 +0000 @@ -1,4 +1,16 @@ -PT.core = {}; +if (!('PT' in window)) { + PT = {}; +} + +if(!('i18n' in PT)) { + PT.i18n = {}; +} + +PT.debug = false; + +PT.core = { + instances: [] +}; Ext.onReady( function() { @@ -376,14 +388,13 @@ util.mask = { showMask: function(cmp, msg) { - cmp = cmp || pt.viewport; + cmp = cmp || pt.viewport.centerRegion; msg = msg || 'Loading..'; if (pt.viewport.mask) { pt.viewport.mask.destroy(); } pt.viewport.mask = new Ext.create('Ext.LoadMask', cmp, { - id: 'pt-loadmask', shadow: false, msg: msg, style: 'box-shadow:0', @@ -506,6 +517,12 @@ } }; + util.str = { + replaceAll: function(str, find, replace) { + return str.replace(new RegExp(find, 'g'), replace); + } + }; + util.color = { hexToRgb: function(hex) { var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -806,6 +823,7 @@ setMouseHandlers, getTableHtml, initialize, + tableUuid = pt.el + '_' + Ext.data.IdGenerator.get('uuid').generate(), uuidDimUuidsMap = {}, uuidObjectMap = {}; @@ -1943,7 +1961,7 @@ }; getHtml = function() { - var s = ''; + var s = '
'; for (var i = 0; i < htmlArray.length; i++) { s += '' + htmlArray[i].join('') + ''; @@ -1978,7 +1996,7 @@ } // Show load mask - pt.util.mask.showMask(pt.viewport); + pt.util.mask.showMask(pt.viewport.centerRegion); Ext.Ajax.request({ method: 'GET', @@ -2027,6 +2045,22 @@ // After table success + // Resize render elements if plugin + if (pt.isPlugin) { + var baseEl = Ext.get(pt.el), + baseElBorderW = parseInt(baseEl.getStyle('border-left-width')) + parseInt(baseEl.getStyle('border-right-width')), + baseElBorderH = parseInt(baseEl.getStyle('border-top-width')) + parseInt(baseEl.getStyle('border-bottom-width')), + baseElPaddingW = parseInt(baseEl.getStyle('padding-left')) + parseInt(baseEl.getStyle('padding-right')), + baseElPaddingH = parseInt(baseEl.getStyle('padding-top')) + parseInt(baseEl.getStyle('padding-bottom')), + el = Ext.get(tableUuid); + + pt.viewport.centerRegion.setWidth(el.getWidth()); + pt.viewport.centerRegion.setHeight(el.getHeight()); + baseEl.setWidth(el.getWidth() + baseElBorderW + baseElPaddingW); + baseEl.setHeight(el.getHeight() + baseElBorderH + baseElPaddingH); + //Ext.get(pt.el).dom.innerHTML = html; + } + // Hide mask pt.util.mask.hideMask(); @@ -2050,8 +2084,10 @@ pt.xLayout = xLayout; pt.xResponse = xResponse; -console.log("xResponse", xResponse); -console.log("xLayout", xLayout); + if (PT.debug) { + console.log("xResponse", xResponse); + console.log("xLayout", xLayout); + } } }); @@ -2059,31 +2095,58 @@ }, loadTable: function(id) { + var url = pt.baseUrl + '/api/reportTables/' + id, + params = '?viewClass=dimensional&links=false', + method = 'GET', + success, + failure; + if (!Ext.isString(id)) { alert('Invalid id'); return; } - - Ext.Ajax.request({ - url: pt.baseUrl + '/api/reportTables/' + id + '.json?viewClass=dimensional&links=false', - method: 'GET', - failure: function(r) { - pt.util.mask.hideMask(); - alert(r.responseText); - }, - success: function(r) { - var layoutConfig = Ext.decode(r.responseText), - layout = pt.api.layout.Layout(layoutConfig); - - if (layout) { - pt.favorite = Ext.clone(layout); - pt.favorite.id = layoutConfig.id; - pt.favorite.name = layoutConfig.name; - - pt.viewport.setFavorite(layout); - } + + success = function(layoutConfig) { + var layout = pt.api.layout.Layout(layoutConfig); + + if (layout) { + pt.favorite = Ext.clone(layout); + pt.favorite.id = layoutConfig.id; + pt.favorite.name = layoutConfig.name; + + pt.viewport.setFavorite(layout); } - }); + }; + + failure = function(responseText) { + pt.util.mask.hideMask(); + alert(responseText); + }; + + if (pt.isPlugin) { + Ext.data.JsonP.request({ + url: url + '.jsonp' + params, + method: method, + failure: function(r) { + failure(r); + }, + success: function(r) { + success(r); + } + }); + } + else { + Ext.Ajax.request({ + url: url + '.json' + params, + method: method, + failure: function(r) { + failure(r.responseText); + }, + success: function(r) { + success(Ext.decode(r.responseText)); + } + }); + } }, onMouseHover: function(uuid, event, param) { === 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-04-10 15:21:42 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/plugin.js 2013-08-03 13:48:20 +0000 @@ -1,154 +1,116 @@ -//format - -settings = { - col: [ - {name: 'dx', items: ['Uvn6LCg7dVU', 'OdiHJayrsKo', 'sB79w2hiLp8']}, - {name: 'co'} - ], - row: [ - {name: 'pe', items: ['201201', '201202', '201203']}, - {name: 'Bpx0589u8y0', items: ['MAs88nJc9nL', 'PVLOW4bCshG']} - ], - filter: [ - {name: 'ou', items: ['ImspTQPwCqd']} - ], - options: { - showTotals: true, - showSubTotals: true, - hideEmptyRows: false, - displayDensity: 'normal', - fontSize: 'normal', - digitGroupSeparator: 'space', - reportingPeriod: false, - organisationUnit: false, - parentOrganisationUnit: false, - userOrganisationUnit: true, - userOrganisationUnitChildren: false - } -}; - -xLayout = { - col: [ - {name: 'dx', items: ['Uvn6LCg7dVU', 'OdiHJayrsKo', 'sB79w2hiLp8']}, - {name: 'co'} - ], - row: [ - {name: 'pe', items: ['201201', '201202', '201203']}, - {name: 'Bpx0589u8y0', items: ['MAs88nJc9nL', 'PVLOW4bCshG']} - ], - filter: [ - {name: 'ou', items: ['ImspTQPwCqd']} - ], - dimensions: [ - {name: 'dx', items: ['Uvn6LCg7dVU', 'OdiHJayrsKo', 'sB79w2hiLp8']}, - {name: 'co'}, - {name: 'pe', items: ['201201', '201202', '201203']}, - {name: 'Bpx0589u8y0', items: ['MAs88nJc9nL', 'PVLOW4bCshG']}, - {name: 'ou', items: ['ImspTQPwCqd']} - ], - dimensionNames: ['dx', 'co', 'pe', 'Bpx0589u8y0', 'ou'], - sortedDimensions: [ - {name: 'Bpx0589u8y0', items: ['MAs88nJc9nL', 'PVLOW4bCshG']}, - {name: 'co'}, - {name: 'dx', items: ['OdiHJayrsKo', 'Uvn6LCg7dVU', 'sB79w2hiLp8']}, - {name: 'ou', items: ['ImspTQPwCqd']}, - {name: 'pe', items: ['201201', '201202', '201203']} - ], - sortedFilterDimensions: [ - {name: 'ou', items: ['ImspTQPwCqd']} - ], - nameItemsMap: { - 'dx': ['Uvn6LCg7dVU', 'OdiHJayrsKo', 'sB79w2hiLp8'], - 'co': [], - 'pe': ['201201', '201202', '201203'], - 'Bpx0589u8y0': ['MAs88nJc9nL', 'PVLOW4bCshG'], - 'ou': ['ImspTQPwCqd'] - }, - options: { - showTotals: true, - showSubTotals: true, - hideEmptyRows: false, - displayDensity: 'normal', - fontSize: 'normal', - digitGroupSeparator: 'space', - reportingPeriod: false, - organisationUnit: false, - parentOrganisationUnit: false, - userOrganisationUnit: true, - userOrganisationUnitChildren: false - } -}; - -xResponse = { - headers: [ - { - name: "dx", - column: "dx", - type: "java.lang.String", - hidden: false, - meta: true, - index: 0, - size: 3, - items: [ - - } - ], - metaData: { - 201201: "January 2012", - 201202: "February 2012" - }, - height: 96, - width: 4, - rows: [ - [ - "PVLOW4bCshG", - "Jtf34kNZhzP", - "201201", - "12.0" - ] - ], - //metaDataHeaderMap: { - //'Jtf34kNZhzP': 'dx' - //} - nameHeaderMap: { - 'dx': { - name: "dx", - column: "dx", - type: "java.lang.String", - hidden: false, - meta: true, - index: 0, - size: 3, - items: [ - - } - } -}; - -xAxis = { - dims: 2, - size: 15, - ids: ["O3qECFGrzeFeT1vvFVhLHc", "O3qECFGrzeFio8xTtlZV18", x15], - span: [5, 1], - items: [ - { - name: 'dx', - items: ["O3qECFGrzeF", "t3QKFZbCf2B", "OLlWZUfLtsR"] - }, - etc - ], - xItems: { - all: [ - [x15, "O3qECFGrzeF"], - [x15, "eT1vvFVhLHc"] - ], - gui: [ - [x3], - [x15] - ], - unique: [ - [x3], - [x5] - ] - } -}; +PT.plugin = {}; + +Ext.onReady(function() { + Ext.Ajax.method = 'GET'; + + document.body.oncontextmenu = function() { + return false; + }; + + // Table css + css = 'table.pivot { \n font-family: arial,sans-serif,ubuntu,consolas; \n } \n'; + css += '.td-nobreak { \n white-space: nowrap; \n } \n'; + css += '.td-hidden { \n display: none; \n } \n'; + css += '.td-collapsed { \n display: none; \n } \n'; + css += 'table.pivot { \n border-collapse: collapse; \n border-spacing: 0px; \n border: 0 none; \n } \n'; + css += '.pivot td { \n padding: 5px; \n border: \n 1px solid #b2b2b2; \n } \n'; + css += '.pivot-dim { \n background-color: #dae6f8; \n text-align: center; \n } \n'; + css += '.pivot-dim.highlighted { \n background-color: #c5d8f6; \n } \n'; + css += '.pivot-dim-subtotal { \n background-color: #cad6e8; \n text-align: center; \n } \n'; + css += '.pivot-dim-total { \n background-color: #bac6d8; \n text-align: center; \n } \n'; + css += '.pivot-dim-empty { \n background-color: #dae6f8; \n text-align: center; \n } \n'; + css += '.pivot-value { \n background-color: #fff; \n white-space: nowrap; \n text-align: right; \n } \n'; + css += '.pivot-value-subtotal { \n background-color: #f4f4f4; \n white-space: nowrap; \n text-align: right; \n } \n'; + css += '.pivot-value-subtotal-total { \n background-color: #e7e7e7; \n white-space: nowrap; \n text-align: right; \n } \n'; + css += '.pivot-value-total { \n background-color: #e4e4e4; \n white-space: nowrap; \n text-align: right; \n } \n'; + css += '.pivot-value-total-subgrandtotal { \n background-color: #d8d8d8; \n white-space: nowrap; \n text-align: right; \n } \n'; + css += '.pivot-value-grandtotal { \n background-color: #c8c8c8; \n white-space: nowrap; \n text-align: right; \n } \n'; + + // Load mask css + + css += '.x-mask-msg { \n padding: 0; \n border: 0 none; \n background-image: none; \n background-color: transparent; \n } \n'; + css += '.x-mask-msg div { \n background-position: 11px center; \n } \n'; + css += '.x-mask-msg .x-mask-loading { \n border: 0 none; \n background-color: #000; \n color: #fff; \n border-radius: 2px; \n padding: 12px 14px 12px 30px; \n opacity: 0.65; \n } \n'; + + Ext.util.CSS.createStyleSheet(css); + + PT.plugin.getTable = function(config) { + var validateConfig, + afterRender, + createViewport, + pt, + initialize; + + validateConfig = function(config) { + if (!Ext.isObject(config)) { + console.log('Report table configuration is not an object'); + return; + } + + if (!Ext.isString(config.el)) { + console.log('No element id provided'); + return; + } + + if (!Ext.isString(config.uid)) { + console.log('No report table uid provided'); + return; + } + + return true; + }; + + afterRender = function() {}; + + createViewport = function() { + var el = Ext.get(pt.el), + setFavorite, + centerRegion; + + setFavorite = function(layout) { + pt.util.pivot.createTable(layout, pt); + }; + + centerRegion = Ext.create('Ext.panel.Panel', { + renderTo: el, + bodyStyle: 'border: 0 none', + layout: 'fit', + listeners: { + afterrender: function() { + afterRender(); + } + } + }); + + return { + setFavorite: setFavorite, + centerRegion: centerRegion + }; + }; + + initialize = function() { + if (!validateConfig(config)) { + return; + } + + pt = PT.core.getInstance({ + baseUrl: config.url, + el: config.el + }); + + PT.core.instances.push(pt); + + pt.viewport = createViewport(); + pt.isPlugin = true; + + Ext.data.JsonP.request({ + url: pt.baseUrl + '/dhis-web-pivot/initialize.action', + success: function(r) { + pt.init = r; + + pt.util.pivot.loadTable(config.uid); + } + }); + }(); + }; +}); === modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/jsonInitialize.vm' --- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/jsonInitialize.vm 2013-06-24 17:06:04 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/jsonInitialize.vm 2013-08-03 11:22:56 +0000 @@ -1,4 +1,8 @@ -#set($oucSize = $currentUser.getOrganisationUnit().getSortedChildren().size()){ +#set($oucSize = $currentUser.getOrganisationUnit().getSortedChildren().size()) +#if($callback)$!{callback} +( +#end +{ "contextPath":"$!{contextPath}", "user":{"id":"$!currentUser.uid","name":"$currentUser.name","isAdmin":true, "ou":{"id":"$currentUser.getOrganisationUnit().uid","name":"$currentUser.getOrganisationUnit().name"}, @@ -7,4 +11,7 @@ "dimensions":[#foreach($dim in $dimensions){"id":"$!{dim.uid}","name":"$!encoder.jsonEncode($!{dim.name})"}#if($velocityCount<$dimensions.size()),#end#end], "legendSets":[#foreach($set in $legendSets){"id":"$!{set.uid}","name":"$!encoder.jsonEncode($!{set.name})", "legends":[#foreach($legend in $set.mapLegends){"id":"$!{legend.uid}","name":"$!{legend.name}","sv":"$!{legend.startValue}", "ev":"$!{legend.endValue}", "color":"$!{legend.color}"}#if($velocityCount<$set.mapLegends.size()),#end#end]}#if($velocityCount<$legendSets.size()),#end#end], "organisationUnitLevels":[#foreach($level in $levels){"id":"$!{level.uid}","name":"$!encoder.jsonEncode($!{level.name})","level":"$!{level.level}"}#if($velocityCount<$levels.size()),#end#end] -} \ No newline at end of file +} +#if($callback) +) +#end \ No newline at end of file === modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/core.js' --- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/core.js 2013-08-03 10:00:57 +0000 +++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/core.js 2013-08-03 13:48:20 +0000 @@ -375,16 +375,19 @@ }; util.mask = { - showMask: function(cmp, str) { - if (dv.mask) { - dv.mask.destroy(); + showMask: function(cmp, msg) { + cmp = cmp || pt.viewport.centerRegion; + msg = msg || 'Loading..'; + + if (dv.viewport.mask) { + dv.viewport.mask.destroy(); } - dv.mask = new Ext.LoadMask(cmp, {msg: str}); - dv.mask.show(); + dv.viewport.mask = new Ext.LoadMask(cmp, {msg: msg}); + dv.viewport.mask.show(); }, hideMask: function() { - if (dv.mask) { - dv.mask.hide(); + if (dv.viewport.mask) { + dv.viewport.mask.hide(); } } }; @@ -1873,7 +1876,7 @@ }(); }, - loadChart: function(id, isJsonP) { + loadChart: function(id) { var url = dv.baseUrl + '/api/charts/' + id, params = '?viewClass=dimensional&links=false', method = 'GET', @@ -1902,7 +1905,7 @@ alert(responseText); }; - if (isJsonP) { + if (dv.isPlugin) { Ext.data.JsonP.request({ url: url + '.jsonp' + params, method: method, === modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/plugin.js' --- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/plugin.js 2013-08-03 09:55:27 +0000 +++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/scripts/plugin.js 2013-08-03 13:48:20 +0000 @@ -8,6 +8,17 @@ return false; }; + // Chart tips css + var css = '.dv-chart-tips { \n border-radius: 2px; \n padding: 0px 3px 1px; \n border: 2px solid #777; \n background-color: #f1f1f1; \n } \n'; + css += '.dv-chart-tips .x-tip-body { \n background-color: #f1f1f1; \n font-size: 13px; \n font-weight: normal; \n color: #444; \n -webkit-text-stroke: 0; \n } \n'; + + // Load mask css + css += '.x-mask-msg { \n padding: 0; \n border: 0 none; \n background-image: none; \n background-color: transparent; \n } \n'; + css += '.x-mask-msg div { \n background-position: 11px center; \n } \n'; + css += '.x-mask-msg .x-mask-loading { \n border: 0 none; \n background-color: #000; \n color: #fff; \n border-radius: 2px; \n padding: 12px 14px 12px 30px; \n opacity: 0.65; \n } \n'; + + Ext.util.CSS.createStyleSheet(css); + DV.plugin.getChart = function(config) { var validateConfig, afterRender, @@ -17,12 +28,12 @@ validateConfig = function(config) { if (!Ext.isObject(config)) { - console.log('Invalid chart configuration'); + console.log('Chart configuration is not an object'); return; } if (!Ext.isString(config.el)) { - console.log('No element provided'); + console.log('No element id provided'); return; } @@ -40,11 +51,12 @@ var el = Ext.get(dv.el), setFavorite, centerRegion, - width, - height; - - width = el.getWidth() - parseInt(el.getStyle('border-left-width')) - parseInt(el.getStyle('border-right-width')); - height = el.getHeight() - parseInt(el.getStyle('border-top-width')) - parseInt(el.getStyle('border-bottom-width')); + elBorderW = parseInt(el.getStyle('border-left-width')) + parseInt(el.getStyle('border-right-width')), + elBorderH = parseInt(el.getStyle('border-top-width')) + parseInt(el.getStyle('border-bottom-width')), + elPaddingW = parseInt(el.getStyle('padding-left')) + parseInt(el.getStyle('padding-right')), + elPaddingH = parseInt(el.getStyle('padding-top')) + parseInt(el.getStyle('padding-bottom')), + width = el.getWidth() - elBorderW - elPaddingW, + height = el.getHeight() - elBorderH - elPaddingH; setFavorite = function(layout) { dv.util.chart.createChart(layout, dv); @@ -79,14 +91,17 @@ el: config.el }); + DV.core.instances.push(dv); + dv.viewport = createViewport(); + dv.isPlugin = true; Ext.data.JsonP.request({ url: dv.baseUrl + '/dhis-web-visualizer/initialize.action', success: function(r) { dv.init = r; - dv.util.chart.loadChart(config.uid, true); + dv.util.chart.loadChart(config.uid); } }); }();