/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* @class Ext.chart.axis.Gauge
|
*
|
* Gauge Axis is the axis to be used with a Gauge series. The Gauge axis
|
* displays numeric data from an interval defined by the `minimum`, `maximum` and
|
* `step` configuration properties. The placement of the numeric data can be changed
|
* by altering the `margin` option that is set to `10` by default.
|
*
|
* A possible configuration for this axis would look like:
|
*
|
* axes: [{
|
* type: 'gauge',
|
* position: 'gauge',
|
* minimum: 0,
|
* maximum: 100,
|
* steps: 10,
|
* margin: 7
|
* }],
|
*/
|
Ext.define('Ext.chart.axis.Gauge', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.chart.axis.Abstract',
|
|
/* End Definitions */
|
|
/**
|
* @cfg {Number} minimum (required)
|
* The minimum value of the interval to be displayed in the axis.
|
*/
|
|
/**
|
* @cfg {Number} maximum (required)
|
* The maximum value of the interval to be displayed in the axis.
|
*/
|
|
/**
|
* @cfg {Number} steps (required)
|
* The number of steps and tick marks to add to the interval.
|
*/
|
|
/**
|
* @cfg {Number} [margin=10]
|
* The offset positioning of the tick marks and labels in pixels.
|
*/
|
|
/**
|
* @cfg {String} title
|
* The title for the Axis.
|
*/
|
|
position: 'gauge',
|
|
alias: 'axis.gauge',
|
|
drawAxis: function(init) {
|
var chart = this.chart,
|
surface = chart.surface,
|
bbox = chart.chartBBox,
|
centerX = bbox.x + (bbox.width / 2),
|
centerY = bbox.y + bbox.height,
|
margin = this.margin || 10,
|
rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
|
sprites = [], sprite,
|
steps = this.steps,
|
i, pi = Math.PI,
|
cos = Math.cos,
|
sin = Math.sin;
|
|
if (this.sprites && !chart.resizing) {
|
this.drawLabel();
|
return;
|
}
|
|
if (this.margin >= 0) {
|
if (!this.sprites) {
|
//draw circles
|
for (i = 0; i <= steps; i++) {
|
sprite = surface.add({
|
type: 'path',
|
path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
|
centerY + (rho - margin) * sin(i / steps * pi - pi),
|
'L', centerX + rho * cos(i / steps * pi - pi),
|
centerY + rho * sin(i / steps * pi - pi), 'Z'],
|
stroke: '#ccc'
|
});
|
sprite.setAttributes({
|
hidden: false
|
}, true);
|
sprites.push(sprite);
|
}
|
} else {
|
sprites = this.sprites;
|
//draw circles
|
for (i = 0; i <= steps; i++) {
|
sprites[i].setAttributes({
|
path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
|
centerY + (rho - margin) * sin(i / steps * pi - pi),
|
'L', centerX + rho * cos(i / steps * pi - pi),
|
centerY + rho * sin(i / steps * pi - pi), 'Z'],
|
stroke: '#ccc'
|
}, true);
|
}
|
}
|
}
|
this.sprites = sprites;
|
this.drawLabel();
|
if (this.title) {
|
this.drawTitle();
|
}
|
},
|
|
drawTitle: function() {
|
var me = this,
|
chart = me.chart,
|
surface = chart.surface,
|
bbox = chart.chartBBox,
|
labelSprite = me.titleSprite,
|
labelBBox;
|
|
if (!labelSprite) {
|
me.titleSprite = labelSprite = surface.add(Ext.apply({
|
type: 'text',
|
zIndex: 2
|
}, me.axisTitleStyle, me.labelTitle));
|
}
|
labelSprite.setAttributes(Ext.apply({
|
text: me.title
|
}, me.label || {}), true);
|
labelBBox = labelSprite.getBBox();
|
labelSprite.setAttributes({
|
x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
|
y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
|
}, true);
|
},
|
|
/**
|
* Updates the {@link #title} of this axis.
|
* @param {String} title
|
*/
|
setTitle: function(title) {
|
this.title = title;
|
this.drawTitle();
|
},
|
|
drawLabel: function() {
|
var chart = this.chart,
|
surface = chart.surface,
|
bbox = chart.chartBBox,
|
centerX = bbox.x + (bbox.width / 2),
|
centerY = bbox.y + bbox.height,
|
margin = this.margin || 10,
|
rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
|
round = Math.round,
|
labelArray = [], label,
|
maxValue = this.maximum || 0,
|
minValue = this.minimum || 0,
|
steps = this.steps, i = 0,
|
adjY,
|
pi = Math.PI,
|
cos = Math.cos,
|
sin = Math.sin,
|
labelConf = this.label,
|
renderer = labelConf.renderer || Ext.identityFn;
|
|
if (!this.labelArray) {
|
//draw scale
|
for (i = 0; i <= steps; i++) {
|
// TODO Adjust for height of text / 2 instead
|
adjY = (i === 0 || i === steps) ? 7 : 0;
|
label = surface.add({
|
type: 'text',
|
text: renderer(round(minValue + i / steps * (maxValue - minValue))),
|
x: centerX + rho * cos(i / steps * pi - pi),
|
y: centerY + rho * sin(i / steps * pi - pi) - adjY,
|
'text-anchor': 'middle',
|
'stroke-width': 0.2,
|
zIndex: 10,
|
stroke: '#333'
|
});
|
label.setAttributes({
|
hidden: false
|
}, true);
|
labelArray.push(label);
|
}
|
}
|
else {
|
labelArray = this.labelArray;
|
//draw values
|
for (i = 0; i <= steps; i++) {
|
// TODO Adjust for height of text / 2 instead
|
adjY = (i === 0 || i === steps) ? 7 : 0;
|
labelArray[i].setAttributes({
|
text: renderer(round(minValue + i / steps * (maxValue - minValue))),
|
x: centerX + rho * cos(i / steps * pi - pi),
|
y: centerY + rho * sin(i / steps * pi - pi) - adjY
|
}, true);
|
}
|
}
|
this.labelArray = labelArray;
|
}
|
});
|
