add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / charts / combination / Pareto.js

/**\r
 * Pareto chart, named after Vilfredo Pareto, is a chart that contains both column and\r
 * line chart. Individual values are represented in descending order by bars, and the\r
 * cumulative total is represented by the line.\r
 */\r
Ext.define('KitchenSink.view.charts.combination.Pareto', {\r
    extend: 'Ext.Panel',\r
    requires: 'Ext.chart.theme.Category2',\r
    xtype: 'combination-pareto',\r
    controller: 'combination-pareto',\r
\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/combination/ParetoController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/Pareto.js'\r
    }],\r
    // </example>\r
    width: 650,\r
\r
    dockedItems: [{\r
        xtype: 'toolbar',\r
        dock: 'top',\r
        items: [\r
            '->',\r
            {\r
                text: Ext.os.is.Desktop ? 'Download' : 'Preview',\r
                handler: 'onDownload'\r
            }]\r
    }],\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
        theme: 'category2',\r
        width: '100%',\r
        height: 500,\r
        store: {\r
            type: 'pareto'\r
        },\r
        insetPadding: '40 40 20 40',\r
        legend: {\r
            docked: 'bottom'\r
        },\r
        sprites: [{\r
            type: 'text',\r
            text: 'Restaurant Complaints by Reported Cause',\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: Restaurant Complaints',\r
            font: '10px Helvetica',\r
            x: 12,\r
            y: 480\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            fields: ['count'],\r
            majorTickSteps: 10,\r
            reconcileRange: true,\r
            grid: true,\r
            minimum: 0\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            fields: 'complaint',\r
            label: {\r
                rotate: {\r
                    degrees: -45\r
                }\r
            }\r
        }, {\r
            type: 'numeric',\r
            position: 'right',\r
            fields: ['cumnumber'],\r
            reconcileRange: true,\r
            majorTickSteps: 10,\r
            renderer: 'onAxisLabelRender'\r
        }],\r
        series: [{\r
            type: 'bar',\r
            title: 'Causes',\r
            xField: 'complaint',\r
            yField: 'count',\r
            style: {\r
                opacity: 0.80\r
            },\r
            highlight: {\r
                fillStyle: 'rgba(204, 230, 73, 1.0)',\r
                strokeStyle: 'black'\r
            },\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onBarSeriesTooltipRender'\r
            }\r
        }, {\r
            type: 'line',\r
            title: 'Cumulative %',\r
            xField: 'complaint',\r
            yField: 'cumnumber',\r
            style: {\r
                lineWidth: 2,\r
                opacity: 0.80\r
            },\r
            marker: {\r
                type: 'cross',\r
                fx: {\r
                    duration: 200\r
                }\r
            },\r
            highlightCfg: {\r
                scaling: 2,\r
                rotationRads: Math.PI / 4\r
            },\r
            tooltip: {\r
                trackMouse: true,\r
                renderer: 'onLineSeriesTooltipRender'\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: 'Complaint', dataIndex: 'complaint', width: 175 },\r
                { text: 'Count', dataIndex: 'count' },\r
                { text: 'Cumulative', dataIndex: 'cumnumber' },\r
                { text: 'Cumulative %', dataIndex: 'cumpercent', width: 175, renderer: 'onPercentRender' }\r
            ]\r
        },\r
        store: {\r
            type: 'pareto'\r
        },\r
        width: '100%'\r
        //</example>\r
    }]\r
\r
});\r