dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #35088
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18010: Dashboard, radar chart fixes.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 18010 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2015-01-16 00:41:25 +0100
message:
Dashboard, radar chart fixes.
modified:
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/chart.js
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/eventchart.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-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2015-01-15 22:09:04 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2015-01-15 23:40:16 +0000
@@ -64,7 +64,7 @@
dhis2.db.currentKey = "dhis2.dashboard.current." + json.username;
dhis2.db.renderDashboardListLoadFirst();
} );
-
+
$.getJSON( "../api/system/info.json", function( json ) {
dhis2.db.contextPath = json.contextPath;
} );
@@ -546,22 +546,23 @@
skipMask: true,
domainAxisStyle: {
labelRotation: 45,
- labelFont: '10px arial,sans-serif',
+ labelFont: '10px sans-serif',
labelColor: '#111'
},
rangeAxisStyle: {
- labelFont: '9px arial,sans-serif'
+ labelFont: '9px sans-serif'
},
legendStyle: {
labelMaxLength: 10,
- labelFont: 'normal 10px arial,sans-serif',
+ labelFont: 'normal 10px sans-serif',
labelColor: '#222',
labelMarkerSize: 10,
- titleFont: 'bold 12px arial,sans-serif',
+ titleFont: 'bold 12px sans-serif',
titleColor: '#333'
},
seriesStyle: {
- labelFontSize: '9px arial,sans-serif'
+ labelColor: '#333',
+ labelFont: '9px sans-serif'
}
});
}
@@ -582,22 +583,23 @@
skipMask: true,
domainAxisStyle: {
labelRotation: 45,
- labelFont: '10px arial,sans-serif',
+ labelFont: '10px sans-serif',
labelColor: '#111'
},
rangeAxisStyle: {
- labelFont: '9px arial,sans-serif'
+ labelFont: '9px sans-serif'
},
legendStyle: {
labelMaxLength: 10,
- labelFont: 'normal 10px arial,sans-serif',
+ labelFont: 'normal 10px sans-serif',
labelColor: '#222',
labelMarkerSize: 10,
- titleFont: 'bold 12px arial,sans-serif',
+ titleFont: 'bold 12px sans-serif',
titleColor: '#333'
},
seriesStyle: {
- labelFontSize: '9px arial,sans-serif'
+ labelColor: '#333',
+ labelFont: '9px sans-serif'
}
});
}
@@ -978,7 +980,7 @@
$h.append( $.tmpl( dhis2.db.tmpl.hitItem, { "canManage": canManage, "link": "../dhis-web-pivot/index.html?id=" + o.id, "img": "table_small", "name": o.name, "type": "reportTable", "id": o.id, "i18n_add": i18n_add } ) );
}
}
-
+
if ( data.eventReportCount > 0 )
{
$h.append( $.tmpl( dhis2.db.tmpl.hitHeader, { "title": "Event reports", "type": "eventReport", "i18n_see_more_hits": i18n_see_more_hits, "i18n_see_fewer_hits": i18n_see_fewer_hits } ) );
@@ -1091,10 +1093,10 @@
$( "#chartImage" ).attr( "src", url );
var link = dhis2.db.contextPath + url.substring( 2 );
-
+
$( "#chartImageUrl" ).html( link );
$( "#chartImageUrl" ).attr( "href", link );
-
+
$( "#chartView" ).dialog( {
autoOpen : true,
modal : true,
@@ -1128,7 +1130,7 @@
dhis2.db.downloadImage = function()
{
var url = $( "#chartImage" ).attr( "src" );
-
+
if ( url ) {
url = url + "&attachment=true";
window.location.href = url;
=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/chart.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/chart.js 2015-01-15 16:49:39 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/chart.js 2015-01-15 23:40:16 +0000
@@ -399,6 +399,136 @@
}
});
+ Ext.override(Ext.chart.axis.Radial, {
+ drawLabel: function() {
+ var chart = this.chart,
+ surface = chart.surface,
+ bbox = chart.chartBBox,
+ store = chart.store,
+ centerX = bbox.x + (bbox.width / 2),
+ centerY = bbox.y + (bbox.height / 2),
+ rho = Math.min(bbox.width, bbox.height) /2,
+ max = Math.max, round = Math.round,
+ labelArray = [], label,
+ fields = [], nfields,
+ categories = [], xField,
+ aggregate = !this.maximum,
+ maxValue = this.maximum || 0,
+ steps = this.steps, i = 0, j, dx, dy,
+ pi2 = Math.PI * 2,
+ cos = Math.cos, sin = Math.sin,
+ display = this.label.display,
+ draw = display !== 'none',
+ margin = 10,
+
+ labelColor = '#333',
+ labelFont = 'normal 9px sans-serif',
+ seriesStyle = chart.seriesStyle;
+
+ labelColor = seriesStyle ? seriesStyle.labelColor : labelColor;
+ labelFont = seriesStyle ? seriesStyle.labelFont : labelFont;
+
+ if (!draw) {
+ return;
+ }
+
+ //get all rendered fields
+ chart.series.each(function(series) {
+ fields.push(series.yField);
+ xField = series.xField;
+ });
+
+ //get maxValue to interpolate
+ store.each(function(record, i) {
+ if (aggregate) {
+ for (i = 0, nfields = fields.length; i < nfields; i++) {
+ maxValue = max(+record.get(fields[i]), maxValue);
+ }
+ }
+ categories.push(record.get(xField));
+ });
+ if (!this.labelArray) {
+ if (display != 'categories') {
+ //draw scale
+ for (i = 1; i <= steps; i++) {
+ label = surface.add({
+ type: 'text',
+ text: round(i / steps * maxValue),
+ x: centerX,
+ y: centerY - rho * i / steps,
+ 'text-anchor': 'middle',
+ 'stroke-width': 0.1,
+ stroke: '#333',
+ fill: labelColor,
+ font: labelFont
+ });
+ label.setAttributes({
+ hidden: false
+ }, true);
+ labelArray.push(label);
+ }
+ }
+ if (display != 'scale') {
+ //draw text
+ for (j = 0, steps = categories.length; j < steps; j++) {
+ dx = cos(j / steps * pi2) * (rho + margin);
+ dy = sin(j / steps * pi2) * (rho + margin);
+ label = surface.add({
+ type: 'text',
+ text: categories[j],
+ x: centerX + dx,
+ y: centerY + dy,
+ 'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start'),
+ fill: labelColor,
+ font: labelFont
+ });
+ label.setAttributes({
+ hidden: false
+ }, true);
+ labelArray.push(label);
+ }
+ }
+ }
+ else {
+ labelArray = this.labelArray;
+ if (display != 'categories') {
+ //draw values
+ for (i = 0; i < steps; i++) {
+ labelArray[i].setAttributes({
+ text: round((i + 1) / steps * maxValue),
+ x: centerX,
+ y: centerY - rho * (i + 1) / steps,
+ 'text-anchor': 'middle',
+ 'stroke-width': 0.1,
+ stroke: '#333',
+ fill: labelColor,
+ font: labelFont
+ }, true);
+ }
+ }
+ if (display != 'scale') {
+ //draw text
+ for (j = 0, steps = categories.length; j < steps; j++) {
+ dx = cos(j / steps * pi2) * (rho + margin);
+ dy = sin(j / steps * pi2) * (rho + margin);
+ if (labelArray[i + j]) {
+ labelArray[i + j].setAttributes({
+ type: 'text',
+ text: categories[j],
+ x: centerX + dx,
+ y: centerY + dy,
+ 'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start'),
+ fill: labelColor,
+ font: labelFont
+ }, true);
+ }
+ }
+ }
+ }
+ this.labelArray = labelArray;
+ }
+ });
+
// namespace
DV = {};
@@ -1089,7 +1219,7 @@
console.log('Response: no valid headers');
return;
}
-
+
if (!(Ext.isArray(config.rows) && config.rows.length > 0)) {
init.alert('No values found');
return;
@@ -3362,6 +3492,8 @@
axes = [],
series = [],
seriesTitles = getDefaultSeriesTitle(store),
+ labelFont = 'normal 9px sans-serif',
+ labelColor = '#333',
chart;
// axes
@@ -3397,29 +3529,41 @@
series.push(obj);
}
+ // style
+ if (Ext.isObject(xLayout.seriesStyle)) {
+ var style = xLayout.seriesStyle;
+
+ // label
+ labelColor = style.labelColor || labelColor;
+
+ if (style.labelFont) {
+ labelFont = style.labelFont;
+ }
+ else {
+ labelFont = style.labelFontWeight ? style.labelFontWeight + ' ' : 'normal ';
+ labelFont += style.labelFontSize ? parseFloat(style.labelFontSize) + 'px ' : '9px ';
+ labelFont += style.labelFontFamily ? style.labelFontFamily : conf.chart.style.fontFamily;
+ }
+ }
+
+ // chart
chart = getDefaultChart({
store: store,
axes: axes,
series: series,
- theme: 'Category2'
+ theme: 'Category2',
+ insetPaddingObject: {
+ top: 20,
+ right: 2,
+ bottom: 15,
+ left: 7
+ },
+ seriesStyle: {
+ labelColor: labelColor,
+ labelFont: labelFont
+ }
});
- chart.insetPadding = ns.dashboard ? 32 : 40;
-
- chart.height = ns.app.centerRegion.getHeight() - 80;
-
- chart.setChartSize = function() {
- var width = ns.app.centerRegion.getWidth(),
- height = ns.app.centerRegion.getHeight();
-
- return function() {
- this.animate = false;
- this.setWidth(ns.dashboard ? width : width);
- this.setHeight(ns.dashboard ? height : height - 80);
- this.animate = !ns.dashboard;
- };
- };
-
return chart;
};
@@ -3699,7 +3843,7 @@
// alert
css += '.ns-plugin-alert { width: 90%; padding: 5%; color: #777 } \n';
-
+
Ext.util.CSS.createStyleSheet(css);
};
=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/eventchart.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/eventchart.js 2015-01-15 22:34:01 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/plugin/eventchart.js 2015-01-15 23:40:16 +0000
@@ -399,6 +399,136 @@
}
});
+ Ext.override(Ext.chart.axis.Radial, {
+ drawLabel: function() {
+ var chart = this.chart,
+ surface = chart.surface,
+ bbox = chart.chartBBox,
+ store = chart.store,
+ centerX = bbox.x + (bbox.width / 2),
+ centerY = bbox.y + (bbox.height / 2),
+ rho = Math.min(bbox.width, bbox.height) /2,
+ max = Math.max, round = Math.round,
+ labelArray = [], label,
+ fields = [], nfields,
+ categories = [], xField,
+ aggregate = !this.maximum,
+ maxValue = this.maximum || 0,
+ steps = this.steps, i = 0, j, dx, dy,
+ pi2 = Math.PI * 2,
+ cos = Math.cos, sin = Math.sin,
+ display = this.label.display,
+ draw = display !== 'none',
+ margin = 10,
+
+ labelColor = '#333',
+ labelFont = 'normal 9px sans-serif',
+ seriesStyle = chart.seriesStyle;
+
+ labelColor = seriesStyle ? seriesStyle.labelColor : labelColor;
+ labelFont = seriesStyle ? seriesStyle.labelFont : labelFont;
+
+ if (!draw) {
+ return;
+ }
+
+ //get all rendered fields
+ chart.series.each(function(series) {
+ fields.push(series.yField);
+ xField = series.xField;
+ });
+
+ //get maxValue to interpolate
+ store.each(function(record, i) {
+ if (aggregate) {
+ for (i = 0, nfields = fields.length; i < nfields; i++) {
+ maxValue = max(+record.get(fields[i]), maxValue);
+ }
+ }
+ categories.push(record.get(xField));
+ });
+ if (!this.labelArray) {
+ if (display != 'categories') {
+ //draw scale
+ for (i = 1; i <= steps; i++) {
+ label = surface.add({
+ type: 'text',
+ text: round(i / steps * maxValue),
+ x: centerX,
+ y: centerY - rho * i / steps,
+ 'text-anchor': 'middle',
+ 'stroke-width': 0.1,
+ stroke: '#333',
+ fill: labelColor,
+ font: labelFont
+ });
+ label.setAttributes({
+ hidden: false
+ }, true);
+ labelArray.push(label);
+ }
+ }
+ if (display != 'scale') {
+ //draw text
+ for (j = 0, steps = categories.length; j < steps; j++) {
+ dx = cos(j / steps * pi2) * (rho + margin);
+ dy = sin(j / steps * pi2) * (rho + margin);
+ label = surface.add({
+ type: 'text',
+ text: categories[j],
+ x: centerX + dx,
+ y: centerY + dy,
+ 'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start'),
+ fill: labelColor,
+ font: labelFont
+ });
+ label.setAttributes({
+ hidden: false
+ }, true);
+ labelArray.push(label);
+ }
+ }
+ }
+ else {
+ labelArray = this.labelArray;
+ if (display != 'categories') {
+ //draw values
+ for (i = 0; i < steps; i++) {
+ labelArray[i].setAttributes({
+ text: round((i + 1) / steps * maxValue),
+ x: centerX,
+ y: centerY - rho * (i + 1) / steps,
+ 'text-anchor': 'middle',
+ 'stroke-width': 0.1,
+ stroke: '#333',
+ fill: labelColor,
+ font: labelFont
+ }, true);
+ }
+ }
+ if (display != 'scale') {
+ //draw text
+ for (j = 0, steps = categories.length; j < steps; j++) {
+ dx = cos(j / steps * pi2) * (rho + margin);
+ dy = sin(j / steps * pi2) * (rho + margin);
+ if (labelArray[i + j]) {
+ labelArray[i + j].setAttributes({
+ type: 'text',
+ text: categories[j],
+ x: centerX + dx,
+ y: centerY + dy,
+ 'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start'),
+ fill: labelColor,
+ font: labelFont
+ }, true);
+ }
+ }
+ }
+ }
+ this.labelArray = labelArray;
+ }
+ });
+
// namespace
EV = {};
@@ -1055,7 +1185,7 @@
console.log('Response: no valid headers');
return;
}
-
+
if (!(Ext.isArray(config.rows) && config.rows.length > 0)) {
init.alert('No values found');
return;
@@ -3729,6 +3859,8 @@
axes = [],
series = [],
seriesTitles = getDefaultSeriesTitle(store),
+ labelFont = 'normal 9px sans-serif',
+ labelColor = '#333',
chart;
// axes
@@ -3764,23 +3896,41 @@
series.push(obj);
}
+ // style
+ if (Ext.isObject(xLayout.seriesStyle)) {
+ var style = xLayout.seriesStyle;
+
+ // label
+ labelColor = style.labelColor || labelColor;
+
+ if (style.labelFont) {
+ labelFont = style.labelFont;
+ }
+ else {
+ labelFont = style.labelFontWeight ? style.labelFontWeight + ' ' : 'normal ';
+ labelFont += style.labelFontSize ? parseFloat(style.labelFontSize) + 'px ' : '9px ';
+ labelFont += style.labelFontFamily ? style.labelFontFamily : conf.chart.style.fontFamily;
+ }
+ }
+
+ // chart
chart = getDefaultChart({
store: store,
axes: axes,
series: series,
- theme: 'Category2'
+ theme: 'Category2',
+ insetPaddingObject: {
+ top: 20,
+ right: 2,
+ bottom: 15,
+ left: 7
+ },
+ seriesStyle: {
+ labelColor: labelColor,
+ labelFont: labelFont
+ }
});
- chart.insetPadding = 40;
- chart.height = ns.app.centerRegion.getHeight() - 80;
-
- chart.setChartSize = function() {
- //this.animate = false;
- this.setWidth(ns.app.centerRegion.getWidth());
- this.setHeight(ns.app.centerRegion.getHeight() - 80);
- //this.animate = true;
- };
-
return chart;
};
