www/manager6/panel/RRDChart.js

   1 Ext.define('PVE.widget.RRDChart', {
   2     extend: 'Ext.chart.CartesianChart',
   3     alias: 'widget.pveRRDChart',
   4
   5
   6     width: 800,
   7     height: 300,
   8     interactions: 'crosszoom',
   9     axes: [{
  10         type: 'numeric',
  11         position: 'left',
  12         grid: true,
  13         renderer: 'leftAxisRenderer',
  14         minimum: 0
  15     }, {
  16         type: 'time',
  17         position: 'bottom',
  18         grid: true,
  19         fields: ['time']
  20     }],
  21     legend: {
  22         docked: 'right',
  23         // we set this that all graphs have same width
  24         width: 140
  25     },
  26     listeners: {
  27         afterrender: 'onAfterRender'
  28     },
  29
  30     bytesArr : [
  31         'memtotal',
  32         'memused',
  33         'roottotal',
  34         'rootused',
  35         'swaptotal',
  36         'swapused',
  37         'maxmem',
  38         'mem',
  39         'disk',
  40         'maxdisk',
  41         'total',
  42         'used'
  43     ],
  44     bytespersArr: [
  45         'netin',
  46         'netout',
  47         'diskread',
  48         'diskwrite'
  49     ],
  50
  51     percentArr: [
  52         'cpu',
  53         'iowait'
  54     ],
  55
  56     convertToUnits: function(value) {
  57         var units = ['', 'k','M','G','T', 'P'];
  58         var si = 0;
  59         while(value >= 1000  && si < (units.length -1)){
  60             value = value / 1000;
  61             si++;
  62         }
  63         // javascript floating point weirdness
  64         value = Ext.Number.correctFloat(value);
  65
  66         // limit to 2 decimal points
  67         value = Ext.util.Format.number(value, "0.##");
  68
  69         return value.toString() + " " + units[si];
  70     },
  71
  72     leftAxisRenderer: function(axis, label, layoutContext) {
  73         var me = this;
  74         return me.convertToUnits(label);
  75     },
  76
  77     onSeriesTooltipRender: function (tooltip, record, item) {
  78         var me = this;
  79         var suffix = '';
  80
  81         if (me.percentArr.indexOf(item.field) != -1) {
  82             suffix = '%';
  83         } else if (me.bytesArr.indexOf(item.field) != -1) {
  84             suffix = 'B';
  85         } else if (me.bytespersArr.indexOf(item.field) != -1) {
  86             suffix = 'B/s';
  87         }
  88
  89         var prefix = item.field;
  90         if (me.fieldTitles && me.fieldTitles[me.fields.indexOf(item.field)]) {
  91             prefix = me.fieldTitles[me.fields.indexOf(item.field)];
  92         }
  93         tooltip.setHtml(prefix + ': ' + this.convertToUnits(record.get(item.field)) + suffix +
  94             '<br>' + new Date(record.get('time')));
  95     },
  96
  97     onAfterRender: function(){
  98         var me = this;
  99
 100         // add correct label for left axis
 101         var axisTitle = "";
 102         if (me.percentArr.indexOf(me.fields[0]) != -1) {
 103             axisTitle = "%";
 104         } else if (me.bytesArr.indexOf(me.fields[0]) != -1) {
 105             axisTitle = "Bytes";
 106         } else if (me.bytespersArr.indexOf(me.fields[0]) != -1) {
 107             axisTitle = "Bytes/s";
 108         }
 109         me.axes[0].setTitle(axisTitle);
 110
 111         // add a series for each field we get
 112         me.fields.forEach(function(item, index){
 113             var title = item;
 114             if (me.fieldTitles && me.fieldTitles[index]) {
 115                 title = me.fieldTitles[index];
 116             }
 117             me.addSeries({
 118                 type: 'line',
 119                 xField: 'time',
 120                 yField: item,
 121                 title: title,
 122                 fill: true,
 123                 style: {
 124                     lineWidth: 1.5,
 125                     opacity: 0.60
 126                 },
 127                 marker: {
 128                     opacity: 0,
 129                     scaling: 0.01,
 130                     fx: {
 131                         duration: 200,
 132                         easing: 'easeOut'
 133                     }
 134                 },
 135                 highlightCfg: {
 136                     opacity: 1,
 137                     scaling: 1.5
 138                 },
 139                 tooltip: {
 140                     trackMouse: true,
 141                     renderer: 'onSeriesTooltipRender'
 142                 }
 143             });
 144         });
 145     },
 146
 147     initComponent: function() {
 148         var me = this;
 149
 150         if (!me.store) {
 151             throw "cannot work without store";
 152         }
 153
 154         if (!me.fields) {
 155             throw "cannot work without fields";
 156         }
 157
 158         me.callParent();
 159     }
 160 });