examples/sandbox/sandbox.js

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