add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / charts / line / RealTimeController.js

Ext.define('KitchenSink.view.charts.line.RealTimeController', {\r
    extend: 'Ext.app.ViewController',\r
    alias: 'controller.line-real-time',\r
\r
    onTimeChartRendered: function (chart) {\r
        chart.getStore().removeAll();\r
        this.addNewTimeData();\r
        this.timeChartTask = Ext.TaskManager.start({\r
            run: this.addNewTimeData,\r
            interval: 1000,\r
            repeat: 120,\r
            scope: this\r
        });\r
    },\r
\r
    onAxisLabelRender: function (axis, label, layoutContext) { // only render interger values\r
        return Math.abs(layoutContext.renderer(label) % 1) < 1e-5 ? Math.round(label) : '';\r
    },\r
\r
    onTimeChartDestroy: function () {\r
        if (this.timeChartTask) {\r
            Ext.TaskManager.stop(this.timeChartTask);\r
        }\r
    },\r
\r
    onNumberChartRendered: function (chart) {\r
        chart.getStore().removeAll();\r
        this.addNewNumberData();\r
        this.numberChartTask = Ext.TaskManager.start({\r
            run: this.addNewNumberData,\r
            interval: 1000,\r
            repeat: 240,\r
            scope: this\r
        });\r
    },\r
\r
    onNumberChartDestroy: function () {\r
        if (this.numberChartTask) {\r
            Ext.TaskManager.stop(this.numberChartTask);\r
        }\r
    },\r
\r
    onTabChange: function (tabPanel, newCard, oldCard) {\r
        if (newCard.getItemId() === 'numeric') {\r
            Ext.TaskManager.stop(this.timeChartTask);\r
            Ext.TaskManager.start(this.numberChartTask);\r
        } else {\r
            Ext.TaskManager.stop(this.numberChartTask);\r
            Ext.TaskManager.start(this.timeChartTask);\r
        }\r
    },\r
\r
    getNextValue: function (previousValue, min, max, delta) {\r
        delta = delta || 3;\r
        min = min || 0;\r
        max = max || 20;\r
\r
        delta = Ext.Number.randomInt(-delta, delta);\r
\r
        if (Ext.isNumber(previousValue)) {\r
            return Ext.Number.constrain(previousValue + delta, min, max);\r
        }\r
        return Ext.Number.randomInt(min, max);\r
    },\r
\r
    addNewTimeData: function() {\r
        var me = this,\r
            chart = me.lookupReference('time-chart'),\r
            store = chart.getStore(),\r
            count = store.getCount(),\r
            xAxis = chart.getAxes()[1],\r
            visibleRange = 10000,\r
            second = 1000,\r
            xValue, lastRecord;\r
\r
        if (count > 0) {\r
            lastRecord = store.getAt(count - 1);\r
            xValue = lastRecord.get('xValue') + second;\r
            if (xValue - me.startTime > visibleRange) {\r
                me.startTime = xValue - visibleRange;\r
                xAxis.setMinimum(this.startTime);\r
                xAxis.setMaximum(xValue);\r
            }\r
            store.add({\r
                xValue: xValue,\r
                metric1: me.getNextValue(lastRecord.get('metric1')),\r
                metric2: me.getNextValue(lastRecord.get('metric2'))\r
            });\r
\r
        } else {\r
            chart.animationSuspended = true;\r
            me.startTime = Math.floor(Ext.Date.now() / second) * second;\r
            xAxis.setMinimum(me.startTime);\r
            xAxis.setMaximum(me.startTime + visibleRange);\r
\r
            store.add({\r
                xValue: this.startTime,\r
                metric1: me.getNextValue(),\r
                metric2: me.getNextValue()\r
            });\r
            chart.animationSuspended = false;\r
        }\r
    },\r
\r
    addNewNumberData: function() {\r
        var chart = this.lookupReference('number-chart'),\r
            store = chart.getStore(),\r
            count = store.getCount(),\r
            xAxis = chart.getAxes()[1],\r
            visibleRange = 20,\r
            minY = 0,\r
            maxY = 100,\r
            deltaY = 5,\r
            xValue, lastRecord;\r
\r
        if (count > 0) {\r
            lastRecord = store.getAt(count - 1);\r
            xValue = lastRecord.get('xValue') + 1;\r
            if (xValue > visibleRange) {\r
                xAxis.setMinimum(xValue - visibleRange);\r
                xAxis.setMaximum(xValue);\r
            }\r
            store.add({\r
                xValue: xValue,\r
                yValue: this.getNextValue(lastRecord.get('yValue'), minY, maxY, deltaY)\r
            });\r
\r
        } else {\r
            chart.animationSuspended = true;\r
            xAxis.setMinimum(0);\r
            xAxis.setMaximum(visibleRange);\r
\r
            store.add({\r
                xValue: 0,\r
                yValue: this.getNextValue((minY + maxY) / 2, minY, maxY)\r
            });\r
            chart.animationSuspended = false;\r
        }\r
    }\r
\r
});