jui.define("chart.brush.doubledonut", [ "util.base", "util.math", "util.color" ], function(_, math, ColorUtil) {
/**
* @class chart.brush.doubledonut
* @extends chart.brush.pie
*
*/
var DoubleDonutBrush = function() {
var self = this,
cache_active = {};
this.drawDonut = function(centerX, centerY, innerRadius, outerRadius, startAngle, endAngle, attr) {
attr['stroke-width'] = outerRadius - innerRadius;
if (endAngle >= 360) { // bugfix : if angle is 360 , donut cang't show
endAngle = 359.9999;
}
var g = this.chart.svg.group(),
path = this.chart.svg.path(attr),
dist = Math.abs(outerRadius - innerRadius);
// 바깥 지름 부터 그림
var obj = math.rotate(0, -outerRadius, math.radian(startAngle)),
startX = obj.x,
startY = obj.y;
// 시작 하는 위치로 옮김
path.MoveTo(startX, startY);
// outer arc 에 대한 지점 설정
obj = math.rotate(startX, startY, math.radian(endAngle));
// 중심점 이동
g.translate(centerX, centerY);
// outer arc 그림
path.Arc(outerRadius, outerRadius, 0, (endAngle > 180) ? 1 : 0, 1, obj.x, obj.y);
// 마우스 이벤트 빈공간 제외
path.css({
"pointer-events": "stroke"
});
g.append(path);
g.order = 1;
return g;
}
this.drawUnit = function (index, data, g) {
this.drawShadowUnit(index, data, g);
var props = this.getProperty(index),
centerX = props.centerX,
centerY = props.centerY,
innerRadius = props.innerRadius,
outerRadius = props.outerRadius;
var target = this.brush.target,
active = this.brush.active,
all = 360,
startAngle = 0,
max = 0,
totalValue = 0;
for (var i = 0; i < target.length; i++) {
max += data[target[i]];
}
startAngle = 0;
for (var i = 0; i < target.length; i++) {
if(data[target[i]] == 0) continue;
var value = data[target[i]],
endAngle = all * (value / max),
centerAngle = startAngle + (endAngle / 2) - 90,
radius = (this.brush.showText == "inside") ? this.brush.size + innerRadius + outerRadius : outerRadius,
donut = this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle, endAngle, {
stroke : this.color(i),
fill : 'transparent'
}),
text = this.drawText(centerX, centerY, centerAngle, radius, this.getFormatText(target[i], value));
// 설정된 키 활성화
if (active == target[i] || _.inArray(target[i], active) != -1) {
if(this.brush.showText == "inside") {
this.setActiveTextEvent(text.get(0), centerX, centerY, centerAngle, radius, true);
}
this.setActiveEvent(donut, centerX, centerY, centerAngle);
cache_active[centerAngle] = true;
}
// 활성화 이벤트 설정
if (this.brush.activeEvent != null) {
(function (p, t, cx, cy, ca, r) {
p.on(self.brush.activeEvent, function (e) {
if (!cache_active[ca]) {
if(self.brush.showText == "inside") {
self.setActiveTextEvent(t, cx, cy, ca, r, true);
}
self.setActiveEvent(p, cx, cy, ca);
cache_active[ca] = true;
} else {
if(self.brush.showText == "inside") {
self.setActiveTextEvent(t, cx, cy, ca, r, false);
}
p.translate(cx, cy);
cache_active[ca] = false;
}
});
p.attr({ cursor: "pointer" });
})(donut, text.get(0), centerX, centerY, centerAngle, radius);
}
this.addEvent(donut, index, i);
g.append(donut);
g.append(text);
startAngle += endAngle;
totalValue += value;
}
// Show total value
if(this.brush.showValue) {
this.drawTotalValue(g, centerX, centerY, totalValue);
}
}
this.drawShadowUnit = function (index, data, g) {
var props = this.getProperty(index),
centerX = props.centerX,
centerY = props.centerY,
innerRadius = props.innerRadius - this.brush.size,
outerRadius = props.outerRadius - this.brush.size;
var target = this.brush.target,
active = this.brush.active,
all = 360,
startAngle = 0,
max = 0,
totalValue = 0;
for (var i = 0; i < target.length; i++) {
max += data[target[i]];
}
startAngle = 0;
for (var i = 0; i < target.length; i++) {
if(data[target[i]] == 0) continue;
var value = data[target[i]],
endAngle = all * (value / max),
donut = this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle, endAngle, {
stroke : ColorUtil.darken(this.color(i), 0.2),
fill : 'transparent'
});
g.append(donut);
startAngle += endAngle;
totalValue += value;
}
}
this.drawNoData = function(g) {
var props = this.getProperty(0);
g.append(this.drawDonut(props.centerX, props.centerY, props.innerRadius, props.outerRadius, 0, 360, {
stroke : this.chart.theme("pieNoDataBackgroundColor"),
fill : "transparent"
}));
// Show total value
if(this.brush.showValue) {
this.drawTotalValue(g, props.centerX, props.centerY, 0);
}
}
this.drawTotalValue = function(g, centerX, centerY, value) {
var size = this.chart.theme("pieTotalValueFontSize");
var text = this.chart.text({
"font-size": size,
"font-weight": this.chart.theme("pieTotalValueFontWeight"),
fill: this.chart.theme("pieTotalValueFontColor"),
"text-anchor": "middle",
dy: size / 3
}, this.format(value));
text.translate(centerX, centerY);
g.append(text)
}
this.getProperty = function(index) {
var obj = this.axis.c(index);
var width = obj.width,
height = obj.height,
x = obj.x,
y = obj.y,
min = width;
if (height < min) {
min = height;
}
if (this.brush.size >= min/2) {
this.brush.size = min/4;
}
var outerRadius = min / 2 - this.brush.size / 2;
return {
centerX : width / 2 + x,
centerY : height / 2 + y,
outerRadius : outerRadius,
innerRadius : outerRadius - this.brush.size
}
}
}
DoubleDonutBrush.setup = function() {
return {
/** @cfg {Number} [size=50] donut stroke width */
size: 50,
/** @cfg {Boolean} [showValue=false] donut stroke width */
showValue: false
};
}
return DoubleDonutBrush;
}, "chart.brush.pie");