dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #32716
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 16684: DV gauge chart implemented.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 16684 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2014-09-10 13:58:35 +0200
message:
DV gauge chart implemented.
added:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-visualizer/images/gauge.png
modified:
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/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-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]();
};
