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