=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/i18n/en.properties' --- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/i18n/en.properties 2014-08-27 10:49:05 +0000 +++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/i18n/en.properties 2014-09-10 11:56:42 +0000 @@ -226,4 +226,5 @@ open_last_map=Open last map dimensions=Dimensions assigned_categories=Assigned categories -table_layout=Table layout \ No newline at end of file +table_layout=Table layout +type=Type === added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/images/gauge.png' Binary files dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/images/gauge.png 1970-01-01 00:00:00 +0000 and dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/images/gauge.png 2014-09-10 11:56:42 +0000 differ === 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 2014-09-02 14:11:29 +0000 +++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/app.js 2014-09-10 11:56:42 +0000 @@ -2319,6 +2319,7 @@ area, pie, radar, + gauge, chartType, getDimensionStore, colStore, @@ -2505,6 +2506,17 @@ } }); + gauge = Ext.create('Ext.button.Button', { + xtype: 'button', + chartType: ns.core.conf.finals.chart.gauge, + icon: 'images/gauge.png', + name: ns.core.conf.finals.chart.gauge, + tooltipText: NS.i18n.gauge_chart, + listeners: { + added: buttonAddedListener + } + }); + chartType = Ext.create('Ext.toolbar.Toolbar', { height: 45, style: 'padding-top:1px; border:0 none; border-bottom:1px solid #ddd', @@ -2545,7 +2557,7 @@ items: [ { xtype: 'label', - text: NS.i18n.chart_type, + text: NS.i18n.type, style: 'font-size:11px; font-weight:bold; padding:13px 8px 0 6px' }, column, @@ -2555,7 +2567,8 @@ line, area, pie, - radar + radar, + gauge ] }); @@ -6232,4 +6245,3 @@ }); }()); }); - === 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 2014-08-29 10:36:17 +0000 +++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/scripts/core.js 2014-09-10 11:56:42 +0000 @@ -116,7 +116,8 @@ line: 'line', area: 'area', pie: 'pie', - radar: 'radar' + radar: 'radar', + gauge: 'gauge' }, data: { domain: 'domain_', @@ -2325,14 +2326,20 @@ }; getDefaultChartTitle = function(store) { - var ids = filterIds, - a = [], + var ids = [], text = '', - fontSize; - - if (xLayout.type === conf.finals.chart.pie) { - ids = ids.concat(columnIds); - } + fontSize, + isPie = xLayout.type === conf.finals.chart.pie, + isGauge = xLayout.type === conf.finals.chart.gauge; + + if (isPie) { + ids = Ext.Array.clean(ids.concat(columnIds || [])); + } + else if (isGauge) { + ids.push(columnIds[0], rowIds[0]); + } + + ids = Ext.Array.clean(ids.concat(filterIds || [])); if (Ext.isArray(ids) && ids.length) { for (var i = 0; i < ids.length; i++) { @@ -2390,39 +2397,38 @@ }; }; - getDefaultChart = function(store, axes, series, theme) { + getDefaultChart = function(config) { var chart, - config = { - //renderTo: init.el, - store: store, - axes: axes, - series: series, + store = config.store || {}, + defaultConfig = { animate: true, shadow: false, insetPadding: 35, width: ns.app.centerRegion.getWidth() - 15, height: ns.app.centerRegion.getHeight() - 40, - theme: theme || 'dv1' + theme: 'dv1' }; - // Legend + // legend if (!xLayout.hideLegend) { - config.legend = getDefaultLegend(store); + defaultConfig.legend = getDefaultLegend(store); - if (config.legend.position === 'right') { - config.insetPadding = 40; + if (defaultConfig.legend.position === 'right') { + defaultConfig.insetPadding = 40; } } - // Title + // title if (!xLayout.hideTitle) { - config.items = [getDefaultChartTitle(store)]; + defaultConfig.items = [getDefaultChartTitle(store)]; } else { - config.insetPadding = 10; + defaultConfig.insetPadding = 10; } - chart = Ext.create('Ext.chart.Chart', config); + Ext.apply(defaultConfig, config); + + chart = Ext.create('Ext.chart.Chart', defaultConfig); chart.setChartSize = getDefaultChartSizeHandler(); chart.setTitlePosition = getDefaultChartTitlePositionHandler(); @@ -2463,7 +2469,11 @@ // Theme setDefaultTheme(store); - return getDefaultChart(store, axes, series); + return getDefaultChart({ + store: store, + axes: axes, + series: series + }); }; generator.stackedcolumn = function() { @@ -2545,7 +2555,11 @@ // Theme setDefaultTheme(store); - return getDefaultChart(store, axes, series); + return getDefaultChart({ + store: store, + axes: axes, + series: series + }); }; generator.stackedbar = function() { @@ -2629,7 +2643,11 @@ } }); - return getDefaultChart(store, axes, series); + return getDefaultChart({ + store: store, + axes: axes, + series: series + }); }; generator.area = function() { @@ -2666,7 +2684,11 @@ // Theme setDefaultTheme(store); - return getDefaultChart(store, axes, series); + return getDefaultChart({ + store: store, + axes: axes, + series: series + }); }; generator.pie = function() { @@ -2727,7 +2749,11 @@ }); // Chart - chart = getDefaultChart(store, null, series); + chart = getDefaultChart({ + store: store, + series: series + }); + //chart.legend.position = 'right'; //chart.legend.isVertical = true; chart.insetPadding = 40; @@ -2776,7 +2802,12 @@ series.push(obj); } - chart = getDefaultChart(store, axes, series, 'Category2'); + chart = getDefaultChart({ + store: store, + axes: axes, + series: series, + theme: 'Category2' + }); chart.insetPadding = 40; chart.height = ns.app.centerRegion.getHeight() - 80; @@ -2791,6 +2822,65 @@ return chart; }; + generator.gauge = function() { + var store = getDefaultStore(), + axis, + series, + legend, + config, + chart; + + axis = { + type: 'gauge', + position: 'gauge', + minimum: 0, + maximum: 100, + steps: 10, + margin: -7 + }; + + series = { + type: 'gauge', + field: store.rangeFields[0], + //donut: 5, + colorSet: ['#82B525', '#ddd'] + }; + + chart = getDefaultChart({ + axes: [axis], + series: [series], + width: ns.app.centerRegion.getWidth(), + height: ns.app.centerRegion.getHeight() * 0.6, + store: store, + insetPadding: 100, + theme: null, + animate: { + easing: 'elasticIn', + duration: 1000 + } + }); + + chart.setChartSize = function() { + this.animate = false; + this.setWidth(ns.app.centerRegion.getWidth()); + this.setHeight(ns.app.centerRegion.getHeight() * 0.6); + this.animate = true; + }; + + chart.setTitlePosition = function() { + if (this.items) { + var title = this.items[0], + titleX = (ns.app.centerRegion.getWidth() / 2) - (title.el.getWidth() / 2); + + title.setAttributes({ + x: titleX + }, true); + } + }; + + return chart; + }; + // initialize return generator[xLayout.type](); };