dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #15005
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 5246: Chart axis label font size increased + Pie chart title and series tooltips improved.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 5246 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2011-11-30 17:11:57 +0100
message:
Chart axis label font size increased + Pie chart title and series tooltips improved.
modified:
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css
--
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-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js 2011-11-30 14:39:36 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js 2011-11-30 16:09:37 +0000
@@ -55,13 +55,6 @@
}
},
chart: {
- axis: {
- label: {
- rotate: {
- degrees: 330
- }
- }
- },
inset: 30
},
style: {
@@ -363,10 +356,10 @@
'stroke-width': 0.2
};
},
- getTitle: function(isPie) {
+ getTitle: function() {
return {
type: 'text',
- text: DV.init.isInit ? 'Example chart' : isPie ? DV.state.filter.names[0] + '\n' + DV.state.series.names[0] : DV.state.filter.names[0],
+ text: DV.init.isInit ? 'Example chart' : DV.state.filter.names[0],
font: 'bold 15px arial',
fill: '#222',
width: 300,
@@ -375,6 +368,37 @@
y: 16
};
},
+ getTips: function() {
+ return {
+ trackMouse: true,
+ height: 31,
+ renderer: function(item) {
+ }
+ };
+ },
+ label: {
+ getCategoryLabel: function() {
+ return {
+ font: '14px arial',
+ rotate: {
+ degrees: 330
+ }
+ };
+ },
+ getNumericLabel: function() {
+ return {
+ font: '13px arial',
+ renderer: Ext.util.Format.numberRenderer(DV.util.number.getChartAxisFormatRenderer())
+ };
+ }
+ },
+ bar: {
+ getCategoryLabel: function() {
+ return {
+ font: '14px arial'
+ };
+ }
+ },
line: {
getSeriesArray: function() {
var a = [];
@@ -413,6 +437,16 @@
y: 36
}
];
+ },
+ getTips: function() {
+ return {
+ trackMouse: true,
+ height: 47,
+ renderer: function(item) {
+ this.setWidth((item.data.x.length * 8) + 15);
+ this.setTitle('<span class="dv-chart-tips">' + item.data.x + '<br/><b>' + item.data[DV.store.chart.left[0]] + '</b></span>');
+ }
+ };
}
}
},
@@ -465,23 +499,6 @@
}
}
},
- window: {
- datatable: {
- getHeight: function() {
- if (DV.value.values.length) {
- if (Ext.isWindows && Ext.isGecko) {
- return 22 * DV.value.values.length + 57;
- }
- else if (Ext.isWindows && Ext.isIE) {
- return 21 * DV.value.values.length + 58;
- }
- else {
- return 21 * DV.value.values.length + 57;
- }
- }
- }
- }
- },
number: {
isInteger: function(n) {
var str = new String(n);
@@ -777,18 +794,16 @@
position: 'left',
minimum: 0,
fields: DV.store.chart.left,
+ label: DV.util.chart.label.getNumericLabel(),
grid: {
even: DV.util.chart.getGrid()
- },
- label: {
- renderer: Ext.util.Format.numberRenderer(DV.util.number.getChartAxisFormatRenderer())
}
},
{
type: 'Category',
position: 'bottom',
fields: DV.store.chart.bottom,
- label: DV.conf.chart.axis.label
+ label: DV.util.chart.label.getCategoryLabel()
}
],
series: [
@@ -819,16 +834,15 @@
{
type: 'Category',
position: 'left',
- fields: DV.store.chart.left
+ fields: DV.store.chart.left,
+ label: DV.util.chart.bar.getCategoryLabel()
},
{
type: 'Numeric',
position: 'bottom',
minimum: 0,
- fields: DV.store.chart.bottom,
- label: {
- renderer: Ext.util.Format.numberRenderer(DV.util.number.getChartAxisFormatRenderer())
- },
+ fields: DV.store.chart.bottom,
+ label: DV.util.chart.label.getNumericLabel(),
grid: {
even: DV.util.chart.getGrid()
}
@@ -864,9 +878,7 @@
position: 'left',
minimum: 0,
fields: DV.store.chart.left,
- label: {
- renderer: Ext.util.Format.numberRenderer(DV.util.number.getChartAxisFormatRenderer())
- },
+ label: DV.util.chart.label.getNumericLabel(),
grid: {
even: DV.util.chart.getGrid()
}
@@ -875,7 +887,7 @@
type: 'Category',
position: 'bottom',
fields: DV.store.chart.bottom,
- label: DV.conf.chart.axis.label
+ label: DV.util.chart.label.getCategoryLabel()
}
],
series: DV.util.chart.line.getSeriesArray()
@@ -894,9 +906,7 @@
position: 'left',
minimum: 0,
fields: DV.store.chart.left,
- label: {
- renderer: Ext.util.Format.numberRenderer(DV.util.number.getChartAxisFormatRenderer())
- },
+ label: DV.util.chart.label.getNumericLabel(),
grid: {
even: DV.util.chart.getGrid()
}
@@ -905,7 +915,7 @@
type: 'Category',
position: 'bottom',
fields: DV.store.chart.bottom,
- label: DV.conf.chart.axis.label
+ label: DV.util.chart.label.getCategoryLabel()
}
],
series: [{
@@ -931,14 +941,7 @@
type: 'pie',
field: DV.store.chart.left[0],
showInLegend: true,
- tips: {
- trackMouse: false,
- width: 160,
- height: 31,
- renderer: function(i) {
- this.setTitle('<span class="dv-chart-tips">' + i.data.x + ': <b>' + i.data[DV.store.chart.left[0]] + '</b></span>');
- }
- },
+ tips: DV.util.chart.pie.getTips(),
label: {
field: DV.store.chart.bottom[0]
},
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css 2011-11-29 16:43:52 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/style.css 2011-11-30 16:09:37 +0000
@@ -203,16 +203,16 @@
/* Tooltip */
.x-tip {
- -moz-border-radius: 3px 3px 3px 3px;
- -webkit-border-radius: 3px 3px 3px 3px;
- -o-border-radius: 3px 3px 3px 3px;
- -ms-border-radius: 3px 3px 3px 3px;
- -khtml-border-radius: 3px 3px 3px 3px;
- border-radius: 3px 3px 3px 3px;
- padding: 2px 2px 2px 2px;
+ -moz-border-radius: 2px 2px 2px 2px;
+ -webkit-border-radius: 2px 2px 2px 2px;
+ -o-border-radius: 2px 2px 2px 2px;
+ -ms-border-radius: 2px 2px 2px 2px;
+ -khtml-border-radius: 2px 2px 2px 2px;
+ border-radius: 2px 2px 2px 2px;
+ padding: 2px 5px 2px 0;
border-width: 2px;
border-style: solid;
- background-color: #ddd;
+ background-color: #eee;
}
/* Chart tips (tooltip) */
