Ext.define('ExtJS6.view.controller.ChartCtrl', {
    
    extend: 'Ext.app.ViewController',

    alias: 'controller.ChartCtrl',

    onAxisLabelRender: function (axis, label) {
        return label.toFixed(label < 10 ? 1 : 0) + '%';
    },
    
    onSeriesTooltipRender: function (tooltip, record, item) {
        var title = item.series.getTitle();

        tooltip.setHtml(title + ' on ' + record.get('month') + ': ' +
            record.get(item.series.getYField()) + '%');
    },

    onAxisLabelRender2: function (axis, label, layoutContext) {
        return Ext.util.Format.number(label, '0.0');
    },

    onColumnRender: function (v) {
        return v + '%';
    },

    onTimeChartRendered: function (chart) {
        chart.getStore().removeAll();
        this.addNewTimeData();
        this.timeChartTask = Ext.TaskManager.start({
            run: this.addNewTimeData,
            interval: 1000,
            repeat: 120,
            scope: this
        });
    },

    onAxisLabelRender: function (axis, label, layoutContext) { // only render interger values
        return Math.abs(layoutContext.renderer(label) % 1) < 1e-5 ? Math.round(label) : '';
    },

    onAxisLabelRender2: function (axis, label, layoutContext) {
        return layoutContext.renderer(label) + '%';
    },

    onMultiAxisLabelRender: function (axis, label, layoutContext) {
        return label === 'Jan' ? '' : label;
    },

    onSeriesLabelRender: function (tooltip, record, item) {
        tooltip.setHtml(record.get('month') + ': ' + record.get(item.field) + '%');
    },

    onTimeChartDestroy: function () {
        if (this.timeChartTask) {
            Ext.TaskManager.stop(this.timeChartTask);
        }
    },

    onNumberChartRendered: function (chart) {
        chart.getStore().removeAll();
        this.addNewNumberData();
        this.numberChartTask = Ext.TaskManager.start({
            run: this.addNewNumberData,
            interval: 500,
            repeat: 240,
            scope: this
        });
    },

    onNumberChartDestroy: function () {
        if (this.numberChartTask) {
            Ext.TaskManager.stop(this.numberChartTask);
        }
    },

    getNextValue: function (previousValue, min, max, delta) {
        delta = delta || 3;
        min = min || 0;
        max = max || 20;

        delta = Ext.Number.randomInt(-delta, delta);

        if (Ext.isNumber(previousValue)) {
            return Ext.Number.constrain(previousValue + delta, min, max);
        }
        return Ext.Number.randomInt(min, max);
    },

    addNewTimeData: function() {
        var me = this,
            chart = me.lookupReference('time-chart'),
            store = chart.getStore(),
            count = store.getCount(),
            xAxis = chart.getAxes()[1],
            visibleRange = 10000,
            second = 1000,
            xValue, lastRecord;

        if (count > 0) {
            lastRecord = store.getAt(count - 1);
            xValue = lastRecord.get('xValue') + second;
            if (xValue - me.startTime > visibleRange) {
                me.startTime = xValue - visibleRange;
                xAxis.setMinimum(this.startTime);
                xAxis.setMaximum(xValue);
            }
            store.add({
                xValue: xValue,
                metric1: me.getNextValue(lastRecord.get('metric1')),
                metric2: me.getNextValue(lastRecord.get('metric2'))
            });

        } else {
            chart.animationSuspended = true;
            me.startTime = Math.floor(Ext.Date.now() / second) * second;
            xAxis.setMinimum(me.startTime);
            xAxis.setMaximum(me.startTime + visibleRange);

            store.add({
                xValue: this.startTime,
                metric1: me.getNextValue(),
                metric2: me.getNextValue()
            });
            chart.animationSuspended = false;
        }
    },

    addNewNumberData: function() {
        var chart = this.lookupReference('number-chart'),
            store = chart.getStore(),
            count = store.getCount(),
            xAxis = chart.getAxes()[1],
            visibleRange = 20,
            minY = 0,
            maxY = 100,
            deltaY = 5,
            xValue, lastRecord;

        if (count > 0) {
            lastRecord = store.getAt(count - 1);
            xValue = lastRecord.get('xValue') + 1;
            if (xValue > visibleRange) {
                xAxis.setMinimum(xValue - visibleRange);
                xAxis.setMaximum(xValue);
            }
            store.add({
                xValue: xValue,
                yValue: this.getNextValue(lastRecord.get('yValue'), minY, maxY, deltaY)
            });

        } else {
            chart.animationSuspended = true;
            xAxis.setMinimum(0);
            xAxis.setMaximum(visibleRange);

            store.add({
                xValue: 0,
                yValue: this.getNextValue((minY + maxY) / 2, minY, maxY)
            });
            chart.animationSuspended = false;
        }
    },

    onPanZoomReset: function () {
        var chart = this.lookupReference('chart'),
            axes = chart.getAxes();

        axes[0].setVisibleRange([0, 1]);
        axes[1].setVisibleRange([0, 1]);

        chart.redraw();
    },

     onFuelAxisLabelRender: function (axis, label, layoutContext) {
        if (label === 0) return 'E';
        if (label === 25) return '1/4';
        if (label === 50) return '1/2';
        if (label === 75) return '3/4';
        if (label === 100) return 'F';
        return ' ';
    },

    onTempAxisLabelRender: function (axis, label, layoutContext) {
        if (label === 0) return 'Cold';
        if (label === 125) return 'Comfortable';
        if (label === 250) return 'Hot';
        return ' ';
    },

    onRPMAxisLabelRender: function (axis, label, layoutContext) {
        return (label / 10) + 'k';
    },

    onAfterRender: function () {
        var me = this,
            gauges = me.getView().query('polar'),
            i, gauge;

        me.store = Ext.create('Ext.data.JsonStore', {
            fields: ['mph', 'fuel', 'temp', 'rpm' ],
            data: [
                { mph: 65, fuel: 50, temp: 150, rpm: 6000 }
            ]
        });

        for (i = 0; i < gauges.length; i++) {
            gauge = gauges[i];
            gauge.setStore(me.store);
        }
    },

});