src/panel/RRDChart.js

   1 Ext.define('Proxmox.chart.axis.segmenter.NumericBase2', {
   2     extend: 'Ext.chart.axis.segmenter.Numeric',
   3     alias: 'segmenter.numericBase2',
   4
   5     // derived from the original numeric segmenter but using 2 instead of 10 as base
   6     preferredStep: function(min, estStepSize) {
   7         // Getting an order of magnitude of the estStepSize with a common logarithm.
   8         let order = Math.floor(Math.log2(estStepSize));
   9         let scale = Math.pow(2, order);
  10
  11         estStepSize /= scale;
  12
  13         // FIXME: below is not useful when using base 2 instead of base 10, we could
  14         // just directly set estStepSize to 2
  15         if (estStepSize <= 1) {
  16             estStepSize = 1;
  17         } else if (estStepSize < 2) {
  18             estStepSize = 2;
  19         }
  20         return {
  21             unit: {
  22                 // When passed estStepSize is less than 1, its order of magnitude
  23                 // is equal to -number_of_leading_zeros in the estStepSize.
  24                 fixes: -order, // Number of fractional digits.
  25                 scale: scale,
  26             },
  27             step: estStepSize,
  28         };
  29     },
  30
  31     /**
  32      * Wraps the provided estimated step size of a range without altering it into a step size object.
  33      *
  34      * @param {*} min The start point of range.
  35      * @param {*} estStepSize The estimated step size.
  36      * @return {Object} Return the step size by an object of step x unit.
  37      * @return {Number} return.step The step count of units.
  38      * @return {Object} return.unit The unit.
  39      */
  40     // derived from the original numeric segmenter but using 2 instead of 10 as base
  41     exactStep: function(min, estStepSize) {
  42         let order = Math.floor(Math.log2(estStepSize));
  43         let scale = Math.pow(2, order);
  44
  45         return {
  46             unit: {
  47                 // add one decimal point if estStepSize is not a multiple of scale
  48                 fixes: -order + (estStepSize % scale === 0 ? 0 : 1),
  49                 scale: 1,
  50             },
  51             step: estStepSize,
  52         };
  53     },
  54 });
  55
  56 Ext.define('Proxmox.widget.RRDChart', {
  57     extend: 'Ext.chart.CartesianChart',
  58     alias: 'widget.proxmoxRRDChart',
  59
  60     unit: undefined, // bytes, bytespersecond, percent
  61
  62     powerOfTwo: false,
  63
  64     // set to empty string to suppress warning in debug mode
  65     downloadServerUrl: '-',
  66
  67     controller: {
  68         xclass: 'Ext.app.ViewController',
  69
  70         init: function(view) {
  71             this.powerOfTwo = view.powerOfTwo;
  72         },
  73
  74         convertToUnits: function(value) {
  75             let units = ['', 'k', 'M', 'G', 'T', 'P'];
  76             let si = 0;
  77             let format = '0.##';
  78             if (value < 0.1) format += '#';
  79             const baseValue = this.powerOfTwo ? 1024 : 1000;
  80             while (value >= baseValue && si < units.length -1) {
  81                 value = value / baseValue;
  82                 si++;
  83             }
  84
  85             // javascript floating point weirdness
  86             value = Ext.Number.correctFloat(value);
  87
  88             // limit decimal points
  89             value = Ext.util.Format.number(value, format);
  90
  91             let unit = units[si];
  92             if (this.powerOfTwo) unit += 'i';
  93
  94             return `${value.toString()} ${unit}`;
  95         },
  96
  97         leftAxisRenderer: function(axis, label, layoutContext) {
  98             let me = this;
  99             return me.convertToUnits(label);
 100         },
 101
 102         onSeriesTooltipRender: function(tooltip, record, item) {
 103             let view = this.getView();
 104
 105             let suffix = '';
 106             if (view.unit === 'percent') {
 107                 suffix = '%';
 108             } else if (view.unit === 'bytes') {
 109                 suffix = 'B';
 110             } else if (view.unit === 'bytespersecond') {
 111                 suffix = 'B/s';
 112             }
 113
 114             let prefix = item.field;
 115             if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) {
 116                 prefix = view.fieldTitles[view.fields.indexOf(item.field)];
 117             }
 118             let v = this.convertToUnits(record.get(item.field));
 119             let t = new Date(record.get('time'));
 120             tooltip.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
 121         },
 122
 123         onAfterAnimation: function(chart, eopts) {
 124             // if the undo button is disabled, disable our tool
 125             let ourUndoZoomButton = chart.header.tools[0];
 126             let undoButton = chart.interactions[0].getUndoButton();
 127             ourUndoZoomButton.setDisabled(undoButton.isDisabled());
 128         },
 129     },
 130
 131     width: 770,
 132     height: 300,
 133     animation: false,
 134     interactions: [
 135         {
 136             type: 'crosszoom',
 137         },
 138     ],
 139     legend: {
 140         padding: 0,
 141     },
 142     listeners: {
 143         animationend: 'onAfterAnimation',
 144     },
 145
 146     constructor: function(config) {
 147         let me = this;
 148
 149         let segmenter = config.powerOfTwo ? 'numericBase2' : 'numeric';
 150         config.axes = [
 151             {
 152                 type: 'numeric',
 153                 position: 'left',
 154                 grid: true,
 155                 renderer: 'leftAxisRenderer',
 156                 minimum: 0,
 157                 segmenter,
 158             },
 159             {
 160                 type: 'time',
 161                 position: 'bottom',
 162                 grid: true,
 163                 fields: ['time'],
 164             },
 165         ];
 166         me.callParent([config]);
 167     },
 168
 169     initComponent: function() {
 170         let me = this;
 171
 172         if (!me.store) {
 173             throw "cannot work without store";
 174         }
 175
 176         if (!me.fields) {
 177             throw "cannot work without fields";
 178         }
 179
 180         me.callParent();
 181
 182         // add correct label for left axis
 183         let axisTitle = "";
 184         if (me.unit === 'percent') {
 185             axisTitle = "%";
 186         } else if (me.unit === 'bytes') {
 187             axisTitle = "Bytes";
 188         } else if (me.unit === 'bytespersecond') {
 189             axisTitle = "Bytes/s";
 190         } else if (me.fieldTitles && me.fieldTitles.length === 1) {
 191             axisTitle = me.fieldTitles[0];
 192         } else if (me.fields.length === 1) {
 193             axisTitle = me.fields[0];
 194         }
 195
 196         me.axes[0].setTitle(axisTitle);
 197
 198         me.updateHeader();
 199
 200         if (me.header && me.legend) {
 201             me.header.padding = '4 9 4';
 202             me.header.add(me.legend);
 203         }
 204
 205         if (!me.noTool) {
 206             me.addTool({
 207                 type: 'minus',
 208                 disabled: true,
 209                 tooltip: gettext('Undo Zoom'),
 210                 handler: function() {
 211                     let undoButton = me.interactions[0].getUndoButton();
 212                     if (undoButton.handler) {
 213                         undoButton.handler();
 214                     }
 215                 },
 216             });
 217         }
 218
 219         // add a series for each field we get
 220         me.fields.forEach(function(item, index) {
 221             let title = item;
 222             if (me.fieldTitles && me.fieldTitles[index]) {
 223                 title = me.fieldTitles[index];
 224             }
 225             me.addSeries(Ext.apply(
 226                 {
 227                     type: 'line',
 228                     xField: 'time',
 229                     yField: item,
 230                     title: title,
 231                     fill: true,
 232                     style: {
 233                         lineWidth: 1.5,
 234                         opacity: 0.60,
 235                     },
 236                     marker: {
 237                         opacity: 0,
 238                         scaling: 0.01,
 239                         fx: {
 240                             duration: 200,
 241                             easing: 'easeOut',
 242                         },
 243                     },
 244                     highlightCfg: {
 245                         opacity: 1,
 246                         scaling: 1.5,
 247                     },
 248                     tooltip: {
 249                         trackMouse: true,
 250                         renderer: 'onSeriesTooltipRender',
 251                     },
 252                 },
 253                 me.seriesConfig,
 254             ));
 255         });
 256
 257         // enable animation after the store is loaded
 258         me.store.onAfter('load', function() {
 259             me.setAnimation(true);
 260         }, this, { single: true });
 261     },
 262 });