File: charts/js/Gridlines.js
/**
* Provides functionality for creating charts.
*
* @module charts
* @submodule charts-base
*/
var CONFIG = Y.config,
WINDOW = CONFIG.win,
DOCUMENT = CONFIG.doc,
Y_Lang = Y.Lang,
IS_STRING = Y_Lang.isString,
_getClassName = Y.ClassNameManager.getClassName,
SERIES_MARKER = _getClassName("seriesmarker");
/**
* Gridlines draws gridlines on a Graph.
*
* @class Gridlines
* @constructor
* @extends Base
* @uses Renderer
* @param {Object} config (optional) Configuration parameters.
* @submodule charts-base
*/
Y.Gridlines = Y.Base.create("gridlines", Y.Base, [Y.Renderer], {
/**
* Reference to the `Path` element used for drawing Gridlines.
*
* @property _path
* @type Path
* @private
*/
_path: null,
/**
* Removes the Gridlines.
*
* @method remove
* @private
*/
remove: function()
{
var path = this._path;
if(path)
{
path.destroy();
}
},
/**
* Draws the gridlines
*
* @method draw
* @protected
*/
draw: function()
{
if(this.get("axis") && this.get("graph"))
{
this._drawGridlines();
}
},
/**
* Algorithm for drawing gridlines
*
* @method _drawGridlines
* @private
*/
_drawGridlines: function()
{
var path,
axis = this.get("axis"),
axisPosition = axis.get("position"),
points,
i = 0,
l,
direction = this.get("direction"),
graph = this.get("graph"),
w = graph.get("width"),
h = graph.get("height"),
line = this.get("styles").line,
color = line.color,
weight = line.weight,
alpha = line.alpha,
count = this.get("count"),
length,
lineFunction;
if(isFinite(w) && isFinite(h) && w > 0 && h > 0)
{
if(count && Y.Lang.isNumber(count))
{
points = this._getPoints(count, w, h);
}
else if(axisPosition !== "none" && axis && axis.get("tickPoints"))
{
points = axis.get("tickPoints");
}
else
{
points = this._getPoints(axis.get("styles").majorUnit.count, w, h);
}
l = points.length;
path = graph.get("gridlines");
path.set("width", w);
path.set("height", h);
path.set("stroke", {
weight: weight,
color: color,
opacity: alpha
});
if(direction === "vertical")
{
lineFunction = this._verticalLine;
length = h;
}
else
{
lineFunction = this._horizontalLine;
length = w;
}
for(i = 0; i < l; i = i + 1)
{
lineFunction(path, points[i], length);
}
path.end();
}
},
/**
* Calculates the coordinates for the gridlines based on a count.
*
* @method _getPoints
* @param {Number} count Number of gridlines
* @return Array
* @private
*/
_getPoints: function(count, w, h)
{
var i,
points = [],
multiplier,
divisor = count - 1;
for(i = 0; i < count; i = i + 1)
{
multiplier = i/divisor;
points[i] = {
x: w * multiplier,
y: h * multiplier
};
}
return points;
},
/**
* Algorithm for horizontal lines.
*
* @method _horizontalLine
* @param {Path} path Reference to path element
* @param {Object} pt Coordinates corresponding to a major unit of an axis.
* @param {Number} w Width of the Graph
* @private
*/
_horizontalLine: function(path, pt, w)
{
path.moveTo(0, pt.y);
path.lineTo(w, pt.y);
},
/**
* Algorithm for vertical lines.
*
* @method _verticalLine
* @param {Path} path Reference to path element
* @param {Object} pt Coordinates corresponding to a major unit of an axis.
* @param {Number} h Height of the Graph
* @private
*/
_verticalLine: function(path, pt, h)
{
path.moveTo(pt.x, 0);
path.lineTo(pt.x, h);
},
/**
* Gets the default value for the `styles` attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
* @protected
*/
_getDefaultStyles: function()
{
var defs = {
line: {
color:"#f0efe9",
weight: 1,
alpha: 1
}
};
return defs;
}
},
{
ATTRS: {
/**
* Indicates the direction of the gridline.
*
* @attribute direction
* @type String
*/
direction: {},
/**
* Indicate the `Axis` in which to bind
* the gridlines.
*
* @attribute axis
* @type Axis
*/
axis: {},
/**
* Indicates the `Graph` in which the gridlines
* are drawn.
*
* @attribute graph
* @type Graph
*/
graph: {},
/**
* Indicates the number of gridlines to display. If no value is set, gridlines will equal the number of ticks in
* the corresponding axis.
*
* @attribute count
* @type Number
*/
count: {}
}
});