add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / column3d / Stacked.js

/**\r
 * Stacked 3D columns are column charts where categories are stacked on top of each other.\r
 * This is typically done to visually represent the total of all categories\r
 * for a given period or value.\r
 */\r
Ext.define('KitchenSink.view.charts.column3d.Stacked', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'column-stacked-3d',\r
    controller: 'column-stacked-3d',\r
    //<example>\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/column3d/StackedController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/EconomySectors.js'\r
    }],\r
    //</example>\r
\r
    requires: [\r
        'Ext.chart.CartesianChart',\r
        'Ext.chart.axis.Numeric',\r
        'Ext.chart.axis.Time',\r
        'Ext.draw.modifier.Highlight',\r
        'Ext.chart.interactions.ItemHighlight',\r
        'Ext.chart.theme.*'\r
    ],\r
\r
    layout: 'vbox',\r
    width: 650,\r
\r
    tbar: [\r
        '->',\r
        {\r
            text: 'Switch Theme',\r
            handler: 'onThemeSwitch'\r
        },\r
        {\r
            xtype: 'segmentedbutton',\r
            width: 200,\r
            items: [{\r
                text: 'Stack',\r
                pressed: true\r
            }, {\r
                text: 'Group'\r
            }],\r
            listeners: {\r
                toggle: 'onStackedToggle'\r
            }\r
        }\r
    ],\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
        store: {type: 'economy-sectors'},\r
        theme: 'Muted',\r
        insetPadding: '40 20 10 20',\r
        width: '100%',\r
        height: 500,\r
        interactions: ['itemhighlight'],\r
        series: {\r
            type: 'bar3d',\r
            xField: 'country',\r
            yField: ['agr', 'ind', 'ser'],\r
            title: ['Agriculture', 'Industry', 'Services'],\r
            style: {\r
                maxBarWidth: 80\r
            },\r
            highlight: true,\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onTooltipRender'\r
            }\r
        },\r
        legend: {\r
            docked: 'bottom'\r
        },\r
        axes: [{\r
            type: 'numeric3d',\r
            position: 'left',\r
            grid: {\r
                odd: {\r
                    fillStyle: 'rgba(255, 255, 255, 0.06)'\r
                },\r
                even: {\r
                    fillStyle: 'rgba(0, 0, 0, 0.03)'\r
                }\r
            },\r
            title: 'Billions of USD',\r
            renderer: 'onAxisLabelRender',\r
            listeners: {\r
                rangechange: 'onAxisRangeChange'\r
            }\r
        }, {\r
            type: 'category3d',\r
            position: 'bottom',\r
            grid: true\r
        }],\r
        sprites: {\r
            type: 'text',\r
            text: 'Major economies by GDP sector composition (2011)',\r
            fontSize: 22,\r
            width: 100,\r
            height: 30,\r
            x: 40,\r
            y: 20\r
        }\r
    }, {\r
        xtype: 'container',\r
        width: '100%',\r
        padding: 10,\r
        layout: {\r
            type: 'hbox',\r
            pack: 'center'\r
        },\r
        items: {\r
            xtype: 'form',\r
            defaults: {\r
                labelAlign: 'right',\r
                labelPad: 15,\r
                width: 400\r
            },\r
            items: [{\r
                xtype: 'sliderfield',\r
                fieldLabel: 'Saturation',\r
                value: 1,\r
                maxValue: 1.5,\r
                increment: 0.05,\r
                decimalPrecision: 2,\r
                listeners: {\r
                    change: 'onSaturationChange',\r
                    dragstart: 'onSliderDragStart',\r
                    dragend: 'onSliderDragEnd'\r
                }\r
            }, {\r
                xtype: 'sliderfield',\r
                fieldLabel: 'Brightness',\r
                value: 1,\r
                maxValue: 1.5,\r
                increment: 0.05,\r
                decimalPrecision: 2,\r
                listeners: {\r
                    change: 'onBrightnessChange',\r
                    dragstart: 'onSliderDragStart',\r
                    dragend: 'onSliderDragEnd'\r
                }\r
            }, {\r
                xtype: 'sliderfield',\r
                fieldLabel: 'Color Spread',\r
                value: 1,\r
                maxValue: 1.5,\r
                increment: 0.05,\r
                decimalPrecision: 2,\r
                listeners: {\r
                    change: 'onColorSpreadChange',\r
                    dragstart: 'onSliderDragStart',\r
                    dragend: 'onSliderDragEnd'\r
                }\r
            }]\r
        }\r
    }]\r
\r
});\r