add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / modern / src / view / chart / LineWithRenderer.js

/**\r
 * Demonstrates how to use Ext.chart.series.Line with a renderer function\r
 */\r
Ext.define('KitchenSink.view.chart.LineWithRenderer', {\r
    extend: 'Ext.Panel',\r
    requires: [\r
        'Ext.chart.CartesianChart', \r
        'Ext.chart.series.Line', \r
        'Ext.chart.axis.Numeric', \r
        'Ext.draw.modifier.Highlight',\r
        'Ext.chart.axis.Time', \r
        'Ext.chart.interactions.ItemHighlight'\r
    ],\r
\r
    layout: 'fit',\r
    items: [{\r
        xtype: 'toolbar',\r
        docked: 'top',\r
        cls: 'charttoolbar',\r
        items: [{\r
            xtype: 'spacer'\r
        }, {\r
            iconCls: 'x-fa fa-refresh',\r
            text: 'Refresh',\r
            handler: function(a, b, c, d, e) {\r
                Ext.getStore('Pie').generateData(10);\r
            }\r
        }]\r
    }, {\r
        xtype: 'cartesian',\r
        store: 'Pie',\r
        background: 'white',\r
        series: [{\r
            type: 'line',\r
            xField: 'name',\r
            yField: 'g1',\r
            style: {\r
                strokeStyle: 'powderblue',\r
                fillStyle: 'aliceblue',\r
                lineWidth: 4\r
            },\r
            marker: {\r
                type: 'circle',\r
                fillStyle: 'yellow',\r
                radius: 10\r
            },\r
            renderer: function(sprite, config, rendererData, index) {\r
                var store = rendererData.store,\r
                    storeItems = store.getData().items,\r
                    currentRecord = storeItems[index],\r
                    previousRecord = (index > 0 ? storeItems[index - 1] : currentRecord),\r
                    current = currentRecord && currentRecord.data['g1'],\r
                    previous = previousRecord && previousRecord.data['g1'],\r
                    changes = {};\r
\r
                switch (config.type) {\r
                    case 'marker':\r
                        if (index == 0) {\r
                            return null; // keep the default style for the first marker\r
                        }\r
                        changes.strokeStyle = (current >= previous ? 'green' : 'red');\r
                        changes.fillStyle = (current >= previous ? 'palegreen' : 'lightpink');\r
                        changes.lineWidth = 2;\r
                        break;\r
                    case 'line':\r
                        changes.strokeStyle = (current >= previous ? 'green' : 'red');\r
                        changes.fillStyle = (current >= previous ? 'palegreen' : 'tomato');\r
                        changes.fillOpacity = .1;\r
                        break;\r
                }\r
                return changes;\r
            }\r
\r
\r
\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            fields: ['g1'],\r
            minimum: 0\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            fields: 'name'\r
        }]\r
    }],\r
\r
    initialize: function() {\r
        this.callParent();\r
        Ext.getStore('Pie').generateData(10);\r
    }\r
});