ail-framework/var/www/static/js/FlexGauge.js

/**
 *  FlexGauge
 *  Version: 1.0
 *  Author: Jeff Millies
 *  Author URI:
 */
(function ($) {
    var FlexGauge = function (o) {
        if (typeof o === 'object') {
            this._extendOptions(o, false);
            this._build();
        }
    };
    FlexGauge.prototype = {
        /**
         *  {String} Element that you would like to append to. ie '#idname', '.classname', 'div#idname', etc..
         */
        appendTo: 'body',
        /**
         *  {String} Id of Canvas already created or Id of canvas that will be created automatically
         */
        elementId: 'canvas',
        /**
         *  {String} Class of canvas created
         */
        elementClass: 'canvas',
        /**
         *  {Int} Canvas Width & Height
         */
        elementWidth: 200,
        elementHeight: 200,
        /**
         *  {Boolean|String} Generate Dial Value for the Gauge, true will use arcFillPercent or arcFillInt
         *  depending on provided values and specified dialUnits, string will use specified value
         */
        dialValue: false,
        /**
         *  {String} Class applied to div when dial is generated.
         */
        dialClass: 'fg-dial',
        /**
         *  {string: %|$| } Type of unit to use for the dial
         */
        dialUnit: '%',
        /**
         *  {string: before|after} Where the dial unit will be displayed
         */
        dialUnitPosition: 'after',
        /**
         *  {Boolean|String} Generate Label for the Gauge, true will use default "FlexGauge", string will use specified
         */
        dialLabel: false,
        /**
         *  {String} Class applied to div when label is generated.
         */
        dialLabelClass: 'fg-dial-label',
        /**
         *  {Int} Radius of the arc
         */
        inc: 0.0,
        incTot: 1.0,
        /**
         *  {Doule} Increment value
         */
        arcSize: 85,
        /**
         *  {double} Starting and Ending location of the arc, End always needs to be larger
         *  arc(x, y, radius, startAngle, endAngle, anticlockwise)
         */
        arcAngleStart: 0.85,
        arcAngleEnd: 2.15,
        /**
         *  {double} Percentage the arc fills
         */
        arcFillPercent: .5,
        /**
         *  {Int} Starting and Ending values that are used to
         *  find a difference for amount of units
         *  ie: 60 (arcFillEnd) - 10 (arcFillStart) = 50
         */
        arcFillStart: null,
        arcFillEnd: null,
        /**
         *  {Int} Data used to find out what percentage of the
         *  arc to fill. arcFillInt can be populated by
         *  the difference of arcFillStart and arcFillEnd
         */
        arcFillInt: null,
        arcFillTotal: null,
        /**
         *  {Int} Color lightness: 0 - 255, 0 having no white added, 255 having all white and no color
         */
        arcBgColorLight: 80,
        /**
         *  {Int} Color saturation: 0 - 100, 0 having no color, 100 is full color
         */
        arcBgColorSat: 60,
        /**
         *  {Int} Size of the line marking the percentage
         */
        arcStrokeFg: 30,
        /**
         *  {Int} Size of the container holding the line
         */
        arcStrokeBg: 30,

        /**
         *  {string: hex} Color of the line marking the percentage
         */
        colorArcFg: '#5bc0de',
        /**
         *  {string: hex} Color of the container holding the line, default is using the Fg color and lightening it
         */
        colorArcBg: null,

        /**
         *  {String} Instead of providing a color or hex for the color, you can provide a class from the style
         *  sheet and specify what you would like to grab for the color in styleSrc
         */
        styleArcFg: null,
        styleArcBg: null,
        styleSrc: 'color',

        /**
         *  {Boolean} If set to false, then the graph will not be animated
         */
        animateEasing: true,
        /**
         *  {Int} Speed for the animation, 1 is fastest, higher the number, slower the animation
         */
        animateSpeed: 5,
        /**
         *  {Int} Math used in animation speed
         */
        animateNumerator: 12,
        animateDivisor: 15,

        /**
         *  {double} Placeholder for current percentage while animating
         */
        _animatePerc: 0.00,

        /**
         *  {Object} Placeholder for setInterval
         */
        _animateLoop: null,

        /**
         *  {Object} Placeholder for canvas
         */
        _canvas: null,

        /**
         *  {Object} Placeholder for canvas context
         */
        _ctx: null,

        update: function (o) {
            if (typeof o === 'object') {
                var difference;

                // if using int, convert to percent to check difference
                if (typeof o.arcFillInt !== 'undefined' && o.arcFillInt == this.arcFillInt &&
                    typeof o.arcFillTotal !== 'undefined' && o.arcFillTotal == this.arcFillTotal) {
                    o.arcFillPercent = this.arcFillPercent;
                } else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal !== 'undefined' &&
                    (o.arcFillInt != this.arcFillInt || o.arcFillTotal == this.arcFillTotal)) {
                    o.arcFillPercent = (o.arcFillInt / o.arcFillTotal);
                } else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal === 'undefined' &&
                    (o.arcFillInt != this.arcFillInt)) {
                    o.arcFillPercent = (o.arcFillInt / this.arcFillTotal);
                }

                if (typeof o.arcFillPercent !== 'undefined') {
                    difference = Math.abs((this.arcFillPercent - o.arcFillPercent));
                } else {
                    difference = this.arcFillPercent;
                }

                this._extendOptions(o, true);

                clearInterval(this._animateLoop);

                if (difference > 0) {
                    var that = this;
                    this._animateLoop = setInterval(function () {
                        return that._animate();
                    }, (this.animateSpeed * this.animateNumerator) / (difference * this.animateDivisor));
                }
            }
        },

        _extendOptions: function (o, update) {
            var color = false;
            if (update)
                color = this.colorArcFg;

            $.extend(this, o, true);

            if (typeof o.arcFillStart !== 'undefined' && typeof o.arcFillEnd !== 'undefined' && typeof o.arcFillTotal !== 'undefined') {
                this.arcFillInt = (o.arcFillEnd - o.arcFillStart);
            }

            if (typeof o.arcFillPercent === 'undefined' && this.arcFillInt !== null && this.arcFillInt >= 0 && this.arcFillTotal !== null && this.arcFillTotal > 0) {
                this.arcFillPercent = this.arcFillInt / this.arcFillTotal;
            }

            if (typeof o.elementId === 'undefined') {
                this.elementId = 'fg-' + this.appendTo + '-canvas';
            }
            // supporting color if pass, changing to hex
            if (typeof o.colorArcFg !== 'undefined') {
                this.colorArcFg = colorToHex(o.colorArcFg);
            }

            if (typeof o.colorArcBg !== 'undefined') {
                this.colorArcBg = colorToHex(o.colorArcBg);
            }

            // only use the styleArcFg if colorArcFg wasn't specified in the options
            if (typeof o.styleArcFg !== 'undefined' && typeof o.colorArcFg === 'undefined') {
                this.colorArcFg = getStyleRuleValue(this.styleSrc, this.styleArcFg);
            }

            if (typeof o.colorArcBg === 'undefined' && this.colorArcBg === null && this.colorArcFg !== null) {
                this.colorArcBg = this.colorArcFg;
            }

            if (typeof this.colorArcBg !== null && (!update || colorToHex(this.colorArcFg) != colorToHex(color))) {
                if (colorToHex(this.colorArcFg) != colorToHex(color))
                    this.colorArcBg = this.colorArcFg;

                this.colorArcBg = shadeColor(this.colorArcBg, this.arcBgColorLight, this.arcBgColorSat);
            }

            if (typeof o.dialLabel === 'boolean' && o.dialLabel) {
                this.dialLabel = 'FlexGauge';
            }

        },

        _build: function () {
            if (document.getElementById(this.elementId) === null) {
                $(this.appendTo).append('<canvas id="' + this.elementId + '" width="' + this.elementWidth + '" height="' + this.elementHeight + '"></canvas>');
            }

            this._canvas = document.getElementById(this.elementId);
            this._ctx = this._canvas.getContext("2d");

            this.arcAngleStart = this.arcAngleStart * Math.PI;
            this.arcAngleEnd = this.arcAngleEnd * Math.PI;
            if (this.animateEasing === false) {
                this._animatePerc = this.arcFillPercent;
            }

            var that = this;
            this._animateLoop = setInterval(function () {
                return that._animate();
            }, (this.animateSpeed * this.animateNumerator) / (this.arcFillPercent * this.animateDivisor));
        },

        _animate: function () {
            var animateInt = Math.round(this._animatePerc * 100);
            var arcInt = Math.round(this.arcFillPercent * 100);

            if (animateInt < arcInt)
                animateInt++;
            else
                animateInt--;

            this._animatePerc = (animateInt / 100);
            if (animateInt === arcInt) {
                this.arcFillPercent = this._animatePerc;
                clearInterval(this._animateLoop);
                this._draw();
            }
            this._draw();
        },

        _draw: function () {
            //Clear the canvas everytime a chart is drawn
            this._ctx.clearRect(0, 0, this.elementWidth, this.elementHeight);

            //Background 360 degree arc
            this._ctx.beginPath();
            this._ctx.strokeStyle = this.colorArcBg;
            this._ctx.lineWidth = this.arcStrokeBg;
            this._ctx.arc(
                this.elementWidth / 2,
                this.elementHeight / 2 + 50,
                this.arcSize,
                0,
                Math.PI,
                true
            );

            this._ctx.stroke();

            //var newEnd = ((this.arcAngleEnd - this.arcAngleStart) * this._animatePerc) + this.arcAngleStart;
            var newStart;
            var newEnd;

            var incArc = this.inc*Math.PI/2;
            if (this.inc >= 0.0){
                newStart = -Math.PI/2;
                newEnd = newStart + incArc;
            } else {
                newStart = -Math.PI/2 + incArc;
                newEnd = -Math.PI/2;
            }

            var colorShadesTabRed = ['#ff0000','#ff4000','#ff8000','#ff9900','#ffbf00','#ffff00'];
            var colorShadesTabGreen = ['#ffff00','#E0FF00','#D0FF00','#a0ff00','#00ff00','#00ff40',];
            var colorValue = parseInt(Math.abs((this.inc / this.incTot) * 5));
            var theColor;
            if (this.inc >= 0.0)
                theColor = colorShadesTabGreen[colorValue];
            else
                theColor = colorShadesTabRed[5-colorValue];
            this.colorArcFg = theColor;

            this._ctx.beginPath();
            this._ctx.strokeStyle = this.colorArcFg;
            this._ctx.lineWidth = this.arcStrokeFg;
            this._ctx.arc(
                this.elementWidth / 2,
                this.elementHeight / 2 + 50,
                this.arcSize,
                newStart,
                newEnd,
                false
            );
            this._ctx.stroke();
            this._renderLabel();
        },

        _renderLabel: function () {
            if (this.dialValue) {
                var dialVal;
                var dial = $(this.appendTo).find('div.' + this.dialClass);
                if (dial.length === 0) {
                    $(this.appendTo).append('<div class="' + this.dialClass + '"></div>');
                }
                dial = $(this.appendTo).find('div.' + this.dialClass);
                if (typeof this.dialValue === 'boolean') {
                    switch (this.dialUnit) {
                        case '%':
                            dialVal = Math.round(this._animatePerc * 100);
                            break;
                        default:
                            dialVal = Math.round(this.arcFillInt * (this._animatePerc / this.arcFillPercent));
                            break;
                    }
                    dialVal = (isNaN(dialVal) ? 0 : dialVal);
                    switch (this.dialUnitPosition) {
                        case 'before':
                            dialVal = this.dialUnit + dialVal;
                            break;
                        case 'after':
                            dialVal = dialVal + this.dialUnit;
                            break;
                    }
                } else {
                    dialVal = this.dialValue;
                }
                dial.html(dialVal)
            }
            if (this.dialLabel) {
                var label = $(this.appendTo).find('div.' + this.dialLabelClass);
                if (label.length === 0) {
                    $(this.appendTo).append('<div class="' + this.dialLabelClass + '"></div>');
                }
                label = $(this.appendTo).find('div.' + this.dialLabelClass);
                label.html(this.dialLabel);
            }
        }
    };

    function shadeColor(col, amt, sat) {
        if (col[0] == "#") {
            col = col.slice(1);
        }

        var num = parseInt(col, 16);

        var r = (num >> 16) + amt;

        if (r > 255) r = 255;
        else if (r < 0) r = 0;

        var b = ((num >> 8) & 0x00FF) + amt;

        if (b > 255) b = 255;
        else if (b < 0) b = 0;

        var g = (num & 0x0000FF) + amt;

        if (g > 255) g = 255;
        else if (g < 0) g = 0;

        var gray = r * 0.3086 + g * 0.6094 + b * 0.0820;
        sat = (sat / 100);

        r = Math.round(r * sat + gray * (1 - sat));
        g = Math.round(g * sat + gray * (1 - sat));
        b = Math.round(b * sat + gray * (1 - sat));
        return "#" + (g | (b << 8) | (r << 16)).toString(16);
    }

    function getStyleRuleValue(style, selector) {
        $('body').append('<div id="getStyleRuleValue-' + selector + '"></div>');
        var element = $('#getStyleRuleValue-' + selector);
        element.addClass(selector);
        var color = element.css(style);
        var hex = colorToHex(color);
        element.remove();
        return hex;
    }

    function colorToHex(color) {
        if (color[0] != 'r')
            return color;

        var rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return "#" +
            ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
    }

    if (typeof define === 'function') {
        define('flex-gauge', ['jquery'], function ($) {
            return FlexGauge;
        });
    } else {
        window.FlexGauge = FlexGauge;
    }
})(jQuery);