add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / column / RendererController.js

Ext.define('KitchenSink.view.charts.column.RendererController', {\r
    extend: 'Ext.app.ViewController',\r
    alias: 'controller.column-renderer',\r
\r
    onRefresh: function () {\r
        var chart = this.lookupReference('chart'),\r
            store = chart.getStore();\r
\r
        store.setData(store.generateData(7));\r
    },\r
\r
    onG1SeriesRender: function (sprite, config, rendererData, index) {\r
        var store = rendererData.store,\r
            storeItems = store.getData().items,\r
            record = storeItems[index],\r
            last = storeItems.length - 1,\r
            surface = sprite.getSurface(),\r
            isRtl = surface.getInherited().rtl,\r
            changes = {},\r
            lineSprites, firstColumnConfig, firstData, lastData, growth, string;\r
        if (!record) {\r
            return;\r
        }\r
        // Make the first and last columns larger and painted blue.\r
        if (index == 0 || index == last) {\r
            changes.fillStyle = 'powderblue';\r
            changes.x = config.x - config.width * 0.4;\r
            changes.y = config.y;\r
            changes.width = config.width * 1.8;\r
            changes.lineWidth = 4;\r
            // Draw a line between the first and last columns\r
            lineSprites = surface.myLineSprites;\r
            if (!lineSprites) {\r
                lineSprites = surface.myLineSprites = [];\r
                lineSprites[0] = surface.add({type:'path'});\r
                lineSprites[1] = surface.add({type:'text'});\r
            }\r
            if (index == 0) {\r
                surface.myFirstColumnConfig = Ext.clone(changes);\r
            } else if (index == last) {\r
                firstData = storeItems[0].data['g1'];\r
                lastData = storeItems[last].data['g1'];\r
\r
                firstColumnConfig = surface.myFirstColumnConfig;\r
                var x1 = firstColumnConfig.x + firstColumnConfig.width,\r
                    y1 = firstColumnConfig.y,\r
                    x2 = changes.x,\r
                    y2 = changes.y;\r
\r
                growth = Math.round(100 * (lastData - firstData) / (firstData || 1));\r
                lineSprites[0].setAttributes({\r
                    lineWidth: 1,\r
                    strokeStyle: growth > 0 ? '#61C102' : '#FF4D35',\r
                    zIndex: 10000,\r
                    opacity: 0.7,\r
                    path: "M" + x2 + " " + y2 + " L" + x1 + " " + y1 + " L" + x2 + " " + y1 + (lastData < firstData ? " L" : " M") + x2 + " " + y2 + " Z"\r
                });\r
                string = (growth > 0 ? "+ " : "- ") + Math.abs(growth) + " %";\r
                lineSprites[1].setAttributes({\r
                    text: string,\r
                    x: changes.x + (isRtl ? 12 : -12),\r
                    y: firstColumnConfig.y + (changes.y - firstColumnConfig.y)/2 + 10,\r
                    fillStyle: growth > 0 ? '#61C102' : '#FF4D35',\r
                    fontSize: 20,\r
                    zIndex: 10000,\r
                    opacity: 0.6,\r
                    scalingY: -1,\r
                    textAlign: 'center',\r
                    rotate: -90\r
                });\r
            }\r
        } else {\r
            changes.fillStyle = 'lightgray';\r
            changes.lineWidth = 2;\r
        }\r
        return changes;\r
    },\r
\r
    onG2SeriesRender: function (sprite, config, rendererData, index) {\r
        var store = rendererData.store,\r
            storeItems = store.getData().items,\r
            last = storeItems.length - 1,\r
            record = storeItems[index],\r
            diff = record && Math.round(record.data['g2'] - record.data['g1']),\r
            changes = {},\r
            surface = sprite.getSurface(),\r
            isRtl = surface.getInherited().rtl,\r
            textSprites, textSprite, rectSprite;\r
        if (!record) {\r
            return;\r
        }\r
        // This renderer function draws a red label if series #2 is greater than series #1.\r
        // The label displays the difference between the values of series #1 and series #2.\r
        //\r
        // Note: The two renderer functions in this test case cannot be consolidated. The red labels\r
        // are rendered here because they are positioned relatively to the series #2 columns.\r
        if (diff > 0) {\r
            changes.strokeStyle = 'tomato';\r
            changes.fillStyle = 'mistyrose';\r
            changes.opacity = 1.0;\r
\r
            textSprites = surface.myTextSprites;\r
            if (!textSprites) {\r
                textSprites = surface.myTextSprites = [];\r
            }\r
            textSprite = textSprites[index];\r
            if (!textSprite) {\r
                textSprite = textSprites[index] = surface.add({type:'text'});\r
                rectSprite = textSprite.rectSprite = surface.add({type:'rect'});\r
            } else {\r
                rectSprite = textSprite.rectSprite;\r
                textSprite.show();\r
                rectSprite.show();\r
            }\r
\r
            rectSprite.setAttributes({\r
                x: config.x + (index == last ? -17 : (isRtl ? -50 : 16)),\r
                y: config.y - 36,\r
                width: 30 + (diff >= 10 ? (diff >= 100 ? (diff >= 1000 ? 18 : 12) : 6) : 0),\r
                height: 18,\r
                stroke: 'tomato',\r
                fill: 'mistyrose',\r
                lineWidth: 1,\r
                radius: 4,\r
                zIndex: 10000\r
            });\r
\r
            textSprite.setAttributes({\r
                text: "+ " + diff,\r
                x: config.x + (index == last ? -11 : (isRtl ? -46 : 20)),\r
                y: config.y - 23,\r
                fill: 'red',\r
                fontSize: 12,\r
                zIndex: 10001,\r
                scalingY: -1\r
            });\r
        } else {\r
            changes.strokeStyle = 'dodgerblue';\r
            changes.fillStyle = 'palegreen';\r
            changes.opacity = 0.6;\r
\r
            textSprites = surface.myTextSprites;\r
            if (textSprites) {\r
                textSprite = textSprites[index];\r
                if (textSprite) {\r
                    textSprite.rectSprite.hide();\r
                    textSprite.hide();\r
                }\r
            }\r
        }\r
        return changes;\r
    },\r
\r
    onAfterRender: function () {\r
        this.onRefresh();\r
    }\r
\r
});