add extjs 6.0.1 sources

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

/**\r
 * @class Ext.sparkline.TriState\r
 *\r
 * Plots bars based upon "win"/"draw" or "lose" status of the input {@link #values} array. Positive values mean\r
 * a win, zero a draw, and negative a lose. \r
 *\r
 * See {@link Ext.sparkline.Base the base class} for a simple example.\r
 */\r
Ext.define('Ext.sparkline.TriState', {\r
    extend: 'Ext.sparkline.BarBase',\r
    requires: [\r
        'Ext.sparkline.RangeMap'\r
    ],\r
\r
    alias: 'widget.sparklinetristate',\r
\r
    config: {\r
\r
        /**\r
         * @cfg {Number} [barWidth=4] The pixel width of each bar.\r
         */\r
        barWidth: 4,\r
        \r
        /**\r
         * @cfg {Number} [barSpacing=1] The pixel spacing between each bar.\r
         */\r
        barSpacing: 1,\r
        \r
        /**\r
         * @cfg {String} [posBarColor=#6f6] The color for positive value bars.\r
         */\r
        posBarColor: '#6f6',\r
        \r
        /**\r
         * @cfg {String} [negBarColor=#f44] The color for negative value bars.\r
         */\r
        negBarColor: '#f44',\r
        \r
        /**\r
         * @cfg {String} [zeroBarColor=#999] The color for zero value bars.\r
         */\r
        zeroBarColor: '#999',\r
        \r
        /**\r
         * @cfg {Object} [colorMap] An object that uses range specifiers as keys to\r
         * indicate bar color values for a range of values. A range specifier is\r
         * specified in the form `[number]:[number]`, which indicates start and end range.\r
         * Omitting either means an open ended range.\r
         *\r
         * For example, to render green bars on all values less than -1 and red on values\r
         * higher than 1, you would use:\r
         *\r
         *     colorMap: {\r
         *         // Open ended range, with max value -1\r
         *         ":-1": "green",\r
         *\r
         *         // Open ended range, with min value 1\r
         *         "1:": "red"\r
         *     }\r
         */\r
        colorMap: {},\r
        \r
        tipTpl: new Ext.XTemplate('● {value:this.states}', {\r
            states: function(v) {\r
                var value = Number(v);\r
                if (value === -1) {\r
                    return 'Loss';\r
                }\r
                if (value === 0) {\r
                    return 'Draw';\r
                }\r
                if (value === 1) {\r
                    return 'Win';\r
                }\r
                return v;\r
            }\r
        })\r
    },\r
\r
    applyColorMap: function(colorMap) {\r
        var me = this;\r
\r
        if (Ext.isArray(colorMap)) {\r
            me.colorMapByIndex = colorMap;\r
            me.colorMapByValue = null;\r
        } else {\r
            me.colorMapByIndex = null;\r
            me.colorMapByValue = colorMap;\r
            if (me.colorMapByValue && me.colorMapByValue.get == null) {\r
                me.colorMapByValue = new Ext.sparkline.RangeMap(colorMap);\r
            }\r
        }\r
        return colorMap;\r
    },\r
\r
    // Ensure values is an array of numbers\r
    applyValues: function(newValues) {\r
        newValues = Ext.Array.map(Ext.Array.from(newValues), Number);\r
        this.disabled = !(newValues && newValues.length);\r
        return newValues;\r
    },\r
\r
    onUpdate: function() {\r
        this.totalBarWidth = this.getBarWidth() + this.getBarSpacing();\r
    },\r
\r
    getBarWidth: function() {\r
        var values = this.values;\r
\r
        return this._barWidth || (this.getWidth() - (values.length - 1) * this.getBarSpacing()) / values.length;\r
    },\r
\r
    getRegion: function (x, y) {\r
        return Math.floor(x / this.totalBarWidth);\r
    },\r
\r
    getRegionFields: function (region) {\r
        return {\r
            isNull: this.values[region] == null,\r
            value: this.values[region],\r
            color: this.calcColor(this.values[region], region),\r
            offset: region\r
        };\r
    },\r
\r
    calcColor: function (value, valuenum) {\r
        var me = this,\r
            values = me.values,\r
            colorMapByIndex = me.colorMapByIndex,\r
            colorMapByValue = me.colorMapByValue,\r
            color, newColor;\r
\r
        if (colorMapByValue && (newColor = colorMapByValue.get(value))) {\r
            color = newColor;\r
        } else if (colorMapByIndex && colorMapByIndex.length > valuenum) {\r
            color = colorMapByIndex[valuenum];\r
        } else if (values[valuenum] < 0) {\r
            color = me.getNegBarColor();\r
        } else if (values[valuenum] > 0) {\r
            color = me.getPosBarColor();\r
        } else {\r
            color = me.getZeroBarColor();\r
        }\r
        return color;\r
    },\r
\r
    renderRegion: function (valuenum, highlight) {\r
        var me = this,\r
            values = me.values,\r
            canvas = me.canvas,\r
            canvasHeight, height, halfHeight, x, y, color;\r
\r
        canvasHeight = canvas.pixelHeight;\r
        halfHeight = Math.round(canvasHeight / 2);\r
\r
        x = valuenum * me.totalBarWidth;\r
        if (values[valuenum] < 0) {\r
            y = halfHeight;\r
            height = halfHeight - 1;\r
        } else if (values[valuenum] > 0) {\r
            y = 0;\r
            height = halfHeight - 1;\r
        } else {\r
            y = halfHeight - 1;\r
            height = 2;\r
        }\r
        color = me.calcColor(values[valuenum], valuenum);\r
        if (color == null) {\r
            return;\r
        }\r
        if (highlight) {\r
            color = me.calcHighlightColor(color);\r
        }\r
        canvas.drawRect(x, y, me.getBarWidth() - 1, height - 1, color, color).append();\r
    }\r
});