Ext.define('TP.PanletPieChart', {
    extend: 'TP.Panlet',

    title:  'chart',
    width:  200,
    height: 200,
    initComponent: function() {
        this.callParent();

        this.pieStore = Ext.create('Ext.data.Store', {
            fields: ['name','data'],
            data:  [{name:' ', data: 100}]
        });

        this.loader = {
            autoLoad: false,
            renderer: 'data',
            scope:    this,
            url:      '',
            ajaxOptions: { method: 'POST' },
            loading:  false,
            listeners: {
                'beforeload': function(This, options, eOpts) {
                    if(this.loading) {
                        return false;
                    }
                    this.loading = true;
                    return true;
                }
            },
            callback: function(This, success, response, options) {
                This.loading = false;
                var data = TP.getResponse(this, response);
                if(data) {
                    var fields = [];
                    for(key in data.columns) {
                        fields.push(data.columns[key].dataIndex);
                    }
                    this.pieStore = Ext.create('Ext.data.Store', {
                        data:  {'items': data.data },
                        fields: fields,
                        proxy: {
                            type: 'memory',
                            reader: {
                                type: 'json',
                                root: 'items'
                            }
                        }
                    });
                    this.chart.series.getAt(0).colorSet = data.colors;
                    this.chart.bindStore(this.pieStore);
                }
            }
        };

        this.chart = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            animate: true,
            store: this.pieStore,
            shadow: true,
            legend: false,
            insetPadding: 3,
            style: 'background-color: white;',
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data',
                showInLegend: true,
                colorSet: [ '#00FF00' ],
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        var total = 0;
                        storeItem.store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + ' :' + storeItem.get('data') + ' (' + Math.round(storeItem.get('data') / total * 100) + '%)');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '14px Arial'
                }
            }]
        });
        this.add(this.chart);

        this.refreshHandler = function() {
            TP.defaultSiteRefreshHandler(this);
        };
        this.addListener('afterrender', function() {
            this.refreshHandler();
        });
    }
});
