examples/desktop/SystemStatus.js

   1 /*!
   2 * Ext JS Library 4.0
   3 * Copyright(c) 2006-2011 Sencha Inc.
   4 * licensing@sencha.com
   5 * http://www.sencha.com/license
   6 */
   7
   8 Ext.define('MyDesktop.SystemStatus', {
   9     extend: 'Ext.ux.desktop.Module',
  10
  11     requires: [
  12         'Ext.chart.*'
  13     ],
  14
  15     id: 'systemstatus',
  16
  17     init : function() {
  18         // No launcher means we don't appear on the Start Menu...
  19 //        this.launcher = {
  20 //            text: 'SystemStatus',
  21 //            iconCls:'cpustats',
  22 //            handler : this.createWindow,
  23 //            scope: this
  24 //        };
  25
  26         Ext.chart.theme.Memory = Ext.extend(Ext.chart.theme.Base, {
  27             constructor: function(config) {
  28                 Ext.chart.theme.Memory.superclass.constructor.call(this, Ext.apply({
  29                     colors: [ 'rgb(244, 16, 0)',
  30                               'rgb(248, 130, 1)',
  31                               'rgb(0, 7, 255)',
  32                               'rgb(84, 254, 0)']
  33                 }, config));
  34             }
  35         });
  36     },
  37
  38     createNewWindow: function () {
  39         var me = this,
  40             desktop = me.app.getDesktop();
  41
  42         me.cpuLoadData = [];
  43         me.cpuLoadStore = Ext.create('store.json', {
  44             fields: ['core1', 'core2']
  45         });
  46
  47         me.memoryArray = ['Wired', 'Active', 'Inactive', 'Free'];
  48         me.memoryStore = Ext.create('store.json', {
  49                 fields: ['name', 'memory'],
  50                 data: me.generateData(me.memoryArray)
  51             });
  52
  53         me.pass = 0;
  54         me.processArray = ['explorer', 'monitor', 'charts', 'desktop', 'Ext3', 'Ext4'];
  55         me.processesMemoryStore = Ext.create('store.json', {
  56             fields: ['name', 'memory'],
  57             data: me.generateData(me.processArray)
  58         });
  59
  60         me.generateCpuLoad();
  61
  62         return desktop.createWindow({
  63             id: 'systemstatus',
  64             title: 'System Status',
  65             width: 800,
  66             height: 600,
  67             animCollapse:false,
  68             constrainHeader:true,
  69             border: false,
  70             layout: 'fit',
  71             listeners: {
  72                 afterrender: {
  73                     fn: me.updateCharts,
  74                     delay: 100
  75                 },
  76                 destroy: function () {
  77                     clearTimeout(me.updateTimer);
  78                     me.updateTimer = null;
  79                 },
  80                 scope: me
  81             },
  82             items: [{
  83                 xtype: 'panel',
  84                 layout: {
  85                     type: 'hbox',
  86                     align: 'stretch'
  87                 },
  88                 items: [{
  89                     flex: 1,
  90                     height: 600,
  91                     width: 400,
  92                     xtype: 'container',
  93                     layout: {
  94                         type: 'vbox',
  95                         align: 'stretch'
  96                     },
  97                     items: [
  98                         me.createCpu1LoadChart(),
  99                         me.createCpu2LoadChart()
 100                     ]
 101                 }, {
 102                     flex: 1,
 103                     width: 400,
 104                     height: 600,
 105                     xtype: 'container',
 106                     layout: {
 107                         type: 'vbox',
 108                         align: 'stretch'
 109                     },
 110                     items: [
 111                         me.createMemoryPieChart(),
 112                         me.createProcessChart()
 113                     ]
 114                 }]
 115             }]
 116         });
 117     },
 118
 119     createWindow : function() {
 120         var win = this.app.getDesktop().getWindow(this.id);
 121         if (!win) {
 122             win = this.createNewWindow();
 123         }
 124         win.show();
 125         return win;
 126     },
 127
 128     createCpu1LoadChart: function () {
 129         return {
 130             flex: 1,
 131             xtype: 'chart',
 132             theme: 'Category1',
 133             animate: false,
 134             store: this.cpuLoadStore,
 135             legend: {
 136                 position: 'bottom'
 137             },
 138             axes: [{
 139                 type: 'Numeric',
 140                 position: 'left',
 141                 minimum: 0,
 142                 maximum: 100,
 143                 fields: ['core1'],
 144                 title: 'CPU Load',
 145                 grid: true,
 146                 labelTitle: {
 147                     font: '13px Arial'
 148                 },
 149                 label: {
 150                     font: '11px Arial'
 151                 }
 152             }],
 153             series: [{
 154                 title: 'Core 1 (3.4GHz)',
 155                 type: 'line',
 156                 lineWidth: 4,
 157                 showMarkers: false,
 158                 fill: true,
 159                 axis: 'right',
 160                 xField: 'time',
 161                 yField: 'core1',
 162                 style: {
 163                     'stroke-width': 1
 164                 }
 165             }]
 166         };
 167     },
 168
 169     createCpu2LoadChart: function () {
 170         return {
 171             flex: 1,
 172             xtype: 'chart',
 173             theme: 'Category2',
 174             animate: false,
 175             store: this.cpuLoadStore,
 176             legend: {
 177                 position: 'bottom'
 178             },
 179             axes: [{
 180                 type: 'Numeric',
 181                 position: 'left',
 182                 minimum: 0,
 183                 maximum: 100,
 184                 grid: true,
 185                 fields: ['core2'],
 186                 title: 'CPU Load',
 187                 labelTitle: {
 188                     font: '13px Arial'
 189                 },
 190                 label: {
 191                     font: '11px Arial'
 192                 }
 193             }],
 194             series: [{
 195                 title: 'Core 2 (3.4GHz)',
 196                 type: 'line',
 197                 lineWidth: 4,
 198                 showMarkers: false,
 199                 fill: true,
 200                 axis: 'right',
 201                 xField: 'time',
 202                 yField: 'core2',
 203                 style: {
 204                     'stroke-width': 1
 205                 }
 206             }]
 207         };
 208     },
 209
 210     createMemoryPieChart: function () {
 211         var me = this;
 212
 213         return {
 214             flex: 1,
 215             xtype: 'chart',
 216             animate: {
 217                 duration: 250
 218             },
 219             store: this.memoryStore,
 220             shadow: true,
 221
 222             legend: {
 223                 position: 'right'
 224             },
 225             insetPadding: 40,
 226             theme: 'Memory:gradients',
 227             series: [{
 228                 donut: 30,
 229                 type: 'pie',
 230                 field: 'memory',
 231                 showInLegend: true,
 232                 tips: {
 233                     trackMouse: true,
 234                     width: 140,
 235                     height: 28,
 236                     renderer: function(storeItem, item) {
 237                         //calculate percentage.
 238                         var total = 0;
 239                         me.memoryStore.each(function(rec) {
 240                             total += rec.get('memory');
 241                         });
 242                         this.setTitle(storeItem.get('name') + ': ' +
 243                             Math.round(storeItem.get('memory') / total * 100) + '%');
 244                     }
 245                 },
 246                 highlight: {
 247                     segment: {
 248                         margin: 20
 249                     }
 250                 },
 251                 labelTitle: {
 252                     font: '13px Arial'
 253                 },
 254                 label: {
 255                     field: 'name',
 256                     display: 'rotate',
 257                     contrast: true,
 258                     font: '12px Arial'
 259                 }
 260             }]
 261         };
 262     },
 263
 264     createProcessChart: function () {
 265         return {
 266             flex: 1,
 267             xtype: 'chart',
 268             theme: 'Category1',
 269             store: this.processesMemoryStore,
 270             animate: {
 271                 easing: 'ease-in-out',
 272                 duration: 750
 273             },
 274             axes: [{
 275                 type: 'Numeric',
 276                 position: 'left',
 277                 minimum: 0,
 278                 maximum: 10,
 279                 fields: ['memory'],
 280                 title: 'Memory',
 281                 labelTitle: {
 282                     font: '13px Arial'
 283                 },
 284                 label: {
 285                     font: '11px Arial'
 286                 }
 287             },{
 288                 type: 'Category',
 289                 position: 'bottom',
 290                 fields: ['name'],
 291                 title: 'System Processes',
 292                 labelTitle: {
 293                     font: 'bold 14px Arial'
 294                 },
 295                 label: {
 296                     rotation: {
 297                         degrees: 45
 298                     }
 299                 }
 300             },{
 301                 type: 'Numeric',
 302                 position: 'top',
 303                 fields: ['memory'],
 304                 title: 'Memory Usage',
 305                 labelTitle: {
 306                     font: 'bold 14px Arial'
 307                 },
 308                 label: {
 309                     fill: '#FFFFFF',
 310                     stroke: '#FFFFFF'
 311                 },
 312                 axisStyle: {
 313                     fill: '#FFFFFF',
 314                     stroke: '#FFFFFF'
 315                 }
 316             }],
 317             series: [{
 318                 title: 'Processes',
 319                 type: 'column',
 320                 xField: 'name',
 321                 yField: 'memory',
 322                 renderer: function(sprite, record, attr, index, store) {
 323                     var lowColor = Ext.draw.Color.fromString('#b1da5a'),
 324                         value = record.get('memory'),
 325                         color;
 326
 327                     if (value > 5) {
 328                         color = lowColor.getDarker((value - 5) / 15).toString();
 329                     } else {
 330                         color = lowColor.getLighter(((5 - value) / 20)).toString();
 331                     }
 332
 333                     if (value >= 8) {
 334                         color = '#CD0000';
 335                     }
 336
 337                     return Ext.apply(attr, {
 338                         fill: color
 339                     });
 340                 }
 341             }]
 342         };
 343     },
 344
 345     generateCpuLoad: function () {
 346         var me = this,
 347             data = me.cpuLoadData;
 348
 349         function generate(factor) {
 350             var value = factor + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 9);
 351
 352             if (value < 0 || value > 100) {
 353                 value = 50;
 354             }
 355
 356             return value;
 357         }
 358
 359         if (data.length === 0) {
 360             data.push({
 361                 core1: 0,
 362                 core2: 0,
 363                 time: 0
 364             });
 365
 366             for (var i = 1; i < 100; i++) {
 367                 data.push({
 368                     core1: generate(data[i - 1].core1),
 369                     core2: generate(data[i - 1].core2),
 370                     time: i
 371                 });
 372             }
 373
 374             me.cpuLoadStore.loadData(data);
 375         } else {
 376             me.cpuLoadStore.data.removeAt(0);
 377             me.cpuLoadStore.data.each(function(item, key) {
 378                 item.data.time = key;
 379             });
 380
 381             var lastData = me.cpuLoadStore.last().data;
 382             me.cpuLoadStore.loadData([{
 383                 core1: generate(lastData.core1),
 384                 core2: generate(lastData.core2),
 385                 time: lastData.time + 1
 386             }], true);
 387         }
 388
 389     },
 390
 391     generateData: function (names) {
 392         var data = [],
 393             i,
 394             rest = names.length, consume;
 395
 396         for (i = 0; i < names.length; i++) {
 397             consume = Math.floor(Math.random() * rest * 100) / 100 + 2;
 398             rest = rest - (consume - 5);
 399             data.push({
 400                 name: names[i],
 401                 memory: consume
 402             });
 403         }
 404
 405         return data;
 406     },
 407
 408     updateCharts: function () {
 409         var me = this;
 410         clearTimeout(me.updateTimer);
 411         me.updateTimer = setTimeout(function() {
 412             if (me.pass % 3 === 0) {
 413                 me.memoryStore.loadData(me.generateData(me.memoryArray));
 414             }
 415
 416             if (me.pass % 5 === 0) {
 417                 me.processesMemoryStore.loadData(me.generateData(me.processArray));
 418             }
 419
 420             me.generateCpuLoad();
 421             me.updateCharts();
 422             me.pass++;
 423         }, 500);
 424     }
 425 });