X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/desktop/SystemStatus.js diff --git a/examples/desktop/SystemStatus.js b/examples/desktop/SystemStatus.js new file mode 100644 index 00000000..f1fe3989 --- /dev/null +++ b/examples/desktop/SystemStatus.js @@ -0,0 +1,425 @@ +/*! +* Ext JS Library 4.0 +* Copyright(c) 2006-2011 Sencha Inc. +* licensing@sencha.com +* http://www.sencha.com/license +*/ + +Ext.define('MyDesktop.SystemStatus', { + extend: 'Ext.ux.desktop.Module', + + requires: [ + 'Ext.chart.*' + ], + + id: 'systemstatus', + + init : function() { + // No launcher means we don't appear on the Start Menu... +// this.launcher = { +// text: 'SystemStatus', +// iconCls:'cpustats', +// handler : this.createWindow, +// scope: this +// }; + + Ext.chart.theme.Memory = Ext.extend(Ext.chart.theme.Base, { + constructor: function(config) { + Ext.chart.theme.Memory.superclass.constructor.call(this, Ext.apply({ + colors: [ 'rgb(244, 16, 0)', + 'rgb(248, 130, 1)', + 'rgb(0, 7, 255)', + 'rgb(84, 254, 0)'] + }, config)); + } + }); + }, + + createNewWindow: function () { + var me = this, + desktop = me.app.getDesktop(); + + me.cpuLoadData = []; + me.cpuLoadStore = Ext.create('store.json', { + fields: ['core1', 'core2'] + }); + + me.memoryArray = ['Wired', 'Active', 'Inactive', 'Free']; + me.memoryStore = Ext.create('store.json', { + fields: ['name', 'memory'], + data: me.generateData(me.memoryArray) + }); + + me.pass = 0; + me.processArray = ['explorer', 'monitor', 'charts', 'desktop', 'Ext3', 'Ext4']; + me.processesMemoryStore = Ext.create('store.json', { + fields: ['name', 'memory'], + data: me.generateData(me.processArray) + }); + + me.generateCpuLoad(); + + return desktop.createWindow({ + id: 'systemstatus', + title: 'System Status', + width: 800, + height: 600, + animCollapse:false, + constrainHeader:true, + border: false, + layout: 'fit', + listeners: { + afterrender: { + fn: me.updateCharts, + delay: 100 + }, + destroy: function () { + clearTimeout(me.updateTimer); + me.updateTimer = null; + }, + scope: me + }, + items: [{ + xtype: 'panel', + layout: { + type: 'hbox', + align: 'stretch' + }, + items: [{ + flex: 1, + height: 600, + width: 400, + xtype: 'container', + layout: { + type: 'vbox', + align: 'stretch' + }, + items: [ + me.createCpu1LoadChart(), + me.createCpu2LoadChart() + ] + }, { + flex: 1, + width: 400, + height: 600, + xtype: 'container', + layout: { + type: 'vbox', + align: 'stretch' + }, + items: [ + me.createMemoryPieChart(), + me.createProcessChart() + ] + }] + }] + }); + }, + + createWindow : function() { + var win = this.app.getDesktop().getWindow(this.id); + if (!win) { + win = this.createNewWindow(); + } + win.show(); + return win; + }, + + createCpu1LoadChart: function () { + return { + flex: 1, + xtype: 'chart', + theme: 'Category1', + animate: false, + store: this.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 + } + }] + }; + }, + + createCpu2LoadChart: function () { + return { + flex: 1, + xtype: 'chart', + theme: 'Category2', + animate: false, + store: this.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 + } + }] + }; + }, + + createMemoryPieChart: function () { + var me = this; + + return { + flex: 1, + xtype: 'chart', + animate: { + duration: 250 + }, + store: this.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; + me.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' + } + }] + }; + }, + + createProcessChart: function () { + return { + flex: 1, + xtype: 'chart', + theme: 'Category1', + store: this.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 lowColor = Ext.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 + }); + } + }] + }; + }, + + generateCpuLoad: function () { + var me = this, + data = me.cpuLoadData; + + 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 + }); + } + + me.cpuLoadStore.loadData(data); + } else { + me.cpuLoadStore.data.removeAt(0); + me.cpuLoadStore.data.each(function(item, key) { + item.data.time = key; + }); + + var lastData = me.cpuLoadStore.last().data; + me.cpuLoadStore.loadData([{ + core1: generate(lastData.core1), + core2: generate(lastData.core2), + time: lastData.time + 1 + }], true); + } + + }, + + generateData: function (names) { + var data = [], + i, + rest = names.length, consume; + + for (i = 0; i < names.length; i++) { + consume = Math.floor(Math.random() * rest * 100) / 100 + 2; + rest = rest - (consume - 5); + data.push({ + name: names[i], + memory: consume + }); + } + + return data; + }, + + updateCharts: function () { + var me = this; + clearTimeout(me.updateTimer); + me.updateTimer = setTimeout(function() { + if (me.pass % 3 === 0) { + me.memoryStore.loadData(me.generateData(me.memoryArray)); + } + + if (me.pass % 5 === 0) { + me.processesMemoryStore.loadData(me.generateData(me.processArray)); + } + + me.generateCpuLoad(); + me.updateCharts(); + me.pass++; + }, 500); + } +});