add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / modern / src / view / chart / ColumnController.js

Ext.define('KitchenSink.view.chart.BasicController', {\r
    extend: 'Ext.app.ViewController',\r
    alias: 'controller.column-chart',\r
\r
    onDownload: function() {\r
        var chart = this.lookupReference('chart');\r
        if (Ext.os.is.Desktop) {\r
            chart.download({\r
                filename: 'Redwood City Climate Data Chart'\r
            });\r
        } else {\r
            chart.preview();\r
        }\r
    },\r
\r
    onReloadData: function() {\r
        var chart = this.lookupReference('chart');\r
        chart.getStore().refreshData();\r
    },\r
\r
    // The 'target' here is an object that contains information\r
    // about the target value when the drag operation on the column ends.\r
    onEditTipRender: function (tooltip, item, target, e) {\r
        tooltip.setHtml('Temperature °F: ' + target.yValue.toFixed(1));\r
    },\r
\r
    onColumnEdit: function (chart, data) {\r
        var threshold = 65,\r
            delta = 20,\r
            yValue = data.target.yValue,\r
            coldness;\r
\r
        if (yValue < threshold) {\r
            coldness = Ext.Number.constrain((threshold - yValue) / delta, 0, 1);\r
            return {\r
                fillStyle: 'rgba(133, 231, 252, ' + coldness.toString() + ')'\r
            };\r
        } else {\r
            return {\r
                fillStyle: 'none'\r
            };\r
        }\r
    },\r
\r
    onInitialize: function () {\r
        Ext.Viewport.on('orientationchange', this.updateChartTitle, this);\r
        this.updateChartTitle();\r
    },\r
\r
    updateChartTitle: function (viewport, orientation, width, height) {\r
        var chart = this.lookupReference('chart'),\r
            chartSurface = chart.getSurface('chart'),\r
            title = chartSurface.getItems()[0];\r
\r
        width = width || Ext.Viewport.getWindowWidth();\r
\r
        title.setAttributes({\r
            hidden: width < 500\r
        });\r
    },\r
\r
    onAfterRender: function () {\r
        var me = this,\r
            chart = this.lookupReference('chart'),\r
            axis = chart.getAxis(0),\r
            store = chart.getStore();\r
\r
        function onAxisRangeChange() {\r
            me.onAxisRangeChange(axis);\r
        }\r
\r
        store.on({\r
            datachanged: onAxisRangeChange,\r
            update: onAxisRangeChange\r
        });\r
    },\r
\r
    onAxisRangeChange: function (axis, range) {\r
        // this.lookupReference('chart') will fail here,\r
        // as at the time of this call\r
        // the chart is not yet in the component tree,\r
        // so we have to use axis.getChart() instead.\r
        var chart = axis.getChart(),\r
            store = chart.getStore(),\r
            sum = 0,\r
            mean;\r
\r
        store.each(function (rec) {\r
            sum += rec.get('highF');\r
        });\r
\r
        mean = sum / store.getCount();\r
\r
        axis.setLimits({\r
            value: mean,\r
            line: {\r
                title: {\r
                    text: 'Average high: ' + mean.toFixed(2) + '°F'\r
                },\r
                lineDash: [2,2]\r
            }\r
        });\r
    },\r
\r
    itemAnimationDuration: 0,\r
\r
    // Disable item's animaton for editing.\r
    onBeginItemEdit: function (chart, interaction, item) {\r
        var itemsMarker = item.sprite.getMarker(item.category),\r
            fx = itemsMarker.getTemplate().fx; // animation modifier\r
\r
        this.itemAnimationDuration = fx.getDuration();\r
        fx.setDuration(0);\r
    },\r
\r
    // Restore item's animation when editing is done.\r
    onEndItemEdit: function (chart, interaction, item, target) {\r
        var itemsMarker = item.sprite.getMarker(item.category),\r
            fx = itemsMarker.getTemplate().fx;\r
\r
        fx.setDuration(this.itemAnimationDuration);\r
    }\r
\r
});