add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / pie / Donut.js

/**\r
 * A basic donut chart functions precisely like a pie chart. The only difference is that\r
 * the center is blank. This is typically done to increase the readability of the data\r
 * labels that may be around. The example makes use of two interactions: 'itemhighlight'\r
 * and 'rotate'. To use the first one, hover over or tap on a pie sector. To use the\r
 * second one, click or tap and then drag anywhere on the chart.\r
 */\r
Ext.define('KitchenSink.view.charts.pie.Donut', {\r
    extend: 'Ext.Panel',\r
    xtype: 'pie-donut',\r
    controller: 'pie-basic',\r
\r
    // <example>\r
    // Content between example tags is omitted from code preview.\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/pie/BasicController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/MobileOS.js'\r
    }],\r
    bodyStyle: 'background: transparent !important',\r
    layout: {\r
        type: 'vbox',\r
        pack: 'center'\r
    },\r
    // </example>\r
    width: 650,\r
\r
    tbar: [\r
        '->',\r
        {\r
            text: 'Preview',\r
            handler: 'onPreview'\r
        }\r
    ],\r
\r
    items: [{\r
        xtype: 'polar',\r
        reference: 'chart',\r
        width: '100%',\r
        height: 500,\r
        insetPadding: 50,\r
        innerPadding: 20,\r
        store: {\r
            type: 'mobile-os'\r
        },\r
        legend: {\r
            docked: 'bottom'\r
        },\r
        interactions: ['rotate', 'itemhighlight'],\r
        sprites: [{\r
            type: 'text',\r
            text: 'Donut Charts - Basic',\r
            fontSize: 22,\r
            width: 100,\r
            height: 30,\r
            x: 40, // the sprite x position\r
            y: 20  // the sprite y position\r
        }, {\r
            type: 'text',\r
            text: 'Data: IDC Predictions - 2017',\r
            x: 12,\r
            y: 425\r
        }, {\r
            type: 'text',\r
            text: 'Source: Internet',\r
            x: 12,\r
            y: 440\r
        }],\r
        series: [{\r
            type: 'pie',\r
            angleField: 'data1',\r
            donut: 50,\r
            label: {\r
                field: 'os',\r
                display: 'outside'\r
            },\r
            highlight: true,\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onSeriesTooltipRender'\r
            }\r
        }]\r
        //<example>\r
    }, {\r
        style: 'padding-top: 10px;',\r
        xtype: 'gridpanel',\r
        columns : {\r
            defaults: {\r
                sortable: false,\r
                menuDisabled: true\r
            },\r
            items: [\r
                { text: 'OS', dataIndex: 'os' },\r
                { text: 'Market Share', dataIndex: 'data1', width: 150, renderer: 'onDataRender' }\r
            ]\r
        },\r
        store: {\r
            type: 'mobile-os'\r
        },\r
        width: '100%'\r
        //</example>\r
    }]\r
\r
});\r