X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/sandbox/sandbox.js

diff --git a/examples/sandbox/sandbox.js b/examples/sandbox/sandbox.js
new file mode 100644
index 00000000..fd639ed9
--- /dev/null
+++ b/examples/sandbox/sandbox.js
@@ -0,0 +1,383 @@
+Ext4.onReady(function() {
+    var memoryArray,
+        processArray,
+        colors,
+        memoryStore,
+        processesMemoryStore,
+        cpuLoadStore,
+        data,
+        memoryPieChartConfig,
+        barChartConfig,
+        cpuLoadChartConfig,
+        cpuLoadChartConfig2,
+        win,
+        cpuLoadTimer, pass;
+
+    memoryArray = ['Wired', 'Active', 'Inactive', 'Free'];
+    processArray = ['explorer', 'monitor', 'charts', 'desktop', 'Ext3', 'Ext4'];
+    colors = ['rgb(244, 16, 0)',
+              'rgb(248, 130, 1)',
+              'rgb(0, 7, 255)',
+              'rgb(84, 254, 0)'];
+
+    Ext4.chart.theme.Memory = Ext4.extend(Ext4.chart.theme.Base, {
+        constructor: function(config) {
+            Ext4.chart.theme.Base.prototype.constructor.call(this, Ext4.apply({
+                colors: colors
+            }, config));
+        }
+    });
+
+    function generateData(a) {
+        var data = [],
+            i,
+            names = a,
+            rest = a.length, total = rest, consume;
+        for (i = 0; i < a.length; i++) {
+            consume = Math.floor(Math.random() * rest * 100) / 100 + 2;
+            rest = rest - (consume - 5);
+            data.push({
+                name: names[i],
+                memory: consume
+            });
+        }
+
+        return data;
+    }
+
+    memoryStore = Ext4.create('store.json', {
+        fields: ['name', 'memory'],
+        data: generateData(memoryArray)
+    });
+
+    processesMemoryStore = Ext4.create('store.json', {
+        fields: ['name', 'memory'],
+        data: generateData(processArray)
+    });
+
+    cpuLoadStore = Ext4.create('store.json', { fields: ['core1', 'core2'] });
+
+    data = [];
+
+    function generateCpuLoad() {
+        function generate(factor) {
+            var value = factor + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 9);
+
+            if (value < 0 || value > 100) {
+                value = 50;
+            }
+
+            return value;
+        }
+
+        if (data.length === 0) {
+            data.push({
+                core1: 0,
+                core2: 0,
+                time: 0
+            });
+
+            for (var i = 1; i < 100; i++) {
+                data.push({
+                    core1: generate(data[i - 1].core1),
+                    core2: generate(data[i - 1].core2),
+                    time: i
+                });
+            }
+
+            cpuLoadStore.loadData(data);
+        }
+        else {
+            cpuLoadStore.data.removeAt(0);
+            cpuLoadStore.data.each(function(item, key) {
+                item.data.time = key;
+            });
+
+            var lastData = cpuLoadStore.last().data;
+            cpuLoadStore.loadData([{
+                core1: generate(lastData.core1),
+                core2: generate(lastData.core2),
+                time: lastData.time + 1
+            }], true);
+        }
+
+    }
+
+    generateCpuLoad();
+
+    memoryPieChartConfig = {
+        flex: 1,
+        xtype: 'chart',
+        animate: {
+            duration: 250
+        },
+        store: memoryStore,
+        shadow: true,
+
+        legend: {
+            position: 'right'
+        },
+        insetPadding: 40,
+        theme: 'Memory:gradients',
+        series: [{
+            donut: 30,
+            type: 'pie',
+            field: 'memory',
+            showInLegend: true,
+            tips: {
+                trackMouse: true,
+                width: 140,
+                height: 28,
+                renderer: function(storeItem, item) {
+                    //calculate percentage.
+                    var total = 0;
+                    memoryStore.each(function(rec) {
+                        total += rec.get('memory');
+                    });
+                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('memory') / total * 100) + '%');
+                }
+            },
+            highlight: {
+                segment: {
+                    margin: 20
+                }
+            },
+            labelTitle: {
+                font: '13px Arial'
+            },
+            label: {
+                field: 'name',
+                display: 'rotate',
+                contrast: true,
+                font: '12px Arial'
+            }
+        }]
+    };
+
+    barChartConfig = {
+        flex: 1,
+        xtype: 'chart',
+        theme: 'Category1',
+        store: processesMemoryStore,
+        animate: {
+            easing: 'ease-in-out',
+            duration: 750
+        },
+        axes: [{
+            type: 'Numeric',
+            position: 'left',
+            minimum: 0,
+            maximum: 10,
+            fields: ['memory'],
+            title: 'Memory',
+            labelTitle: {
+                font: '13px Arial'
+            },
+            label: {
+                font: '11px Arial'
+            }
+        },{
+            type: 'Category',
+            position: 'bottom',
+            fields: ['name'],
+            title: 'System Processes',
+            labelTitle: {
+                font: 'bold 14px Arial'
+            },
+            label: {
+                rotation: {
+                    degrees: 45
+                }
+            }
+        },{
+            type: 'Numeric',
+            position: 'top',
+            fields: ['memory'],
+            title: 'Memory Usage',
+            labelTitle: {
+                font: 'bold 14px Arial'
+            },
+            label: {
+                fill: '#FFFFFF',
+                stroke: '#FFFFFF'
+            },
+            axisStyle: {
+                fill: '#FFFFFF',
+                stroke: '#FFFFFF'
+            }
+        }],
+        series: [{
+            title: 'Processes',
+            type: 'column',
+            xField: 'name',
+            yField: 'memory',
+            renderer: function(sprite, record, attr, index, store) {
+                var highColor = Ext4.draw.Color.fromString('#e84b67'),
+                    lowColor = Ext4.draw.Color.fromString('#b1da5a'),
+                    value = record.get('memory'),
+                    color;
+
+                if (value > 5) {
+                    color = lowColor.getDarker((value - 5) / 15).toString();
+                }
+                else {
+                    color = lowColor.getLighter(((5 - value) / 20)).toString();
+                }
+
+                if (value >= 8) {
+                    color = '#CD0000';
+                }
+
+                return Ext.apply(attr, {
+                    fill: color
+                });
+            }
+        }]
+    };
+
+    cpuLoadChartConfig = {
+        flex: 1,
+        xtype: 'chart',
+        theme: 'Category1',
+        animate: false,
+        store: cpuLoadStore,
+        legend: {
+            position: 'bottom'
+        },
+        axes: [{
+            type: 'Numeric',
+            position: 'left',
+            minimum: 0,
+            maximum: 100,
+            fields: ['core1'],
+            title: 'CPU Load',
+            grid: true,
+            labelTitle: {
+                font: '13px Arial'
+            },
+            label: {
+                font: '11px Arial'
+            }
+        }],
+        series: [{
+            title: 'Core 1 (3.4GHz)',
+            type: 'line',
+            lineWidth: 4,
+            showMarkers: false,
+            fill: true,
+            axis: 'right',
+            xField: 'time',
+            yField: 'core1',
+            style: {
+                'stroke-width': 1
+            }
+        }]
+    };
+
+    cpuLoadChartConfig2 = {
+        flex: 1,
+        xtype: 'chart',
+        theme: 'Category2',
+        animate: false,
+        store: cpuLoadStore,
+        legend: {
+            position: 'bottom'
+        },
+        axes: [{
+            type: 'Numeric',
+            position: 'left',
+            minimum: 0,
+            maximum: 100,
+            grid: true,
+            fields: ['core2'],
+            title: 'CPU Load',
+            labelTitle: {
+                font: '13px Arial'
+            },
+            label: {
+                font: '11px Arial'
+            }
+        }],
+        series: [{
+            title: 'Core 2 (3.4GHz)',
+            type: 'line',
+            lineWidth: 4,
+            showMarkers: false,
+            fill: true,
+            axis: 'right',
+            xField: 'time',
+            yField: 'core2',
+            style: {
+                'stroke-width': 1
+            }
+        }]
+    };
+
+    win = Ext4.createWidget('window', {
+        x: 90,
+        y: 50,
+        width: 800,
+        height: 600,
+        title: 'System Statistics',
+        renderTo: Ext4.getBody(),
+        closeAction: 'hide',
+        layout: 'fit',
+        items: [{
+            xtype: 'panel',
+            layout: {
+                type: 'hbox',
+                align: 'stretch'
+            },
+            items: [{
+                flex: 1,
+                height: 600,
+                width: 400,
+                xtype: 'container',
+                layout: {
+                    type: 'vbox',
+                    align: 'stretch'
+                },
+                items: [
+                    cpuLoadChartConfig,
+                    cpuLoadChartConfig2
+                ]
+            }, {
+                flex: 1,
+                width: 400,
+                height: 600,
+                xtype: 'container',
+                layout: {
+                    type: 'vbox',
+                    align: 'stretch'
+                },
+                items: [
+                    memoryPieChartConfig,
+                    barChartConfig
+                ]
+            }]
+        }]
+    });
+
+    pass = 0;
+    function doGenerateCpuLoad() {
+        clearTimeout(cpuLoadTimer);
+        cpuLoadTimer = setTimeout(function() {
+            if (pass % 3 === 0) {
+                memoryStore.loadData(generateData(memoryArray));
+            }
+
+            if (pass % 5 === 0) {
+                processesMemoryStore.loadData(generateData(processArray));
+            }
+
+            generateCpuLoad();
+            doGenerateCpuLoad();
+            pass++;
+        }, 500);
+    }
+
+    Ext.get('chart-win-shortcut').on('click', function() {
+        doGenerateCpuLoad();
+        win.show();
+    });
+});