examples/desktop/SystemStatus.js

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