add extjs 6.0.1 sources

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

/**\r
 * @class Ext.sparkline.Pie\r
 *\r
 * Plots a pie chart based upon the input {#values} array.\r
 *\r
 * See {@link Ext.sparkline.Base the base class} for a simple example.\r
 */\r
Ext.define('Ext.sparkline.Pie', {\r
    extend: 'Ext.sparkline.Base',\r
\r
    alias: 'widget.sparklinepie',\r
\r
    config: {\r
\r
        /**\r
         * @cfg {Number} [offset] Angle in degrees to offset the first slice.\r
         */\r
        offset: 0,\r
        \r
        /**\r
         * @cfg {String[]} [sliceColors] An array of CSS colro values to apply to the chart slices.\r
         */\r
        sliceColors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00', '#dd4477', '#0099c6', '#990099'],\r
        \r
        /**\r
         * @cfg {Number} [borderWidth=0] Border width in pixels of line round slices.\r
         */\r
        borderWidth: 0,\r
        \r
        /**\r
         * @cfg {String} [borderColor=#000] Border color of line round slices.\r
         */\r
        borderColor: '#000',\r
        \r
        tipTpl: new Ext.XTemplate('● {value} ({percent:number("0.0")}%)')\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
        var me = this,\r
            values = me.values,\r
            total = 0, i;\r
\r
        me.callParent(arguments);\r
\r
        me.shapes = {}; // map shape ids to value offsets\r
        me.valueShapes = {}; // maps value offsets to shape ids\r
\r
        if (values.length > 0) {\r
            for (i = values.length; i--;) {\r
                total += values[i];\r
            }\r
        }\r
        me.total = total;\r
        me.radius = Math.floor(Math.min(me.getWidth(), me.getHeight()) / 2);\r
    },\r
\r
    getRegion: function(x, y) {\r
        var ratio = window.devicePixelRatio || 1,\r
            shapeid = this.canvas.getShapeAt(x * ratio, y * ratio);\r
        return (shapeid != null && this.shapes[shapeid] != null) ? this.shapes[shapeid] : null;\r
    },\r
\r
    getRegionFields: function(region) {\r
        var sliceColors = this.getSliceColors();\r
\r
        return {\r
            isNull: this.values[region] == null,\r
            value: this.values[region],\r
            percent: this.values[region] / this.total * 100,\r
            color: sliceColors[region % sliceColors.length],\r
            offset: region\r
        };\r
    },\r
\r
    renderHighlight: function(region) {\r
        this.renderSlice(region, true).append();\r
    },\r
\r
    renderSlice: function(valuenum, highlight) {\r
        var me = this,\r
            canvas = me.canvas,\r
            radius = me.radius,\r
            borderWidth = me.getBorderWidth(),\r
            offset = me.getOffset(),\r
            circle = 2 * Math.PI,\r
            values = me.values,\r
            total = me.total,\r
            next = offset ? (2*Math.PI)*(offset/360) : 0,\r
            start, end, i, vlen, color,\r
            sliceColors = this.getSliceColors();\r
\r
        vlen = values.length;\r
        for (i = 0; i < vlen; i++) {\r
            start = next;\r
            end = next;\r
            if (total > 0) {  // avoid divide by zero\r
                end = next + (circle * (values[i] / total));\r
            }\r
            if (valuenum === i) {\r
                color = sliceColors[i % sliceColors.length];\r
                if (highlight) {\r
                    color = me.calcHighlightColor(color);\r
                }\r
\r
                return canvas.drawPieSlice(radius, radius, radius - borderWidth, start, end, null, color);\r
            }\r
            next = end;\r
        }\r
    },\r
\r
    renderGraph: function () {\r
        var me = this,\r
            canvas = me.canvas,\r
            values = me.values,\r
            radius = me.radius,\r
            borderWidth = me.getBorderWidth(),\r
            shape, i,\r
            shapes = me.shapes || (me.shapes = {}),\r
            valueShapes = me.valueShapes || (me.valueShapes = {});\r
\r
        if (!me.callParent()) {\r
            return;\r
        }\r
        if (borderWidth) {\r
            canvas.drawCircle(radius, radius, Math.floor(radius - (borderWidth / 2)),\r
                me.getBorderColor(), null, borderWidth).append();\r
        }\r
        for (i = values.length; i--;) {\r
            if (values[i]) { // don't render zero values\r
                shape = me.renderSlice(i).append();\r
                valueShapes[i] = shape.id; // store just the shapeid\r
                shapes[shape.id] = i;\r
            }\r
        }\r
\r
        // If mouse is over, re-apply the highlight\r
        if (me.currentPageXY && me.el.getRegion().contains(me.currentPageXY)) {\r
            me.currentRegion = null;\r
            me.updateDisplay();\r
        }\r
        canvas.render();\r
    }\r
});