add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / charts / combination / UnemploymentController.js

Ext.define('KitchenSink.view.charts.combination.UnemploymentController', {\r
    extend: 'Ext.app.ViewController',\r
    alias: 'controller.unemployment',\r
\r
    // State regions.\r
    // A region line spans from the 'start' state through the 'end' state.\r
    regions: [{\r
        name: 'Northeast Region',\r
        start: 'CT',\r
        end: 'VT'\r
    }, {\r
        name: 'Southeast Region',\r
        start: 'AL',\r
        end: 'VA'\r
    }, {\r
        name: 'Midwest Region',\r
        start: 'WI',\r
        end: 'AR'\r
    }, {\r
        name: 'Southwest Region',\r
        start: 'AZ',\r
        end: 'UT'\r
    }, {\r
        name: 'Northwest Region',\r
        start: 'AK',\r
        end: 'WY'\r
    }],\r
\r
    regionIndex: 0,\r
    linePadding: 5,\r
    tickSize: 10,\r
    startAngle: 0,\r
    endAngle: 0,\r
    region: null,\r
\r
    /**\r
     * Adds ticks to the ends of a region line.\r
     * @param surface The surface to put the ticks into.\r
     * @param attr The style of the ticks.\r
     * @param angles Array with angles to put the ticks at.\r
     * @param sprites The array to add the created tick sprites to (for future reference).\r
     */\r
    addTicks: function (surface, attr, angles, sprites) {\r
        var linePadding = this.linePadding,\r
            tickSize = this.tickSize,\r
            i, ln, angle;\r
\r
        for (i = 0, ln = angles.length; i < ln; i++) {\r
            angle = angles[i] + attr.rotationRads;\r
            sprites.push(surface.add({\r
                type: 'line',\r
                strokeStyle: 'gray',\r
\r
                translationX: attr.translationX,\r
                translationY: attr.translationY,\r
\r
                fromX: attr.centerX + (attr.endRho + linePadding) * Math.cos(angle),\r
                fromY: attr.centerY + (attr.endRho + linePadding) * Math.sin(angle),\r
\r
                toX: attr.centerX + (attr.endRho + linePadding + tickSize) * Math.cos(angle),\r
                toY: attr.centerY + (attr.endRho + linePadding + tickSize) * Math.sin(angle)\r
            }));\r
        }\r
    },\r
\r
    // This renderer is called for each pie slice of the series only once\r
    // on initial chart render. The renderer doesn't actually change\r
    // the style of the series sprites. Its only job is to create\r
    // and position the region sprites in the chart.\r
    onDummySliceRender: function (sprite, config, data, index) {\r
        // Please see the comments in the KitchenSink.store.Unemployment class\r
        // for more info on the meaning of the record fields.\r
        var me = this,\r
            ln = me.regions.length,\r
            record = data.store.getAt(index),\r
            label = record.get('label'),\r
            spriteSurface = sprite.getSurface(), // 'series' surface\r
            chart = spriteSurface.ownerCt,\r
            overlaySurface = chart.getSurface('overlay'),\r
            attr = sprite.attr,\r
            region;\r
\r
        // Because the regionIndex is declared and initialized in the closure\r
        // that's only executed once (when the view is defined),\r
        // we need to reset the regionIndex every time the example is shown.\r
        if (chart.resetRegionIndex) {\r
            me.regionIndex = 0;\r
            delete chart.resetRegionIndex;\r
        }\r
\r
        // If it's a sector that shows the change in unemployment with a color\r
        if (label !== '' && label !== 'year') {\r
\r
            // If not all region sprites have been created yet.\r
            if (me.regionIndex !== ln) {\r
                // Since the renderer function is called for all the sectors\r
                // of the 'pie' series sprite in the store record order,\r
                // we can create region sprites on the first 'swipe' through the sectors\r
                // when the pie series sprite is rendered for the first time,\r
                // and remove the renderer afterwards.\r
                me.region = region = me.regions[me.regionIndex];\r
\r
                if (label === region.start) {\r
\r
                    me.startAngle = attr.startAngle;\r
                    region.startIndex = index;\r
\r
                } else if (label === region.end) {\r
\r
                    me.endAngle = attr.endAngle;\r
                    region.endIndex = index;\r
\r
                    region.sprites = [];\r
\r
                    region.sprites.push(overlaySurface.add({\r
                        type: 'arc',\r
                        strokeStyle: 'gray',\r
\r
                        cx: attr.centerX,\r
                        cy: attr.centerY,\r
\r
                        r: attr.endRho + me.linePadding,\r
\r
                        translationX: attr.translationX,\r
                        translationY: attr.translationY,\r
                        rotationRads: attr.rotationRads,\r
\r
                        startAngle: me.startAngle,\r
                        endAngle: me.endAngle\r
                    }));\r
\r
                    me.addTicks(overlaySurface, attr, [me.startAngle, me.endAngle], region.sprites);\r
\r
                    // Label region lines with text sprites.\r
                    region.sprites.push(overlaySurface.add({\r
                        type: 'arctext',\r
                        text: region.name,\r
                        spacing: 2,\r
                        centerX: attr.centerX,\r
                        centerY: attr.centerY,\r
                        radius: attr.endRho + me.linePadding * 2,\r
                        angle: ((me.startAngle + me.endAngle) * 0.5 + attr.rotationRads) / Math.PI * 180,\r
                        translationX: attr.translationX,\r
                        translationY: attr.translationY,\r
                        template: {\r
                            type: 'text',\r
                            fontSize: 13,\r
                            fontWeight: 'normal',\r
                            fillStyle: 'gray'\r
\r
                        }\r
                    }));\r
                    me.regionIndex++;\r
                }\r
\r
            }\r
        }\r
\r
        sprite.attr.renderer = null;\r
    },\r
\r
    onSliceRender2012: function (sprite, config, data, index) {\r
        // Please see the comments in the KitchenSink.store.Unemployment class\r
        // for more info on the meaning of the record fields.\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            unemployment = record.get('y2012'),\r
            style = {};\r
\r
        if (label === '') { // a separating sector\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') { // a sector that shows a year\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else { // a sector that shows the change in unemployment with a color\r
            style.fillStyle = this.getStateColor(unemployment);\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2012: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2012',\r
                font: 'bold 16px sans-serif'\r
            };\r
        }\r
    },\r
\r
    onSliceRender2011: function (sprite, config, data, index) {\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            style = {};\r
\r
        if (label === '') {\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') {\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else {\r
            style.fillStyle = this.getStateColor(record.get('y2011'));\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2011: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2011'\r
            };\r
        } else {\r
            return {\r
                hidden: true\r
            };\r
        }\r
    },\r
