#

API Docs for:
Show: Inherited Protected Private Deprecated

# File: input/charts/Axis.js

    /**
     * The Axis class. Generates axes for a chart.
     *
     * @module charts
     * @class Axis
     * @extends Widget
     * @uses Renderer
     * @constructor
     * @param {Object} config (optional) Configuration parameters for the Chart.
     */
    Y.Axis = Y.Base.create("axis", Y.Widget, [Y.Renderer], {
        /**
         * Storage for calculatedWidth value.
         *
         * @property _calculatedWidth
         * @type Number
         * @private
         */
        _calculatedWidth: 0,

        /**
         * Storage for calculatedHeight value.
         *
         * @property _calculatedHeight
         * @type Number
         * @private
         */
        _calculatedHeight: 0,

        /**
         * Handles change to the dataProvider
         *
         * @method _dataChangeHandler
         * @param {Object} e Event object
         * @private
         */
        _dataChangeHandler: function(e)
        {
            if(this.get("rendered"))
            {
                this._drawAxis();
            }
        },

        /**
         * Handles change to the position attribute
         *
         * @method _positionChangeHandler
         * @param {Object} e Event object
         * @private
         */
        _positionChangeHandler: function(e)
        {
            this._updateGraphic(e.newVal);
            this._updateHandler();
        },

        /**
         * Updates the the Graphic instance
         *
         * @method _updateGraphic
         * @param {String} position Position of axis
         * @private
         */
        _updateGraphic: function(position)
        {
            var graphic = this.get("graphic");
            if(position == "none")
            {
                if(graphic)
                {
                    graphic.destroy();
                }
            }
            else
            {
                if(!graphic)
                {
                    this._setCanvas();
                }
            }
        },

        /**
         * Handles changes to axis.
         *
         * @method _updateHandler
         * @param {Object} e Event object
         * @private
         */
        _updateHandler: function(e)
        {
            if(this.get("rendered"))
            {
                this._drawAxis();
            }
        },

        /**
         * @method renderUI
         * @private
         */
        renderUI: function()
        {
            this._updateGraphic(this.get("position"));
        },

        /**
         * @method syncUI
         * @private
         */
        syncUI: function()
        {
            var layout = this._layout,
                defaultMargins,
                styles,
                label,
                title,
                i;
            if(layout)
            {
                defaultMargins = layout._getDefaultMargins();
                styles = this.get("styles");
                label = styles.label.margin;
                title =styles.title.margin;
                //need to defaultMargins method to the layout classes.
                for(i in defaultMargins)
                {
                    if(defaultMargins.hasOwnProperty(i))
                    {
                        label[i] = label[i] === undefined ? defaultMargins[i] : label[i];
                        title[i] = title[i] === undefined ? defaultMargins[i] : title[i];
                    }
                }
            }
            this._drawAxis();
        },

        /**
         * Creates a graphic instance to be used for the axis line and ticks.
         *
         * @method _setCanvas
         * @private
         */
        _setCanvas: function()
        {
            var cb = this.get("contentBox"),
                bb = this.get("boundingBox"),
                p = this.get("position"),
                pn = this._parentNode,
                w = this.get("width"),
                h = this.get("height");
            bb.setStyle("position", "absolute");
            bb.setStyle("zIndex", 2);
            w = w ? w + "px" : pn.getStyle("width");
            h = h ? h + "px" : pn.getStyle("height");
            if(p === "top" || p === "bottom")
            {
                cb.setStyle("width", w);
            }
            else
            {
                cb.setStyle("height", h);
            }
            cb.setStyle("position", "relative");
            cb.setStyle("left", "0px");
            cb.setStyle("top", "0px");
            this.set("graphic", new Y.Graphic());
            this.get("graphic").render(cb);
        },

        /**
         * Gets the default value for the `styles` attribute. Overrides
         * base implementation.
         *
         * @method _getDefaultStyles
         * @return Object
         * @protected
         */
        _getDefaultStyles: function()
        {
            var axisstyles = {
                majorTicks: {
                    display:"inside",
                    length:4,
                    color:"#dad8c9",
                    weight:1,
                    alpha:1
                },
                minorTicks: {
                    display:"none",
                    length:2,
                    color:"#dad8c9",
                    weight:1
                },
                line: {
                    weight:1,
                    color:"#dad8c9",
                    alpha:1
                },
                majorUnit: {
                    determinant:"count",
                    count:11,
                    distance:75
                },
                top: "0px",
                left: "0px",
                width: "100px",
                height: "100px",
                label: {
                    color:"#808080",
                    alpha: 1,
                    fontSize:"85%",
                    rotation: 0,
                    margin: {
                        top: undefined,
                        right: undefined,
                        bottom: undefined,
                        left: undefined
                    }
                },
                title: {
                    color:"#808080",
                    alpha: 1,
                    fontSize:"85%",
                    rotation: undefined,
                    margin: {
                        top: undefined,
                        right: undefined,
                        bottom: undefined,
                        left: undefined
                    }
                },
                hideOverlappingLabelTicks: false
            };

            return Y.merge(Y.Renderer.prototype._getDefaultStyles(), axisstyles);
        },

        /**
         * Updates the axis when the size changes.
         *
         * @method _handleSizeChange
         * @param {Object} e Event object.
         * @private
         */
        _handleSizeChange: function(e)
        {
            var attrName = e.attrName,
                pos = this.get("position"),
                vert = pos == "left" || pos == "right",
                cb = this.get("contentBox"),
                hor = pos == "bottom" || pos == "top";
            cb.setStyle("width", this.get("width"));
            cb.setStyle("height", this.get("height"));
            if((hor && attrName == "width") || (vert && attrName == "height"))
            {
                this._drawAxis();
            }
        },

        /**
         * Maps key values to classes containing layout algorithms
         *
         * @property _layoutClasses
         * @type Object
         * @private
         */
        _layoutClasses:
        {
            top : TopAxisLayout,
            bottom: BottomAxisLayout,
            left: LeftAxisLayout,
            right : RightAxisLayout
        },

        /**
         * Draws a line segment between 2 points
         *
         * @method drawLine
         * @param {Object} startPoint x and y coordinates for the start point of the line segment
         * @param {Object} endPoint x and y coordinates for the for the end point of the line segment
         * @param {Object} line styles (weight, color and alpha to be applied to the line segment)
         * @private
         */
        drawLine: function(path, startPoint, endPoint)
        {
            path.moveTo(startPoint.x, startPoint.y);
            path.lineTo(endPoint.x, endPoint.y);
        },

        /**
         * Generates the properties necessary for rotating and positioning a text field.
         *
         * @method _getTextRotationProps
         * @param {Object} styles properties for the text field
         * @return Object
         * @private
         */
        _getTextRotationProps: function(styles)
        {
            if(styles.rotation === undefined)
            {
                switch(this.get("position"))
                {
                    case "left" :
                        styles.rotation = -90;
                    break;
                    case "right" :
                        styles.rotation = 90;
                    break;
                    default :
                        styles.rotation = 0;
                    break;
                }
            }
            var rot =  Math.min(90, Math.max(-90, styles.rotation)),
                absRot = Math.abs(rot),
                radCon = Math.PI/180,
                sinRadians = parseFloat(parseFloat(Math.sin(absRot * radCon)).toFixed(8)),
                cosRadians = parseFloat(parseFloat(Math.cos(absRot * radCon)).toFixed(8));
            return {
                rot: rot,
                absRot: absRot,
                radCon: radCon,
                sinRadians: sinRadians,
                cosRadians: cosRadians,
                textAlpha: styles.alpha
            };
        },

        /**
         * Draws an axis.
         *
         * @method _drawAxis
         * @private
         */
        _drawAxis: function ()
        {
            if(this._drawing)
            {
                this._callLater = true;
                return;
            }
            this._drawing = true;
            this._callLater = false;
            if(this._layout)
            {
                var styles = this.get("styles"),
                    line = styles.line,
                    labelStyles = styles.label,
                    majorTickStyles = styles.majorTicks,
                    drawTicks = majorTickStyles.display != "none",
                    tickPoint,
                    majorUnit = styles.majorUnit,
                    len,
                    majorUnitDistance,
                    i = 0,
                    layout = this._layout,
                    layoutLength,
                    position,
                    lineStart,
                    label,
                    labelWidth,
                    labelHeight,
                    labelFunction = this.get("labelFunction"),
                    labelFunctionScope = this.get("labelFunctionScope"),
                    labelFormat = this.get("labelFormat"),
                    graphic = this.get("graphic"),
                    path = this.get("path"),
                    tickPath,
                    explicitlySized;
                this._labelWidths = [];
                this._labelHeights = [];
                graphic.set("autoDraw", false);
                path.clear();
                path.set("stroke", {
                    weight: line.weight,
                    color: line.color,
                    opacity: line.alpha
                });
                this._labelRotationProps = this._getTextRotationProps(labelStyles);
                this._labelRotationProps.transformOrigin = layout._getTransformOrigin(this._labelRotationProps.rot);
                layout.setTickOffsets.apply(this);
                layoutLength = this.getLength();
                lineStart = layout.getLineStart.apply(this);
                len = this.getTotalMajorUnits(majorUnit);
                majorUnitDistance = this.getMajorUnitDistance(len, layoutLength, majorUnit);
                this.set("edgeOffset", this.getEdgeOffset(len, layoutLength) * 0.5);
                if(len < 1)
                {
                    this._clearLabelCache();
                }
                else
                {
                    tickPoint = this.getFirstPoint(lineStart);
                    this.drawLine(path, lineStart, this.getLineEnd(tickPoint));
                    if(drawTicks)
                    {
                        tickPath = this.get("tickPath");
                        tickPath.clear();
                        tickPath.set("stroke", {
                            weight: majorTickStyles.weight,
                            color: majorTickStyles.color,
                            opacity: majorTickStyles.alpha
                        });
                       layout.drawTick.apply(this, [tickPath, tickPoint, majorTickStyles]);
                    }
                    this._createLabelCache();
                    this._tickPoints = [];
                    this._maxLabelSize = 0;
                    this._totalTitleSize = 0;
                    this._titleSize = 0;
                    this._setTitle();
                    explicitlySized = layout.getExplicitlySized.apply(this, [styles]);
                    for(; i < len; ++i)
                    {
                        if(drawTicks)
                        {
                            layout.drawTick.apply(this, [tickPath, tickPoint, majorTickStyles]);
                        }
                        position = this.getPosition(tickPoint);
                        label = this.getLabel(tickPoint, labelStyles);
                        this._labels.push(label);
                        this._tickPoints.push({x:tickPoint.x, y:tickPoint.y});
                        this.get("appendLabelFunction")(label, labelFunction.apply(labelFunctionScope, [this.getLabelByIndex(i, len), labelFormat]));
                        labelWidth = Math.round(label.offsetWidth);
                        labelHeight = Math.round(label.offsetHeight);
                        if(!explicitlySized)
                        {
                            this._layout.updateMaxLabelSize.apply(this, [labelWidth, labelHeight]);
                        }
                        this._labelWidths.push(labelWidth);
                        this._labelHeights.push(labelHeight);
                        tickPoint = this.getNextPoint(tickPoint, majorUnitDistance);
                    }
                    this._clearLabelCache();
                    if(this.get("overlapGraph"))
                    {
                       layout.offsetNodeForTick.apply(this, [this.get("contentBox")]);
                    }
                    layout.setCalculatedSize.apply(this);
                    if(this._titleTextField)
                    {
                        this._layout.positionTitle.apply(this, [this._titleTextField]);
                    }
                    for(i = 0; i < len; ++i)
                    {
                        layout.positionLabel.apply(this, [this.get("labels")[i], this._tickPoints[i], styles, i]);
                    }
                }
            }
            this._drawing = false;
            if(this._callLater)
            {
                this._drawAxis();
            }
            else
            {
                this._updatePathElement();
                this.fire("axisRendered");
            }
        },

        /**
         * Calculates and sets the total size of a title.
         *
         * @method _setTotalTitleSize
         * @param {Object} styles Properties for the title field.
         * @private
         */
        _setTotalTitleSize: function(styles)
        {
            var title = this._titleTextField,
                w = title.offsetWidth,
                h = title.offsetHeight,
                rot = this._titleRotationProps.rot,
                bounds,
                size,
                margin = styles.margin,
                position = this.get("position"),
                matrix = new Y.Matrix();
            matrix.rotate(rot);
            bounds = matrix.getContentRect(w, h);
            if(position == "left" || position == "right")
            {
                size = bounds.right - bounds.left;
                if(margin)
                {
                    size += margin.left + margin.right;
                }
            }
            else
            {
                size = bounds.bottom - bounds.top;
                if(margin)
                {
                    size += margin.top + margin.bottom;
                }
            }
            this._titleBounds = bounds;
            this._totalTitleSize = size;
        },

        /**
         *  Updates path.
         *
         *  @method _updatePathElement
         *  @private
         */
        _updatePathElement: function()
        {
            var path = this._path,
                tickPath = this._tickPath,
                redrawGraphic = false,
                graphic = this.get("graphic");
            if(path)
            {
                redrawGraphic = true;
                path.end();
            }
            if(tickPath)
            {
                redrawGraphic = true;
                tickPath.end();
            }
            if(redrawGraphic)
            {
                graphic._redraw();
            }
        },

        /**
         * Updates the content and style properties for a title field.
         *
         * @method _updateTitle
         * @private
         */
        _setTitle: function()
        {
            var i,
                styles,
                customStyles,
                title = this.get("title"),
                titleTextField = this._titleTextField,
                parentNode;
            if(title !== null && title !== undefined)
            {
                customStyles = {
                        rotation: "rotation",
                        margin: "margin",
                        alpha: "alpha"
                };
                styles = this.get("styles").title;
                if(!titleTextField)
                {
                    titleTextField = DOCUMENT.createElement('span');
                    titleTextField.style.display = "block";
                    titleTextField.style.whiteSpace = "nowrap";
                    titleTextField.setAttribute("class", "axisTitle");
                    this.get("contentBox").append(titleTextField);
                }
                else if(!DOCUMENT.createElementNS)
                {
                    if(titleTextField.style.filter)
                    {
                        titleTextField.style.filter = null;
                    }
                }
                titleTextField.style.position = "absolute";
                for(i in styles)
                {
                    if(styles.hasOwnProperty(i) && !customStyles.hasOwnProperty(i))
                    {
                        titleTextField.style[i] = styles[i];
                    }
                }
                this.get("appendTitleFunction")(titleTextField, title);
                this._titleTextField = titleTextField;
                this._titleRotationProps = this._getTextRotationProps(styles);
                this._setTotalTitleSize(styles);
            }
            else if(titleTextField)
            {
                parentNode = titleTextField.parentNode;
                if(parentNode)
                {
                    parentNode.removeChild(titleTextField);
                }
                this._titleTextField = null;
                this._totalTitleSize = 0;
            }
        },

        /**
         * Creates or updates an axis label.
         *
         * @method getLabel
         * @param {Object} pt x and y coordinates for the label
         * @param {Object} styles styles applied to label
         * @return HTMLElement
         * @private
         */
        getLabel: function(pt, styles)
        {
            var i,
                label,
                labelCache = this._labelCache,
                customStyles = {
                    rotation: "rotation",
                    margin: "margin",
                    alpha: "alpha"
                };
            if(labelCache && labelCache.length > 0)
            {
                label = labelCache.shift();
            }
            else
            {
                label = DOCUMENT.createElement("span");
                label.className = Y.Lang.trim([label.className, "axisLabel"].join(' '));
                this.get("contentBox").append(label);
            }
            if(!DOCUMENT.createElementNS)
            {
                if(label.style.filter)
                {
                    label.style.filter = null;
                }
            }
            label.style.display = "block";
            label.style.whiteSpace = "nowrap";
            label.style.position = "absolute";
            for(i in styles)
            {
                if(styles.hasOwnProperty(i) && !customStyles.hasOwnProperty(i))
                {
                    label.style[i] = styles[i];
                }
            }
            return label;
        },

        /**
         * Creates a cache of labels that can be re-used when the axis redraws.
         *
         * @method _createLabelCache
         * @private
         */
        _createLabelCache: function()
        {
            if(this._labels)
            {
                while(this._labels.length > 0)
                {
                    this._labelCache.push(this._labels.shift());
                }
            }
            else
            {
                this._clearLabelCache();
            }
            this._labels = [];
        },

        /**
         * Removes axis labels from the dom and clears the label cache.
         *
         * @method _clearLabelCache
         * @private
         */
        _clearLabelCache: function()
        {
            if(this._labelCache)
            {
                var len = this._labelCache.length,
                    i = 0,
                    label;
                for(; i < len; ++i)
                {
                    label = this._labelCache[i];
                    this._removeChildren(label);
                    Y.Event.purgeElement(label, true);
                    label.parentNode.removeChild(label);
                }
            }
            this._labelCache = [];
        },

        /**
         * Gets the end point of an axis.
         *
         * @method getLineEnd
         * @return Object
         * @private
         */
        getLineEnd: function(pt)
        {
            var w = this.get("width"),
                h = this.get("height"),
                pos = this.get("position");
            if(pos === "top" || pos === "bottom")
            {
                return {x:w, y:pt.y};
            }
            else
            {
                return {x:pt.x, y:h};
            }
        },

        /**
         * Calcuates the width or height of an axis depending on its direction.
         *
         * @method getLength
         * @return Number
         * @private
         */
        getLength: function()
        {
            var l,
                style = this.get("styles"),
                padding = style.padding,
                w = this.get("width"),
                h = this.get("height"),
                pos = this.get("position");
            if(pos === "top" || pos === "bottom")
            {
                l = w - (padding.left + padding.right);
            }
            else
            {
                l = h - (padding.top + padding.bottom);
            }
            return l;
        },

        /**
         * Gets the position of the first point on an axis.
         *
         * @method getFirstPoint
         * @param {Object} pt Object containing x and y coordinates.
         * @return Object
         * @private
         */
        getFirstPoint:function(pt)
        {
            var style = this.get("styles"),
                pos = this.get("position"),
                padding = style.padding,
                np = {x:pt.x, y:pt.y};
            if(pos === "top" || pos === "bottom")
            {
                np.x += padding.left + this.get("edgeOffset");
            }
            else
            {
                np.y += this.get("height") - (padding.top + this.get("edgeOffset"));
            }
            return np;
        },

        /**
         * Gets the position of the next point on an axis.
         *
         * @method getNextPoint
         * @param {Object} point Object containing x and y coordinates.
         * @param {Number} majorUnitDistance Distance in pixels between ticks.
         * @return Object
         * @private
         */
        getNextPoint: function(point, majorUnitDistance)
        {
            var pos = this.get("position");
            if(pos === "top" || pos === "bottom")
            {
                point.x = point.x + majorUnitDistance;
            }
            else
            {
                point.y = point.y - majorUnitDistance;
            }
            return point;
        },

        /**
         * Calculates the placement of last tick on an axis.
         *
         * @method getLastPoint
         * @return Object
         * @private
         */
        getLastPoint: function()
        {
            var style = this.get("styles"),
                padding = style.padding,
                w = this.get("width"),
                pos = this.get("position");
            if(pos === "top" || pos === "bottom")
            {
                return {x:w - padding.right, y:padding.top};
            }
            else
            {
                return {x:padding.left, y:padding.top};
            }
        },

        /**
         * Calculates position on the axis.
         *
         * @method getPosition
         * @param {Object} point contains x and y values
         * @private
         */
        getPosition: function(point)
        {
            var p,
                h = this.get("height"),
                style = this.get("styles"),
                padding = style.padding,
                pos = this.get("position"),
                dataType = this.get("dataType");
            if(pos === "left" || pos === "right")
            {
                //Numeric data on a vertical axis is displayed from bottom to top.
                //Categorical and Timeline data is displayed from top to bottom.
                if(dataType === "numeric")
                {
                    p = (h - (padding.top + padding.bottom)) - (point.y - padding.top);
                }
                else
                {
                    p = point.y - padding.top;
                }
            }
            else
            {
                p = point.x - padding.left;
            }
            return p;
        },

        /**
         * Rotates and positions a text field.
         *
         * @method _rotate
         * @param {HTMLElement} label text field to rotate and position
         * @param {Object} props properties to be applied to the text field.
         * @private
         */
        _rotate: function(label, props)
        {
            var rot = props.rot,
                x = props.x,
                y = props.y,
                filterString,
                textAlpha,
                matrix = new Y.Matrix(),
                transformOrigin = props.transformOrigin || [0, 0],
                offsetRect;
            if(DOCUMENT.createElementNS)
            {
                matrix.translate(x, y);
                matrix.rotate(rot);
                label.style.MozTransformOrigin = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
                label.style.MozTransform = matrix.toCSSText();
                label.style.webkitTransformOrigin = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
                label.style.webkitTransform = matrix.toCSSText();
                label.style.msTransformOrigin = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
                label.style.msTransform = matrix.toCSSText();
                label.style.OTransformOrigin = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
                label.style.OTransform = matrix.toCSSText();
            }
            else
            {
                textAlpha = props.textAlpha;
                if(Y_Lang.isNumber(textAlpha) && textAlpha < 1 && textAlpha > -1 && !isNaN(textAlpha))
                {
                    filterString = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.round(textAlpha * 100) + ")";
                }
                if(rot !== 0)
                {
                    //ms filters kind of, sort of uses a transformOrigin of 0, 0.
                    //we'll translate the difference to create a true 0, 0 origin.
                    matrix.rotate(rot);
                    offsetRect = matrix.getContentRect(props.labelWidth, props.labelHeight);
                    matrix.init();
                    matrix.translate(offsetRect.left, offsetRect.top);
                    matrix.translate(x, y);
                    this._simulateRotateWithTransformOrigin(matrix, rot, transformOrigin, props.labelWidth, props.labelHeight);
                    if(filterString)
                    {
                        filterString += " ";
                    }
                    else
                    {
                        filterString = "";
                    }
                    filterString += matrix.toFilterText();
                    label.style.left = matrix.dx + "px";
                    label.style.top = matrix.dy + "px";
                }
                else
                {
                    label.style.left = x + "px";
                    label.style.top = y + "px";
                }
                if(filterString)
                {
                    label.style.filter = filterString;
                }
            }
        },

        /**
         * Simulates a rotation with a specified transformOrigin.
         *
         * @method _simulateTransformOrigin
         * @param {Matrix} matrix Reference to a `Matrix` instance.
         * @param {Number} rot The rotation (in degrees) that will be performed on a matrix.
         * @param {Array} transformOrigin An array represeniting the origin in which to perform the transform. The first
         * index represents the x origin and the second index represents the y origin.
         * @param {Number} w The width of the object that will be transformed.
         * @param {Number} h The height of the object that will be transformed.
         * @private
         */
        _simulateRotateWithTransformOrigin: function(matrix, rot, transformOrigin, w, h)
        {
            var transformX = transformOrigin[0] * w,
                transformY = transformOrigin[1] * h;
            transformX = !isNaN(transformX) ? transformX : 0;
            transformY = !isNaN(transformY) ? transformY : 0;
            matrix.translate(transformX, transformY);
            matrix.rotate(rot);
            matrix.translate(-transformX, -transformY);
        },

        /**
         * Returns the coordinates (top, right, bottom, left) for the bounding box of the last label.
         *
         * @method getMaxLabelBounds
         * @return Object
         */
        getMaxLabelBounds: function()
        {
            return this._getLabelBounds(this.getMaximumValue());
        },

        /**
         * Returns the coordinates (top, right, bottom, left) for the bounding box of the first label.
         *
         * @method getMinLabelBounds
         * @return Object
         */
        getMinLabelBounds: function()
        {
            return this._getLabelBounds(this.getMinimumValue());
        },

        /**
         * Returns the coordinates (top, right, bottom, left) for the bounding box of a label.
         *
         * @method _getLabelBounds
         * @param {String} Value of the label
         * @return Object
         * @private
         */
        _getLabelBounds: function(val)
        {
            var layout = this._layout,
                labelStyles = this.get("styles").label,
                matrix = new Y.Matrix(),
                label,
                props = this._getTextRotationProps(labelStyles);
                props.transformOrigin = layout._getTransformOrigin(props.rot);
            label = this.getLabel({x: 0, y: 0}, labelStyles);
            this.get("appendLabelFunction")(label, this.get("labelFunction").apply(this, [val, this.get("labelFormat")]));
            props.labelWidth = label.offsetWidth;
            props.labelHeight = label.offsetHeight;
            this._removeChildren(label);
            Y.Event.purgeElement(label, true);
            label.parentNode.removeChild(label);
            props.x = 0;
            props.y = 0;
            layout._setRotationCoords(props);
            matrix.translate(props.x, props.y);
            this._simulateRotateWithTransformOrigin(matrix, props.rot, props.transformOrigin, props.labelWidth, props.labelHeight);
            return matrix.getContentRect(props.labelWidth, props.labelHeight);
        },

        /**
         * Removes all DOM elements from an HTML element. Used to clear out labels during detruction
         * phase.
         *
         * @method _removeChildren
         * @private
         */
        _removeChildren: function(node)
        {
            if(node.hasChildNodes())
            {
                var child;
                while(node.firstChild)
                {
                    child = node.firstChild;
                    this._removeChildren(child);
                    node.removeChild(child);
                }
            }
        },

        /**
         * Destructor implementation Axis class. Removes all labels and the Graphic instance from the widget.
         *
         * @method destructor
         * @protected
         */
        destructor: function()
        {
            var cb = this.get("contentBox").getDOMNode(),
                labels = this.get("labels"),
                graphic = this.get("graphic"),
                label,
                len = labels ? labels.length : 0;
            if(len > 0)
            {
                while(labels.length > 0)
                {
                    label = labels.shift();
                    this._removeChildren(label);
                    cb.removeChild(label);
                    label = null;
                }
            }
            if(graphic)
            {
                graphic.destroy();
            }
        },

        /**
         * Length in pixels of largest text bounding box. Used to calculate the height of the axis.
         *
         * @property maxLabelSize
         * @type Number
         * @protected
         */
        _maxLabelSize: 0,

        /**
         * Updates the content of text field. This method writes a value into a text field using
         * `appendChild`. If the value is a `String`, it is converted to a `TextNode` first.
         *
         * @method _setText
         * @param label {HTMLElement} label to be updated
         * @param val {String} value with which to update the label
         * @private
         */
        _setText: function(textField, val)
        {
            textField.innerHTML = "";
            if(Y_Lang.isNumber(val))
            {
                val = val + "";
            }
            else if(!val)
            {
                val = "";
            }
            if(IS_STRING(val))
            {
                val = DOCUMENT.createTextNode(val);
            }
            textField.appendChild(val);
        }
    }, {
        ATTRS:
        {
            /**
             * When set, defines the width of a vertical axis instance. By default, vertical axes automatically size based on their contents. When the
             * width attribute is set, the axis will not calculate its width. When the width attribute is explicitly set, axis labels will postion themselves off of the
             * the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified width is less than the sum of
             * the axis' contents, excess content will overflow.
             *
             * @attribute width
             * @type Number
             */
            width: {
                lazyAdd: false,

                getter: function()
                {
                    if(this._explicitWidth)
                    {
                        return this._explicitWidth;
                    }
                    return this._calculatedWidth;
                },

                setter: function(val)
                {
                    this._explicitWidth = val;
                    return val;
                }
            },

            /**
             * When set, defines the height of a horizontal axis instance. By default, horizontal axes automatically size based on their contents. When the
             * height attribute is set, the axis will not calculate its height. When the height attribute is explicitly set, axis labels will postion themselves off of the
             * the inner edge of the axis and the title, if present, will position itself off of the outer edge. If a specified height is less than the sum of
             * the axis' contents, excess content will overflow.
             *
             * @attribute height
             * @type Number
             */
            height: {
                lazyAdd: false,

                getter: function()
                {
                    if(this._explicitHeight)
                    {
                        return this._explicitHeight;
                    }
                    return this._calculatedHeight;
                },

                setter: function(val)
                {
                    this._explicitHeight = val;
                    return val;
                }
            },

            /**
             * Calculated value of an axis' width. By default, the value is used internally for vertical axes. If the `width` attribute is explicitly set, this value will be ignored.
             *
             * @attribute calculatedWidth
             * @type Number
             * @private
             */
            calculatedWidth: {
                getter: function()
                {
                    return this._calculatedWidth;
                },

                setter: function(val)
                {
                    this._calculatedWidth = val;
                    return val;
                }
            },

            /**
             * Calculated value of an axis' height. By default, the value is used internally for horizontal axes. If the `height` attribute is explicitly set, this value will be ignored.
             *
             * @attribute calculatedHeight
             * @type Number
             * @private
             */
            calculatedHeight: {
                getter: function()
                {
                    return this._calculatedHeight;
                },

                setter: function(val)
                {
                    this._calculatedHeight = val;
                    return val;
                }
            },

            /**
             * Difference betweend the first/last tick and edge of axis.
             *
             * @attribute edgeOffset
             * @type Number
             * @protected
             */
            edgeOffset:
            {
                value: 0
            },

            /**
             * The graphic in which the axis line and ticks will be rendered.
             *
             * @attribute graphic
             * @type Graphic
             */
            graphic: {},

            /**
             *  @attribute path
             *  @type Shape
             *  @readOnly
             *  @private
             */
            path: {
                readOnly: true,

                getter: function()
                {
                    if(!this._path)
                    {
                        var graphic = this.get("graphic");
                        if(graphic)
                        {
                            this._path = graphic.addShape({type:"path"});
                        }
                    }
                    return this._path;
                }
            },

            /**
             *  @attribute tickPath
             *  @type Shape
             *  @readOnly
             *  @private
             */
            tickPath: {
                readOnly: true,

                getter: function()
                {
                    if(!this._tickPath)
                    {
                        var graphic = this.get("graphic");
                        if(graphic)
                        {
                            this._tickPath = graphic.addShape({type:"path"});
                        }
                    }
                    return this._tickPath;
                }
            },

            /**
             * Contains the contents of the axis.
             *
             * @attribute node
             * @type HTMLElement
             */
            node: {},

            /**
             * Direction of the axis.
             *
             * @attribute position
             * @type String
             */
            position: {
                setter: function(val)
                {
                    var layoutClass = this._layoutClasses[val];
                    if(val && val != "none")
                    {
                        this._layout = new layoutClass();
                    }
                    return val;
                }
            },

            /**
             * Distance determined by the tick styles used to calculate the distance between the axis
             * line in relation to the top of the axis.
             *
             * @attribute topTickOffset
             * @type Number
             */
            topTickOffset: {
                value: 0
            },

            /**
             * Distance determined by the tick styles used to calculate the distance between the axis
             * line in relation to the bottom of the axis.
             *
             * @attribute bottomTickOffset
             * @type Number
             */
            bottomTickOffset: {
                value: 0
            },

            /**
             * Distance determined by the tick styles used to calculate the distance between the axis
             * line in relation to the left of the axis.
             *
             * @attribute leftTickOffset
             * @type Number
             */
            leftTickOffset: {
                value: 0
            },

            /**
             * Distance determined by the tick styles used to calculate the distance between the axis
             * line in relation to the right side of the axis.
             *
             * @attribute rightTickOffset
             * @type Number
             */
            rightTickOffset: {
                value: 0
            },

            /**
             * Collection of labels used to render the axis.
             *
             * @attribute labels
             * @type Array
             */
            labels: {
                readOnly: true,
                getter: function()
                {
                    return this._labels;
                }
            },

            /**
             * Collection of points used for placement of labels and ticks along the axis.
             *
             * @attribute tickPoints
             * @type Array
             */
            tickPoints: {
                readOnly: true,

                getter: function()
                {
                    if(this.get("position") == "none")
                    {
                        return this.get("styles").majorUnit.count;
                    }
                    return this._tickPoints;
                }
            },

            /**
             * Indicates whether the axis overlaps the graph. If an axis is the inner most axis on a given
             * position and the tick position is inside or cross, the axis will need to overlap the graph.
             *
             * @attribute overlapGraph
             * @type Boolean
             */
            overlapGraph: {
                value:true,

                validator: function(val)
                {
                    return Y_Lang.isBoolean(val);
                }
            },

            /**
             * Object which should have by the labelFunction
             *
             * @attribute labelFunctionScope
             * @type Object
             */
            labelFunctionScope: {},

            /**
             * Length in pixels of largest text bounding box. Used to calculate the height of the axis.
             *
             * @attribute maxLabelSize
             * @type Number
             * @protected
             */
            maxLabelSize: {
                getter: function()
                {
                    return this._maxLabelSize;
                },

                setter: function(val)
                {
                    this._maxLabelSize = val;
                    return val;
                }
            },

            /**
             *  Title for the axis. When specified, the title will display. The position of the title is determined by the axis position.
             *  <dl>
             *      <dt>top</dt><dd>Appears above the axis and it labels. The default rotation is 0.</dd>
             *      <dt>right</dt><dd>Appears to the right of the axis and its labels. The default rotation is 90.</dd>
             *      <dt>bottom</dt><dd>Appears below the axis and its labels. The default rotation is 0.</dd>
             *      <dt>left</dt><dd>Appears to the left of the axis and its labels. The default rotation is -90.</dd>
             *  </dl>
             *
             *  @attribute title
             *  @type String
             */
            title: {
                value: null
            },

            /**
             * Method used for formatting a label. This attribute allows for the default label formatting method to overridden. The method use would need
             * to implement the arguments below and return a `String` or `HTMLElement`.
             * <dl>
             *      <dt>val</dt><dd>Label to be formatted. (`String`)</dd>
             *      <dt>format</dt><dd>Template for formatting label. (optional)</dd>
             * </dl>
             *
             * @attribute labelFunction
             * @type Function
             */
            labelFunction: {
                value: function(val, format)
                {
                    return val;
                }
            },

            /**
             * Function used to append an axis value to an axis label. This function has the following signature:
             *  <dl>
             *      <dt>textField</dt><dd>The axis label to be appended. (`HTMLElement`)</dd>
             *      <dt>val</dt><dd>The value to attach to the text field. This method will accept an `HTMLELement`
             *      or a `String`. This method does not use (`HTMLElement` | `String`)</dd>
             *  </dl>
             * The default method appends a value to the `HTMLElement` using the `appendChild` method. If the given
             * value is a `String`, the method will convert the the value to a `textNode` before appending to the
             * `HTMLElement`. This method will not convert an `HTMLString` to an `HTMLElement`.
             *
             * @attribute appendLabelFunction
             * @type Function
             */
            appendLabelFunction: {
                getter: function()
                {
                    return this._setText;
                }
            },

            /**
             * Function used to append a title value to the title object. This function has the following signature:
             *  <dl>
             *      <dt>textField</dt><dd>The title text field to be appended. (`HTMLElement`)</dd>
             *      <dt>val</dt><dd>The value to attach to the text field. This method will accept an `HTMLELement`
             *      or a `String`. This method does not use (`HTMLElement` | `String`)</dd>
             *  </dl>
             * The default method appends a value to the `HTMLElement` using the `appendChild` method. If the given
             * value is a `String`, the method will convert the the value to a `textNode` before appending to the
             * `HTMLElement` element. This method will not convert an `HTMLString` to an `HTMLElement`.
             *
             * @attribute appendTitleFunction
             * @type Function
             */
            appendTitleFunction: {
                getter: function()
                {
                    return this._setText;
                }
            }

            /**
             * Style properties used for drawing an axis. This attribute is inherited from `Renderer`. Below are the default values:
             *  <dl>
             *      <dt>majorTicks</dt><dd>Properties used for drawing ticks.
             *          <dl>
             *              <dt>display</dt><dd>Position of the tick. Possible values are `inside`, `outside`, `cross` and `none`. The
             *              default value is `inside`.</dd>
             *              <dt>length</dt><dd>The length (in pixels) of the tick. The default value is 4.</dd>
             *              <dt>color</dt><dd>The color of the tick. The default value is `#dad8c9`</dd>
             *              <dt>weight</dt><dd>Number indicating the width of the tick. The default value is 1.</dd>
             *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the tick. The default value is 1.</dd>
             *          </dl>
             *      </dd>
             *      <dt>line</dt><dd>Properties used for drawing the axis line.
             *          <dl>
             *              <dt>weight</dt><dd>Number indicating the width of the axis line. The default value is 1.</dd>
             *              <dt>color</dt><dd>The color of the axis line. The default value is `#dad8c9`.</dd>
             *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the tick. The default value is 1.</dd>
             *          </dl>
             *      </dd>
             *      <dt>majorUnit</dt><dd>Properties used to calculate the `majorUnit` for the axis.
             *          <dl>
             *              <dt>determinant</dt><dd>The algorithm used for calculating distance between ticks. The possible options are `count` and `distance`. If
             *              the `determinant` is `count`, the axis ticks will spaced so that a specified number of ticks appear on the axis. If the `determinant`
             *              is `distance`, the axis ticks will spaced out according to the specified distance. The default value is `count`.</dd>
             *              <dt>count</dt><dd>Number of ticks to appear on the axis when the `determinant` is `count`. The default value is 11.</dd>
             *              <dt>distance</dt><dd>The distance (in pixels) between ticks when the `determinant` is `distance`. The default value is 75.</dd>
             *          </dl>
             *      </dd>
             *      <dt>label</dt><dd>Properties and styles applied to the axis labels.
             *          <dl>
             *              <dt>color</dt><dd>The color of the labels. The default value is `#808080`.</dd>
             *              <dt>alpha</dt><dd>Number between 0 and 1 indicating the opacity of the labels. The default value is 1.</dd>
             *              <dt>fontSize</dt><dd>The font-size of the labels. The default value is 85%</dd>
             *              <dt>rotation</dt><dd>The rotation, in degrees (between -90 and 90) of the labels. The default value is 0.</dd>
             *              <dt>margin</dt><dd>The distance between the label and the axis/tick. Depending on the position of the `Axis`, only one of the properties used.
             *                  <dl>
             *                      <dt>top</dt><dd>Pixel value used for an axis with a `position` of `bottom`. The default value is 4.</dd>
             *                      <dt>right</dt><dd>Pixel value used for an axis with a `position` of `left`. The default value is 4.</dd>
             *                      <dt>bottom</dt><dd>Pixel value used for an axis with a `position` of `top`. The default value is 4.</dd>
             *                      <dt>left</dt><dd>Pixel value used for an axis with a `position` of `right`. The default value is 4.</dd>
             *                  </dl>
             *              </dd>
             *          </dl>
             *      </dd>
             *  </dl>
             *
             * @attribute styles
             * @type Object
             */
        }
    });