add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / sparkline / Bullet.js

/**\r
 * @class Ext.sparkline.Bullet\r
 *\r
 * Plots a bullet graph based upon the input {@link #values} array.\r
 *\r
 * See <a href="http://en.wikipedia.org/wiki/Bullet_graph">Bullet graphs Wikipedia Page</a> for more information.\r
 *\r
 * See {@link Ext.sparkline.Base the base class} for a simple example.\r
 */\r
Ext.define('Ext.sparkline.Bullet', {\r
    extend: 'Ext.sparkline.Base',\r
\r
    alias: 'widget.sparklinebullet',\r
\r
    config: {\r
\r
        /**\r
         * @cfg {String} [targetColor=#f33] The colour of the vertical target marker.\r
         */\r
        targetColor: '#f33',\r
        \r
        /**\r
         * @cfg {Number} [targetWidth=3] Width of the target bar in pixels.\r
         */\r
        targetWidth: 3,\r
        \r
        /**\r
         * @cfg {String} [performanceColor=#33f] The color of the performance measure horizontal bar.\r
         */\r
        performanceColor: '#33f',\r
        \r
        /**\r
         * @cfg {String[]} [rangeColors] An array of colors to use for each qualitative range background color.\r
         */\r
        rangeColors: ['#d3dafe', '#a8b6ff', '#7f94ff'],\r
        \r
        /**\r
         * @cfg {Number} [base] Set this to a number to change the base start number.\r
         */\r
        base: null,\r
        \r
        tipTpl: new Ext.XTemplate('{fieldkey:this.fields} - {value}', {\r
            fields: function(v) {\r
                if (v === 'r') {\r
                    return 'Range';\r
                }\r
                if (v === 'p') {\r
                    return 'Performance';\r
                }\r
                if (v === 't') {\r
                    return 'Target';\r
                }\r
            }\r
        })\r
    },\r
\r
    // Ensure values is an array of normalized values\r
    applyValues: function(newValues) {\r
        newValues = Ext.Array.map(Ext.Array.from(newValues), this.normalizeValue);\r
        this.disabled = !(newValues && newValues.length);\r
        return newValues;\r
    },\r
\r
    onUpdate: function() {\r
        var me = this,\r
            values = me.values,\r
            min, max, vals,\r
            base = me.getBase();\r
\r
        me.callParent(arguments);\r
\r
        // target or performance could be null\r
        vals = values.slice();\r
        vals[0] = vals[0] === null ? vals[2] : vals[0];\r
        vals[1] = values[1] === null ? vals[2] : vals[1];\r
        min = Math.min.apply(Math, values);\r
        max = Math.max.apply(Math, values);\r
        if (base == null) {\r
            min = min < 0 ? min : 0;\r
        } else {\r
            min = base;\r
        }\r
        me.min = min;\r
        me.max = max;\r
        me.range = max - min;\r
        me.shapes = {};\r
        me.valueShapes = {};\r
        me.regiondata = {};\r
        if (!values.length) {\r
            me.disabled = true;\r
        }\r
    },\r
\r
    getRegion: function(x, y) {\r
        var shapeid = this.canvas.getShapeAt(x, y);\r
        return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined;\r
    },\r
\r
    getRegionFields: function(region) {\r
        return {\r
            fieldkey: region.substr(0, 1),\r
            value: this.values[region.substr(1)],\r
            region: region\r
        };\r
    },\r
\r
    renderHighlight: function(region) {\r
        switch (region.substr(0, 1)) {\r
            case 'r':\r
                this.renderRange(region.substr(1), true).append();\r
                break;\r
            case 'p':\r
                this.renderPerformance(true).append();\r
                break;\r
            case 't':\r
                this.renderTarget(true).append();\r
                break;\r
        }\r
    },\r
\r
    renderRange: function(region, highlight) {\r
        var rangeval = this.values[region],\r
            rangewidth = Math.round(this.getWidth() * ((rangeval - this.min) / this.range)),\r
            color = this.getRangeColors()[region - 2];\r
        if (highlight) {\r
            color = this.calcHighlightColor(color);\r
        }\r
        return this.canvas.drawRect(0, 0, rangewidth - 1, this.getHeight() - 1, color, color);\r
    },\r
\r
    renderPerformance: function(highlight) {\r
        var perfval = this.values[1],\r
            perfwidth = Math.round(this.getWidth() * ((perfval - this.min) / this.range)),\r
            color = this.getPerformanceColor();\r
        if (highlight) {\r
            color = this.calcHighlightColor(color);\r
        }\r
        return this.canvas.drawRect(0, Math.round(this.getHeight() * 0.3), perfwidth - 1,\r
            Math.round(this.getHeight() * 0.4) - 1, color, color);\r
    },\r
\r
    renderTarget: function(highlight) {\r
        var targetval = this.values[0],\r
            targetWidth = this.getTargetWidth(),\r
            x = Math.round(this.getWidth() * ((targetval - this.min) / this.range) - (targetWidth / 2)),\r
            targettop = Math.round(this.getHeight() * 0.10),\r
            targetheight = this.getHeight() - (targettop * 2),\r
            color = this.getTargetColor();\r
\r
        if (highlight) {\r
            color = this.calcHighlightColor(color);\r
        }\r
        return this.canvas.drawRect(x, targettop, targetWidth - 1, targetheight - 1, color, color);\r
    },\r
\r
    renderGraph: function () {\r
        var me = this,\r
            vlen = me.values.length,\r
            canvas = me.canvas,\r
            i, shape,\r
            shapes = me.shapes || (me.shapes = {}),\r
            valueShapes = me.valueShapes || (me.valueShapes = {});\r
\r
        if (!me.callParent()) {\r
            return;\r
        }\r
        for (i = 2; i < vlen; i++) {\r
            shape = me.renderRange(i).append();\r
            shapes[shape.id] = 'r' + i;\r
            valueShapes['r' + i] = shape.id;\r
        }\r
        if (me.values[1] !== null) {\r
            shape = me.renderPerformance().append();\r
            shapes[shape.id] = 'p1';\r
            valueShapes.p1 = shape.id;\r
        }\r
        if (me.values[0] !== null) {\r
            shape = this.renderTarget().append();\r
            shapes[shape.id] = 't0';\r
            valueShapes.t0 = shape.id;\r
        }\r
\r
        // If mouse is over, apply the highlight\r
        if (me.currentPageXY && me.el.getRegion().contains(me.currentPageXY)) {\r
            me.updateDisplay();\r
        }\r
        canvas.render();\r
    }\r
});