\r
    onSliceRender2010: function (sprite, config, data, index) {\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            style = {};\r
\r
        if (label === '') {\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') {\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else {\r
            style.fillStyle = this.getStateColor(record.get('y2010'));\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2010: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2010'\r
            };\r
        } else {\r
            return {\r
                hidden: true\r
            };\r
        }\r
    },\r
\r
    onSliceRender2009: function (sprite, config, data, index) {\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            style = {};\r
\r
        if (label === '') {\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') {\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else {\r
            style.fillStyle = this.getStateColor(record.get('y2009'));\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2009: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2009'\r
            };\r
        } else {\r
            return {\r
                hidden: true\r
            };\r
        }\r
    },\r
\r
    onSliceRender2008: function (sprite, config, data, index) {\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            style = {};\r
\r
        if (label === '') {\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') {\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else {\r
            style.fillStyle = this.getStateColor(record.get('y2008'));\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2008: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2008'\r
            };\r
        } else {\r
            return {\r
                hidden: true\r
            };\r
        }\r
    },\r
\r
    onSliceRender2007: function (sprite, config, data, index) {\r
        var record = data.store.getAt(index),\r
            label = record.get('label'),\r
            style = {};\r
\r
        if (label === '') {\r
            style.fillStyle = 'none';\r
            style.strokeStyle = 'none';\r
        } else if (label === 'year') {\r
            style.fillStyle = 'rgba(70, 70, 69, 1.0)';\r
        } else {\r
            style.fillStyle = this.getStateColor(record.get('y2007'));\r
        }\r
        return style;\r
    },\r
\r
    onLabelRender2007: function (text, sprite, config, data, index) {\r
        if (text === 'year') {\r
            return {\r
                text: '2007'\r
            };\r
        } else {\r
            return {\r
                hidden: true\r
            };\r
        }\r
    },\r
