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     controller: {
  65         xclass: 'Ext.app.ViewController',
  66
  67         init: function(view) {
  68             this.powerOfTwo = view.powerOfTwo;
  69         },
  70
  71         convertToUnits: function(value) {
  72             let units = ['', 'k', 'M', 'G', 'T', 'P'];
  73             let si = 0;
  74             let format = '0.##';
  75             if (value < 0.1) format += '#';
  76             const baseValue = this.powerOfTwo ? 1024 : 1000;
  77             while (value >= baseValue && si < units.length -1) {
  78                 value = value / baseValue;
  79                 si++;
  80             }
  81
  82             // javascript floating point weirdness
  83             value = Ext.Number.correctFloat(value);
  84
  85             // limit decimal points
  86             value = Ext.util.Format.number(value, format);
  87
  88             let unit = units[si];
  89             if (this.powerOfTwo) unit += 'i';
  90
  91             return `${value.toString()} ${unit}`;
  92         },
  93
  94         leftAxisRenderer: function(axis, label, layoutContext) {
  95             let me = this;
  96             return me.convertToUnits(label);
  97         },
  98
  99         onSeriesTooltipRender: function(tooltip, record, item) {
 100             let view = this.getView();
 101
 102             let suffix = '';
 103             if (view.unit === 'percent') {
 104                 suffix = '%';
 105             } else if (view.unit === 'bytes') {
 106                 suffix = 'B';
 107             } else if (view.unit === 'bytespersecond') {
 108                 suffix = 'B/s';
 109             }
 110
 111             let prefix = item.field;
 112             if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) {
 113                 prefix = view.fieldTitles[view.fields.indexOf(item.field)];
 114             }
 115             let v = this.convertToUnits(record.get(item.field));
 116             let t = new Date(record.get('time'));
 117             tooltip.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
 118         },
 119
 120         onAfterAnimation: function(chart, eopts) {
 121             // if the undo button is disabled, disable our tool
 122             let ourUndoZoomButton = chart.header.tools[0];
 123             let undoButton = chart.interactions[0].getUndoButton();
 124             ourUndoZoomButton.setDisabled(undoButton.isDisabled());
 125         },
 126     },
 127
 128     width: 770,
 129     height: 300,
 130     animation: false,
 131     interactions: [
 132         {
 133             type: 'crosszoom',
 134         },
 135     ],
 136     legend: {
 137         padding: 0,
 138     },
 139     listeners: {
 140         animationend: 'onAfterAnimation',
 141     },
 142
 143     constructor: function(config) {
 144         let me = this;
 145
 146         let segmenter = config.powerOfTwo ? 'numericBase2' : 'numeric';
 147         config.axes = [
 148             {
 149                 type: 'numeric',
 150                 position: 'left',
 151                 grid: true,
 152                 renderer: 'leftAxisRenderer',
 153                 minimum: 0,
 154                 segmenter,
 155             },
 156             {
 157                 type: 'time',
 158                 position: 'bottom',
 159                 grid: true,
 160                 fields: ['time'],
 161             },
 162         ];
 163         me.callParent([config]);
 164     },
 165
 166     initComponent: function() {
 167         let me = this;
 168
 169         if (!me.store) {
 170             throw "cannot work without store";
 171         }
 172
 173         if (!me.fields) {
 174             throw "cannot work without fields";
 175         }
 176
 177         me.callParent();
 178
 179         // add correct label for left axis
 180         let axisTitle = "";
 181         if (me.unit === 'percent') {
 182             axisTitle = "%";
 183         } else if (me.unit === 'bytes') {
 184             axisTitle = "Bytes";
 185         } else if (me.unit === 'bytespersecond') {
 186             axisTitle = "Bytes/s";
 187         } else if (me.fieldTitles && me.fieldTitles.length === 1) {
 188             axisTitle = me.fieldTitles[0];
 189         } else if (me.fields.length === 1) {
 190             axisTitle = me.fields[0];
 191         }
 192
 193         me.axes[0].setTitle(axisTitle);
 194
 195         me.updateHeader();
 196
 197         if (me.header && me.legend) {
 198             me.header.padding = '4 9 4';
 199             me.header.add(me.legend);
 200         }
 201
 202         if (!me.noTool) {
 203             me.addTool({
 204                 type: 'minus',
 205                 disabled: true,
 206                 tooltip: gettext('Undo Zoom'),
 207                 handler: function() {
 208                     let undoButton = me.interactions[0].getUndoButton();
 209                     if (undoButton.handler) {
 210                         undoButton.handler();
 211                     }
 212                 },
 213             });
 214         }
 215
 216         // add a series for each field we get
 217         me.fields.forEach(function(item, index) {
 218             let title = item;
 219             if (me.fieldTitles && me.fieldTitles[index]) {
 220                 title = me.fieldTitles[index];
 221             }
 222             me.addSeries(Ext.apply(
 223                 {
 224                     type: 'line',
 225                     xField: 'time',
 226                     yField: item,
 227                     title: title,
 228                     fill: true,
 229                     style: {
 230                         lineWidth: 1.5,
 231                         opacity: 0.60,
 232                     },
 233                     marker: {
 234                         opacity: 0,
 235                         scaling: 0.01,
 236                         fx: {
 237                             duration: 200,
 238                             easing: 'easeOut',
 239                         },
 240                     },
 241                     highlightCfg: {
 242                         opacity: 1,
 243                         scaling: 1.5,
 244                     },
 245                     tooltip: {
 246                         trackMouse: true,
 247                         renderer: 'onSeriesTooltipRender',
 248                     },
 249                 },
 250                 me.seriesConfig,
 251             ));
 252         });
 253
 254         // enable animation after the store is loaded
 255         me.store.onAfter('load', function() {
 256             me.setAnimation(true);
 257         }, this, { single: true });
 258     },
 259 });