Ext.define('saas.view.home.charts.MonthPurchase', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-purchase',

    requires: [
        'Ext.chart.CartesianChart',
        'Ext.chart.axis.Category',
        'Ext.chart.axis.Numeric',
        'Ext.chart.interactions.PanZoom',
        'Ext.chart.series.Bar'
    ],

    id: 'month-purchase',

    iconCls: 'x-fa fa-bar-chart',

    bind: {
        title: '本月采购额（万元）：{month_purchase_amount}',
    },

    items: [{
        xtype: 'cartesian',
        colors: [
            '#34BAF6'
        ],
        bind: '{month_purchase}',
        axes: [{
            type: 'category',
            fields: [
                'x'
            ],
            hidden: true,
            position: 'bottom'
        },{
            type: 'numeric',
            fields: [
                'y'
            ],
            grid: {
                odd: {
                    fill: '#e8e8e8'
                }
            },
            hidden: true,
            position: 'left'
        }],
        series: [{
            type: 'bar',
            xField: 'x',
            yField: [
                'y'
            ]
        }],
        platformConfig: {
            phone: {
                // On a phone the whole view becomes a vertical strip of charts,
                // which makes it impossible to scroll the view if touch action
                // started on a chart. So we use a custom touchAction config.
                touchAction: {
                    panX: true,
                    panY: true
                }
            },
            '!phone': {
                interactions: {
                    type: 'panzoom',
                    zoomOnPanGesture: true
                }
            }
        }
    }]
});