# Yahoo! UI Library

### charts 3.3.0

Yahoo! UI Library > charts > Fills.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    /**
     * Utility class used for drawing area fills.
     *
     * @class Fills
     * @constructor
     */
    function Fills(cfg)
    {
        var attrs = {
            area: {
                getter: function()
                {
                    return this._defaults || this._getAreaDefaults();
                },

                setter: function(val)
                {
                    var defaults = this._defaults || this._getAreaDefaults();
                    this._defaults = Y.merge(defaults, val);
                }
            }
        };
        this.addAttrs(attrs, cfg);
        this.get("styles");
    }

    Fills.prototype = {
        /**
         * Draws fill
         *
         * @method drawFill
         * @protected
         */
        drawFill: function(xcoords, ycoords)
        {
            if(xcoords.length < 1)
            {
                return;
            }
            var len = xcoords.length,
                firstX = xcoords[0],
                firstY = ycoords[0],
                lastValidX = firstX,
                lastValidY = firstY,
                nextX,
                nextY,
                i = 1,
                styles = this.get("styles").area,
                graphic = this.get("graphic"),
                color = styles.color || this._getDefaultColor(this.get("graphOrder"), "slice");
            graphic.clear();
            graphic.beginFill(color, styles.alpha);
            graphic.moveTo(firstX, firstY);
            for(; i < len; i = ++i)
            {
                nextX = xcoords[i];
                nextY = ycoords[i];
                if(isNaN(nextY))
                {
                    lastValidX = nextX;
                    lastValidY = nextY;
                    continue;
                }
                graphic.lineTo(nextX, nextY);
                lastValidX = nextX;
                lastValidY = nextY;
            }
            graphic.end();
        },

        /**
         * Draws a fill for a spline
         *
         * @method drawAreaSpline
         * @protected
         */
        drawAreaSpline: function()
        {
            if(this.get("xcoords").length < 1)
            {
                return;
            }
            var xcoords = this.get("xcoords"),
                ycoords = this.get("ycoords"),
                curvecoords = this.getCurveControlPoints(xcoords, ycoords),
                len = curvecoords.length,
                cx1,
                cx2,
                cy1,
                cy2,
                x,
                y,
                i = 0,
                firstX = xcoords[0],
                firstY = ycoords[0],
                styles = this.get("styles").area,
                graphic = this.get("graphic"),
                color = styles.color || this._getDefaultColor(this.get("graphOrder"), "slice");
            graphic.beginFill(color, styles.alpha);
            graphic.moveTo(firstX, firstY);
            for(; i < len; i = ++i)
            {
                x = curvecoords[i].endx;
                y = curvecoords[i].endy;
                cx1 = curvecoords[i].ctrlx1;
                cx2 = curvecoords[i].ctrlx2;
                cy1 = curvecoords[i].ctrly1;
                cy2 = curvecoords[i].ctrly2;
                graphic.curveTo(cx1, cy1, cx2, cy2, x, y);
            }
            if(this.get("direction") === "vertical")
            {
                graphic.lineTo(this._leftOrigin, y);
                graphic.lineTo(this._leftOrigin, firstY);
            }
            else
            {
                graphic.lineTo(x, this._bottomOrigin);
                graphic.lineTo(firstX, this._bottomOrigin);
            }
            graphic.lineTo(firstX, firstY);
            graphic.end();
        },

        /**
         * Draws a a stacked area spline
         *
         * @method drawStackedAreaSpline
         * @protected
         */
        drawStackedAreaSpline: function()
        {
            if(this.get("xcoords").length < 1)
            {
                return;
            }
            var xcoords = this.get("xcoords"),
                ycoords = this.get("ycoords"),
                curvecoords,
                order = this.get("order"),
                type = this.get("type"),
                graph = this.get("graph"),
                seriesCollection = graph.seriesTypes[type],
                prevXCoords,
                prevYCoords,
                len,
                cx1,
                cx2,
                cy1,
                cy2,
                x,
                y,
                i = 0,
                firstX,
                firstY,
                styles = this.get("styles").area,
                graphic = this.get("graphic"),
                color = styles.color || this._getDefaultColor(this.get("graphOrder"), "slice");
            firstX = xcoords[0];
            firstY = ycoords[0];
            curvecoords = this.getCurveControlPoints(xcoords, ycoords);
            len = curvecoords.length;
            graphic.beginFill(color, styles.alpha);
            graphic.moveTo(firstX, firstY);
            for(; i < len; i = ++i)
            {
                x = curvecoords[i].endx;
                y = curvecoords[i].endy;
                cx1 = curvecoords[i].ctrlx1;
                cx2 = curvecoords[i].ctrlx2;
                cy1 = curvecoords[i].ctrly1;
                cy2 = curvecoords[i].ctrly2;
                graphic.curveTo(cx1, cy1, cx2, cy2, x, y);
            }
            if(order > 0)
            {
                prevXCoords = seriesCollection[order - 1].get("xcoords").concat().reverse();
                prevYCoords = seriesCollection[order - 1].get("ycoords").concat().reverse();
                curvecoords = this.getCurveControlPoints(prevXCoords, prevYCoords);
                i = 0;
                len = curvecoords.length;
                graphic.lineTo(prevXCoords[0], prevYCoords[0]);
                for(; i < len; i = ++i)
                {
                    x = curvecoords[i].endx;
                    y = curvecoords[i].endy;
                    cx1 = curvecoords[i].ctrlx1;
                    cx2 = curvecoords[i].ctrlx2;
                    cy1 = curvecoords[i].ctrly1;
                    cy2 = curvecoords[i].ctrly2;
                    graphic.curveTo(cx1, cy1, cx2, cy2, x, y);
                }
            }
            else
            {
                if(this.get("direction") === "vertical")
                {
                    graphic.lineTo(this._leftOrigin, ycoords[ycoords.length-1]);
                    graphic.lineTo(this._leftOrigin, firstY);
                }
                else
                {
                    graphic.lineTo(xcoords[xcoords.length-1], this._bottomOrigin);
                    graphic.lineTo(firstX, this._bottomOrigin);
                }

            }
            graphic.lineTo(firstX, firstY);
            graphic.end();
        },

        /**
         * @private
         */
        _defaults: null,

        /**
         * Concatanates coordinate array with correct coordinates for closing an area fill.
         *
         * @method _getClosingPoints
         * @return Array
         * @protected
         */
        _getClosingPoints: function()
        {
            var xcoords = this.get("xcoords").concat(),
                ycoords = this.get("ycoords").concat();
            if(this.get("direction") === "vertical")
            {
                xcoords.push(this._leftOrigin);
                xcoords.push(this._leftOrigin);
                ycoords.push(ycoords[ycoords.length - 1]);
                ycoords.push(ycoords[0]);
            }
            else
            {
                xcoords.push(xcoords[xcoords.length - 1]);
                xcoords.push(xcoords[0]);
                ycoords.push(this._bottomOrigin);
                ycoords.push(this._bottomOrigin);
            }
            xcoords.push(xcoords[0]);
            ycoords.push(ycoords[0]);
            return [xcoords, ycoords];
        },

        /**
         * Concatenates coordinate array with the correct coordinates for closing an area stack.
         *
         * @method _getStackedClosingPoints
         * @return Array
         * @protected
         */
        _getStackedClosingPoints: function()
        {
            var order = this.get("order"),
                type = this.get("type"),
                graph = this.get("graph"),
                direction = this.get("direction"),
                seriesCollection = graph.seriesTypes[type],
                prevXCoords,
                prevYCoords,
                allXCoords = this.get("xcoords").concat(),
                allYCoords = this.get("ycoords").concat(),
                firstX = allXCoords[0],
                firstY = allYCoords[0];

            if(order > 0)
            {
                prevXCoords = seriesCollection[order - 1].get("xcoords").concat();
                prevYCoords = seriesCollection[order - 1].get("ycoords").concat();
                allXCoords = allXCoords.concat(prevXCoords.concat().reverse());
                allYCoords = allYCoords.concat(prevYCoords.concat().reverse());
                allXCoords.push(allXCoords[0]);
                allYCoords.push(allYCoords[0]);
            }
            else
            {
                if(direction === "vertical")
                {
                    allXCoords.push(this._leftOrigin);
                    allXCoords.push(this._leftOrigin);
                    allYCoords.push(allYCoords[allYCoords.length-1]);
                    allYCoords.push(firstY);
                }
                else
                {
                    allXCoords.push(allXCoords[allXCoords.length-1]);
                    allXCoords.push(firstX);
                    allYCoords.push(this._bottomOrigin);
                    allYCoords.push(this._bottomOrigin);
                }
            }
            return [allXCoords, allYCoords];
        },

        /**
         * @private
         */
        _getAreaDefaults: function()
        {
            return {
            };
        }
    };
    Y.augment(Fills, Y.Attribute);
    Y.Fills = Fills;

Copyright © 2011 Yahoo! Inc. All rights reserved.