jui.define("chart.widget.title", [], function() {
var TOP_PADDING = 25, PADDING = 20;
/**
* @class chart.widget.title
* @extends chart.widget.core
* @alias TitleWidget
*
*/
var TitleWidget = function(chart, axis, widget) {
var x = 0, y = 0, anchor = "middle";
this.drawBefore = function() {
var axis = chart.axis(widget.axis);
if(axis) {
if (widget.orient == "bottom") {
y = axis.area("y2") + axis.padding("bottom") - PADDING;
} else if (widget.orient == "top") {
y = axis.area("y") - axis.padding("top") + TOP_PADDING;
} else {
y = axis.area("y") + axis.area("height") / 2;
}
if (widget.align == "middle") {
x = axis.area("x") + axis.area("width") / 2;
anchor = "middle";
} else if (widget.align == "start") {
x = axis.area("x") - axis.padding("left") + PADDING;
anchor = "start";
} else {
x = axis.area("x2") + axis.padding("right") - PADDING;
anchor = "end";
}
x += chart.area("x");
y += chart.area("y");
} else {
// @Deprecated 나중에 제거하기 (모든 샘플 axis 기반으로 변경할 것)
if (widget.orient == "bottom") {
y = chart.area("y2") + chart.padding("bottom") - PADDING;
} else if (widget.orient == "top") {
y = PADDING;
} else {
y = chart.area("y") + chart.area("height") / 2
}
if (widget.align == "middle") {
x = chart.area("x") + chart.area("width") / 2;
anchor = "middle";
} else if (widget.align == "start") {
x = chart.area("x");
anchor = "start";
} else {
x = chart.area("x2");
anchor = "end";
}
}
}
this.draw = function() {
var obj = chart.svg.getTextSize(widget.text);
var half_text_width = obj.width / 2,
half_text_height = obj.height / 2;
var text = chart.text({
x : x + widget.dx,
y : y + widget.dy,
"text-anchor" : anchor,
"fill" : widget.color || chart.theme("titleFontColor"),
"font-size" : widget.size || chart.theme("titleFontSize"),
"font-weight" : chart.theme("titleFontWeight")
}, widget.text);
if (widget.orient == "center") {
if (widget.align == "start") {
text.rotate(-90, x + widget.dx + half_text_width, y + widget.dy + half_text_height)
} else if (widget.align == "end") {
text.rotate(90, x + widget.dx - half_text_width, y + widget.dy + half_text_height)
}
}
return text;
}
}
TitleWidget.setup = function() {
return {
axis: null,
/** @cfg {"top"/"center"/"bottom" } [orient="top"] Determines the side on which the tool tip is displayed (top, center, bottom). */
orient: "top", // or bottom
/** @cfg {"start"/"middle"/"end" } [align="center"] Aligns the title message (start, middle, end).*/
align: "middle",
/** @cfg {String} [text=""] Sets the title message. */
text: "",
/** @cfg {Number} [dx=0] Moves the x coordinate by a set value from the location where the chart is drawn. */
dx: 0,
/** @cfg {Number} [dy=0] Moves the y coordinate by a set value from the location where the chart is drawn. */
dy: 0,
/** @cfg {Number} [size=null] Sets the title message size. */
size: null,
/** @cfg {String} [string=null] Sets the title message color. */
color: null
}
}
return TitleWidget;
}, "chart.widget.core");