\r
    onItemHighlight: function (chart, item) {\r
        // The 'item' parameter here is an object that holds information\r
        // about the highlighted item, like its 'index', the 'series' it belongs to,\r
        // the associated store 'record' and its 'field'.\r
\r
        var regions = this.regions,\r
            label = item.record.get('label'),\r
            cartesianChart = this.lookupReference('cartesian'),\r
            data = item.record.data,\r
            i, j, ik, jk, region, sprite;\r
\r
        if (!label || label === 'year') {\r
            // Don't highlight the sectors that separate the regions\r
            // and the sector that shows the year.\r
            item.series.setAttributesForItem(item, {\r
                highlighted: false\r
            });\r
        } else {\r
            chart.getSurface('chart').get('stateName').setAttributes({\r
                text: item.record.get('state')\r
            });\r
            // Display unemployment changes for the highlighted state inside the cartesian chart.\r
            cartesianChart.setStore({\r
                fields: ['year', 'percent'],\r
                data: [\r
                    {year: '2007', percent: data.y2007},\r
                    {year: '2008', percent: data.y2008},\r
                    {year: '2009', percent: data.y2009},\r
                    {year: '2010', percent: data.y2010},\r
                    {year: '2011', percent: data.y2011},\r
                    {year: '2012', percent: data.y2012}\r
                ]\r
            });\r
        }\r
\r
        if (!regions) {\r
            return;\r
        }\r
\r
        // Find the region the highlighted state sector belongs to and highlight its sprites,\r
        // while unhighlighting all other regions.\r
        for (i = 0, ik = regions.length; i < ik; i++) {\r
            region = regions[i];\r
            if (item.index >= region.startIndex && item.index <= region.endIndex) {\r
                if (!region.highlighted) {\r
                    for (j = 0, jk = region.sprites.length; j < jk; j++) {\r
                        sprite = region.sprites[j];\r
                        if (sprite.type === 'arctext') {\r
                            sprite.getTemplate().setAttributes({\r
                                fillStyle: 'red'\r
                            });\r
                        } else {\r
                            sprite.setAttributes({\r
                                strokeStyle: 'red',\r
                                lineWidth: 1.5\r
                            });\r
                        }\r
                    }\r
                    region.highlighted = true;\r
                }\r
            } else if (region.highlighted) {\r
                for (j = 0, jk = region.sprites.length; j < jk; j++) {\r
                    sprite = region.sprites[j];\r
                    if (sprite.type === 'arctext') {\r
                        sprite.getTemplate().setAttributes({\r
                            fillStyle: 'black'\r
                        });\r
                    } else {\r
                        sprite.setAttributes({\r
                            strokeStyle: 'gray',\r
                            lineWidth: 1\r
                        });\r
                    }\r
                }\r
                region.highlighted = false;\r
            }\r
        }\r
\r
        if (!Ext.is.Desktop) {\r
            chart.redraw();\r
        }\r
    },\r
\r
    onBarRender: function (sprite, config, data, index) {\r
        var percent = data.store.getAt(index).get('percent');\r
\r
        return {\r
            fillStyle: this.getStateColor(percent)\r
        };\r
    },\r
\r
    // Returns color based on percentage change in unemployment.\r
    getStateColor: function (unemployment) {\r
        if (unemployment < -1.5) {\r
            return 'rgba(114, 166, 185, 1.0)';\r
        } else if (unemployment < -0.5) {\r
            return 'rgba(194, 212, 221, 1.0)';\r
        } else if (unemployment < 0.5) {\r
            return 'rgba(126, 135, 142, 1.0)';\r
        } else if (unemployment < 1.5) {\r
            return 'rgba(179, 113, 114, 1.0)';\r
        } else {\r
            return 'rgba(146, 50, 51, 1.0)';\r
        }\r
    },\r
\r
    onAfterRender: function (chart) {\r
        // Get the series used for highlighting (belong to a separate chart,\r
        // that uses 'itemhighlight' interaction).\r
        var series = chart.getSeries()[0],\r
            store = chart.getStore(),\r
            index = store.find('label', 'CA');\r
\r
        chart.resetRegionIndex = true;\r
        chart.on({\r
            redraw: function () {\r
                // Highlight the California state by default.\r
                chart.setHighlightItem(series.getItemByIndex(index, 'sprites'));\r
                // Re-render the overlay surface with the state region sprites\r
                // to make sure they are positioned correctly.\r
                chart.getSurface('overlay').renderFrame();\r
            },\r
            single: true\r
        });\r
    },\r
\r
    onBeforeRender: function () {\r
        // Make Ext.draw.TextMeasurer use the Ext.util.TextMetrics to measure text,\r
        // which is a more precise but much slower solution.\r
        // For this example it shouldn't be a noticable performace hit,\r
        // since we made optimizations elsewhere.\r
        Ext.draw.TextMeasurer.precise = true;\r
    },\r
\r
    onDestroy: function () {\r
        var regions = this.regions,\r
            i, region;\r
\r
        for (i = 0; i < regions.length; i++) {\r
            region = regions[i];\r
            delete region.sprites;\r
        }\r
\r
        this.regionIndex = 0;\r
\r
        Ext.draw.TextMeasurer.precise = false;\r
    }\r
\r
});