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