panel/RRDChart.js

   1 Ext.define('Proxmox.widget.RRDChart', {
   2     extend: 'Ext.chart.CartesianChart',
   3     alias: 'widget.proxmoxRRDChart',
   4
   5     unit: undefined, // bytes, bytespersecond, percent
   6
   7     controller: {
   8         xclass: 'Ext.app.ViewController',
   9
  10         convertToUnits: function(value) {
  11             var units = ['', 'k','M','G','T', 'P'];
  12             var si = 0;
  13             while(value >= 1000  && si < (units.length -1)){
  14                 value = value / 1000;
  15                 si++;
  16             }
  17
  18             // javascript floating point weirdness
  19             value = Ext.Number.correctFloat(value);
  20
  21             // limit to 2 decimal points
  22             value = Ext.util.Format.number(value, "0.##");
  23
  24             return value.toString() + " " + units[si];
  25         },
  26
  27         leftAxisRenderer: function(axis, label, layoutContext) {
  28             var me = this;
  29
  30             return me.convertToUnits(label);
  31         },
  32
  33         onSeriesTooltipRender: function(tooltip, record, item) {
  34             var me = this.getView();
  35
  36             var suffix = '';
  37
  38             if (me.unit === 'percent') {
  39                 suffix = '%';
  40             } else if (me.unit === 'bytes') {
  41                 suffix = 'B';
  42             } else if (me.unit === 'bytespersecond') {
  43                 suffix = 'B/s';
  44             }
  45
  46             var prefix = item.field;
  47             if (me.fieldTitles && me.fieldTitles[me.fields.indexOf(item.field)]) {
  48                 prefix = me.fieldTitles[me.fields.indexOf(item.field)];
  49             }
  50             tooltip.setHtml(prefix + ': ' + this.convertToUnits(record.get(item.field)) + suffix +
  51                             '<br>' + new Date(record.get('time')));
  52         },
  53
  54         onAfterAnimation: function(chart, eopts) {
  55             // if the undobuton is disabled,
  56             // disable our tool
  57
  58             var ourUndoZoomButton = chart.tools[0];
  59             var undoButton = chart.interactions[0].getUndoButton();
  60             ourUndoZoomButton.setDisabled(undoButton.isDisabled());
  61         }
  62     },
  63
  64     width: 770,
  65     height: 300,
  66     animation: false,
  67     interactions: [{
  68         type: 'crosszoom'
  69     }],
  70     axes: [{
  71         type: 'numeric',
  72         position: 'left',
  73         grid: true,
  74         renderer: 'leftAxisRenderer',
  75         //renderer: function(axis, label) { return label; },
  76         minimum: 0
  77     }, {
  78         type: 'time',
  79         position: 'bottom',
  80         grid: true,
  81         fields: ['time']
  82     }],
  83     legend: {
  84         docked: 'bottom'
  85     },
  86     listeners: {
  87         animationend: 'onAfterAnimation'
  88     },
  89
  90
  91     initComponent: function() {
  92         var me = this;
  93         var series = {};
  94
  95         if (!me.store) {
  96             throw "cannot work without store";
  97         }
  98
  99         if (!me.fields) {
 100             throw "cannot work without fields";
 101         }
 102
 103         me.callParent();
 104
 105         // add correct label for left axis
 106         var axisTitle = "";
 107         if (me.unit === 'percent') {
 108             axisTitle = "%";
 109         } else if (me.unit === 'bytes') {
 110             axisTitle = "Bytes";
 111         } else if (me.unit === 'bytespersecond') {
 112             axisTitle = "Bytes/s";
 113         } else if (me.fieldTitles && me.fieldTitles.length === 1) {
 114             axisTitle = me.fieldTitles[0];
 115         } else if (me.fields.length === 1) {
 116             axisTitle = me.fields[0];
 117         }
 118
 119         me.axes[0].setTitle(axisTitle);
 120
 121         if (!me.noTool) {
 122             me.addTool([{
 123                 type: 'minus',
 124                 disabled: true,
 125                 tooltip: gettext('Undo Zoom'),
 126                 handler: function(){
 127                     var undoButton = me.interactions[0].getUndoButton();
 128                     if (undoButton.handler) {
 129                         undoButton.handler();
 130                     }
 131                 }
 132             },{
 133                 type: 'restore',
 134                 tooltip: gettext('Toggle Legend'),
 135                 handler: function(){
 136                     if (me.legend) {
 137                         me.legend.setVisible(!me.legend.isVisible());
 138                     }
 139                 }
 140             }]);
 141         }
 142
 143         // add a series for each field we get
 144         me.fields.forEach(function(item, index){
 145             var title = item;
 146             if (me.fieldTitles && me.fieldTitles[index]) {
 147                 title = me.fieldTitles[index];
 148             }
 149             me.addSeries(Ext.apply(
 150                 {
 151                     type: 'line',
 152                     xField: 'time',
 153                     yField: item,
 154                     title: title,
 155                     fill: true,
 156                     style: {
 157                         lineWidth: 1.5,
 158                         opacity: 0.60
 159                     },
 160                     marker: {
 161                         opacity: 0,
 162                         scaling: 0.01,
 163                         fx: {
 164                             duration: 200,
 165                             easing: 'easeOut'
 166                         }
 167                     },
 168                     highlightCfg: {
 169                         opacity: 1,
 170                         scaling: 1.5
 171                     },
 172                     tooltip: {
 173                         trackMouse: true,
 174                         renderer: 'onSeriesTooltipRender'
 175                     }
 176                 },
 177                 me.seriesConfig
 178             ));
 179         });
 180
 181         // enable animation after the store is loaded
 182         me.store.onAfter('load', function() {
 183             me.setAnimation(true);
 184         }, this, {single: true});
 185     }
 186 });