add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / column / Stacked100.js

/**\r
 * 100% stacked 3D columns are column charts where categories are stacked\r
 * on top of each other. The value of each category is recalculated, so that\r
 * it represents a share of the whole, which is the full stack and is equal\r
 * to 100 by default.\r
 */\r
Ext.define('KitchenSink.view.charts.column.Stacked100', {\r
    extend: 'Ext.Panel',\r
    xtype: 'column-stacked-100',\r
    controller: 'column-stacked-100',\r
    requires: ['Ext.chart.theme.Muted'],\r
    // <example>\r
    // Content between example tags is omitted from code preview.\r
    bodyStyle: 'background: transparent !important',\r
    layout: {\r
        type: 'vbox',\r
        pack: 'center'\r
    },\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/column/Stacked100Controller.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/Cars.js'\r
    }],\r
    // </example>\r
\r
    width: 650,\r
\r
    tbar: [\r
        '->',\r
        {\r
            text: 'Preview',\r
            handler: 'onPreview'\r
        }\r
    ],\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
\r
        width: '100%',\r
        height: 460,\r
\r
        legend: {\r
            docked: 'bottom'\r
        },\r
        store: {\r
            type: 'cars'\r
        },\r
        theme: 'Muted',\r
\r
        insetPadding: {\r
            top: 40,\r
            left: 40,\r
            right: 40,\r
            bottom: 40\r
        },\r
        sprites: [{\r
            type: 'text',\r
            text: 'Car production by largest manufacturers',\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: 'Source: International Organization of Motor Vehicle Manufacturers',\r
            fontSize: 10,\r
            x: 12,\r
            y: 395\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            grid: true,\r
            fields: [ 'to', 'gm', 'vw', 'hy', 'fo' ],\r
            renderer: 'onAxisLabelRender'\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            fields: 'year',\r
            label: {\r
                rotate: {\r
                    degrees: -45\r
                }\r
            }\r
        }],\r
        series: [{\r
            type: 'bar',\r
            stacked: true,\r
            fullStack: true,\r
\r
            title: [ 'Toyota', 'GM', 'Volkswagen', 'Hyundai', 'Ford' ],\r
\r
            xField: 'year',\r
            yField: [ 'to', 'gm', 'vw', 'hy', 'fo' ],\r
\r
            style: {\r
                minGapWidth: 30\r
            },\r
            highlight: {\r
                fillStyle: 'yellow'\r
            },\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onBarTipRender'\r
            }\r
        }]\r
        //<example>\r
    }, {\r
        style: 'margin-top: 10px;',\r
        xtype: 'gridpanel',\r
        columns : {\r
            defaults: {\r
                sortable: false,\r
                menuDisabled: true\r
            },\r
            items: [\r
                { text: 'Year', dataIndex: 'year' },\r
                { text: 'Toyota', dataIndex: 'to' },\r
                { text: 'GM', dataIndex: 'gm' },\r
                { text: 'Volkswagen', dataIndex: 'vw' },\r
                { text: 'Hyundai', dataIndex: 'hy' },\r
                { text: 'Ford', dataIndex: 'fo' }\r
            ]\r
        },\r
        store: {\r
            type: 'cars'\r
        },\r
        width: '100%'\r
        //</example>\r
    }]\r
\r
});\r