add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / src / chart / PolarChart.js

/**\r
 * @class Ext.chart.PolarChart\r
 * @extends Ext.chart.AbstractChart\r
 * @xtype polar\r
 *\r
 * Represent a chart that uses polar coordinates.\r
 * A polar chart has two axes: an angular axis (which is a circle) and\r
 * a radial axis (a straight line from the center to the edge of the circle).\r
 * The angular axis is usually a Category axis while the radial axis is\r
 * typically numerical. \r
 *\r
 * Pie charts and Radar charts are common examples of Polar charts.\r
 *\r
 */\r
Ext.define('Ext.chart.PolarChart', {\r
    extend: 'Ext.chart.AbstractChart',\r
    requires: [\r
        'Ext.chart.grid.CircularGrid',\r
        'Ext.chart.grid.RadialGrid'\r
    ],\r
    xtype: 'polar',\r
    isPolar: true,\r
\r
    config: {\r
        /**\r
         * @cfg {Array} center Determines the center of the polar chart.\r
         * Updated when the chart performs layout.\r
         */\r
        center: [0, 0],\r
        /**\r
         * @cfg {Number} radius Determines the radius of the polar chart.\r
         * Updated when the chart performs layout.\r
         */\r
        radius: 0,\r
\r
        /**\r
         * @cfg {Number} innerPadding The amount of inner padding in pixels.\r
         * Inner padding is the padding from the outermost angular axis to the series.\r
         */\r
        innerPadding: 0\r
    },\r
\r
    getDirectionForAxis: function (position) {\r
        return position === 'radial' ? 'Y' : 'X';\r
    },\r
\r
    applyCenter: function (center, oldCenter) {\r
        if (oldCenter && center[0] === oldCenter[0] && center[1] === oldCenter[1]) {\r
            return;\r
        }\r
        return [+center[0], +center[1]];\r
    },\r
\r
    updateCenter: function (center) {\r
        var me = this,\r
            axes = me.getAxes(),\r
            series = me.getSeries(),\r
            i, ln, axis, seriesItem;\r
            \r
        for (i = 0, ln = axes.length; i < ln; i++) {\r
            axis = axes[i];\r
            axis.setCenter(center);\r
        }\r
\r
        for (i = 0, ln = series.length; i < ln; i++) {\r
            seriesItem = series[i];\r
            seriesItem.setCenter(center);\r
        }\r
    },\r
\r
    applyInnerPadding: function (padding, oldPadding) {\r
        return Ext.isNumber(padding) ? padding : oldPadding;\r
    },\r
\r
    doSetSurfaceRect: function (surface, rect) {\r
        var mainRect = this.getMainRect();\r
        surface.setRect(rect);\r
        surface.matrix.set(1, 0, 0, 1, mainRect[0] - rect[0], mainRect[1] - rect[1]);\r
        surface.inverseMatrix.set(1, 0, 0, 1, rect[0] - mainRect[0], rect[1] - mainRect[1]);\r
    },\r
\r
    applyAxes: function (newAxes, oldAxes) {\r
        var me = this,\r
            firstSeries = Ext.Array.from(me.config.series)[0],\r
            i, ln, axis, foundAngular;\r
\r
        if (firstSeries.type === 'radar' && newAxes && newAxes.length) {\r
            // For compatibility with ExtJS: add a default angular axis if it's missing\r
            for (i = 0, ln = newAxes.length; i < ln; i++) {\r
                axis = newAxes[i];\r
                if (axis.position === 'angular') {\r
                    foundAngular = true;\r
                    break;\r
                }\r
            }\r
            if (!foundAngular) {\r
                newAxes.push({\r
                    type: 'category',\r
                    position: 'angular',\r
                    fields: firstSeries.xField || firstSeries.angleField,\r
                    style: {\r
                        estStepSize: 1\r
                    },\r
                    grid: true\r
                });\r
            }\r
        }\r
        return this.callParent(arguments);\r
    },\r
\r
    performLayout: function () {\r
        var me = this,\r
            applyThickness = true;\r
\r
        try {\r
            me.animationSuspendCount++;\r
            if (this.callParent() === false) {\r
                applyThickness = false;\r
                // Animation will be decremented in finally block\r
                return;\r
            }\r
            me.suspendThicknessChanged();\r
\r
            var chartRect = me.getSurface('chart').getRect(),\r
                inset = me.getInsetPadding(),\r
                inner = me.getInnerPadding(),\r
                shrinkBox = Ext.apply({}, inset), side,\r
                width = chartRect[2] - inset.left - inset.right,\r
                height = chartRect[3] - inset.top - inset.bottom,\r
                mainRect = [inset.left, inset.top, width, height],\r
                seriesList = me.getSeries(), series,\r
                innerWidth = width - inner * 2,\r
                innerHeight = height - inner * 2,\r
                center = [innerWidth * 0.5 + inner, innerHeight * 0.5 + inner],\r
                radius = Math.min(innerWidth, innerHeight) * 0.5,\r
                axes = me.getAxes(), axis, thickness, halfLineWidth,\r
                angularAxes = [], radialAxes = [],\r
                seriesRadius = radius - inner,\r
                i, ln, shrinkRadius, floating, floatingValue,\r
                gaugeSeries, gaugeRadius;\r
\r
            me.setMainRect(mainRect);\r
\r
            me.doSetSurfaceRect(me.getSurface(), mainRect);\r
            for (i = 0, ln = me.surfaceMap.grid && me.surfaceMap.grid.length; i < ln; i++) {\r
                me.doSetSurfaceRect(me.surfaceMap.grid[i], chartRect);\r
            }\r
\r
            for (i = 0, ln = axes.length; i < ln; i++) {\r
                axis = axes[i];\r
                switch (axis.getPosition()) {\r
                    case 'angular':\r
                        angularAxes.push(axis);\r
                        break;\r
                    case 'radial':\r
                        radialAxes.push(axis);\r
                        break;\r
                }\r
            }\r
\r
            for (i = 0, ln = angularAxes.length; i < ln; i++) {\r
                axis = angularAxes[i];\r
                floating = axis.getFloating();\r
                floatingValue = floating ? floating.value : null;\r
                me.doSetSurfaceRect(axis.getSurface(), chartRect);\r
                thickness = axis.getThickness();\r
                for (side in shrinkBox) {\r
                    shrinkBox[side] += thickness;\r
                }\r
                width = chartRect[2] - shrinkBox.left - shrinkBox.right;\r
                height = chartRect[3] - shrinkBox.top - shrinkBox.bottom;\r
                shrinkRadius = Math.min(width, height) * 0.5;\r
                if (i === 0) {\r
                    seriesRadius = shrinkRadius - inner;\r
                }\r
                axis.setMinimum(0);\r
                axis.setLength(shrinkRadius);\r
                axis.getSprites();\r
                halfLineWidth = axis.sprites[0].attr.lineWidth * 0.5;\r
                for (side in shrinkBox) {\r
                    shrinkBox[side] += halfLineWidth;\r
                }\r
            }\r
\r
            for (i = 0, ln = radialAxes.length; i < ln; i++) {\r
                axis = radialAxes[i];\r
                me.doSetSurfaceRect(axis.getSurface(), chartRect);\r
                axis.setMinimum(0);\r
                axis.setLength(seriesRadius);\r
                axis.getSprites();\r
            }\r
\r
            for (i = 0, ln = seriesList.length; i < ln; i++) {\r
                series = seriesList[i];\r
                if (series.type === 'gauge' && !gaugeSeries) {\r
                    gaugeSeries = series;\r
                } else {\r
                    series.setRadius(seriesRadius);\r
                }\r
                me.doSetSurfaceRect(series.getSurface(), mainRect);\r
            }\r
\r
            me.doSetSurfaceRect(me.getSurface('overlay'), chartRect);\r
            if (gaugeSeries) {\r
                gaugeSeries.setRect(mainRect);\r
                gaugeRadius = gaugeSeries.getRadius() - inner;\r
                me.setRadius(gaugeRadius);\r
                me.setCenter(gaugeSeries.getCenter());\r
                gaugeSeries.setRadius(gaugeRadius);\r
                if (axes.length && axes[0].getPosition() === 'gauge') {\r
                    axis = axes[0];\r
                    me.doSetSurfaceRect(axis.getSurface(), chartRect);\r
                    axis.setTotalAngle(gaugeSeries.getTotalAngle());\r
                    axis.setLength(gaugeRadius);\r
                }\r
            } else {\r
                me.setRadius(radius);\r
                me.setCenter(center);\r
            }\r
            me.redraw();\r
        } catch (e) { // catch is required in IE8 (try/finally not supported)\r
            //<debug>\r
            Ext.log.error(me.$className + ': Unhandled Exception: ', e.description || e.message);\r
            //</debug>\r
            throw e;\r
        }\r
        finally {\r
            me.animationSuspendCount--;\r
            if (applyThickness) {\r
                me.resumeThicknessChanged();\r
            }\r
        }\r
    },\r
\r
    refloatAxes: function () {\r
        var me = this,\r
            axes = me.getAxes(),\r
            mainRect = me.getMainRect(),\r
            floating, value, alongAxis,\r
            i, n, axis, radius;\r
\r
        if (!mainRect) {\r
            return;\r
        }\r
\r
        radius = 0.5 * Math.min(mainRect[2], mainRect[3]);\r
\r
        for (i = 0, n = axes.length; i < n; i++) {\r
            axis = axes[i];\r
            floating = axis.getFloating();\r
            value = floating ? floating.value : null;\r
            if (value !== null) {\r
                alongAxis = me.getAxis(floating.alongAxis);\r
                if (axis.getPosition() === 'angular') {\r
                    if (alongAxis) {\r
                        value = alongAxis.getLength() * value / alongAxis.getRange()[1];\r
                    } else {\r
                        value = 0.01 * value * radius;\r
                    }\r
                    axis.sprites[0].setAttributes({length: value}, true);\r
                } else {\r
                    if (alongAxis) {\r
                        if (Ext.isString(value)) {\r
                            value = alongAxis.getCoordFor(value);\r
                        }\r
                        value = value / (alongAxis.getRange()[1] + 1) * Math.PI * 2 - Math.PI * 1.5 +\r
                            axis.getRotation();\r
                    } else {\r
                        value = Ext.draw.Draw.rad(value);\r
                    }\r
                    axis.sprites[0].setAttributes({baseRotation: value}, true);\r
                }\r
            }\r
        }\r
    },\r
\r
    redraw: function () {\r
        var me = this,\r
            axes = me.getAxes(), axis,\r
            seriesList = me.getSeries(), series,\r
            i, ln;\r
\r
        for (i = 0, ln = axes.length; i < ln; i++) {\r
            axis = axes[i];\r
            axis.getSprites();\r
        }\r
\r
        for (i = 0, ln = seriesList.length; i < ln; i++) {\r
            series = seriesList[i];\r
            series.getSprites();\r
        }\r
\r
        me.renderFrame();\r
        me.callParent(arguments);\r
    },\r
\r
    renderFrame: function () {\r
        this.refloatAxes();\r
        this.callParent();\r
    }\r
});\r