use eslint and execute as check target

[proxmox-widget-toolkit.git] / panel / RRDChart.js

diff --git a/panel/RRDChart.js b/panel/RRDChart.js
index 5673a960e8f94f4b00d5fa3bbad8f82e6a0f929e..b4f89a420ca1b5f45dee61ccdcc58d43aa95491f 100644 (file)
--- a/panel/RRDChart.js
+++ b/panel/RRDChart.js
@@ -3,94 +3,95 @@ Ext.define('Proxmox.widget.RRDChart', {
     alias: 'widget.proxmoxRRDChart',
 
     unit: undefined, // bytes, bytespersecond, percent
-    
+
     controller: {
        xclass: 'Ext.app.ViewController',
 
        convertToUnits: function(value) {
-           var units = ['', 'k','M','G','T', 'P'];
-           var si = 0;
-           while(value >= 1000  && si < (units.length -1)){
+           let units = ['', 'k', 'M', 'G', 'T', 'P'];
+           let si = 0;
+           let format = '0.##';
+           if (value < 0.1) format += '#';
+           while (value >= 1000 && si < units.length -1) {
                value = value / 1000;
                si++;
            }
 
            // javascript floating point weirdness
            value = Ext.Number.correctFloat(value);
-           
-           // limit to 2 decimal points
-           value = Ext.util.Format.number(value, "0.##");
-           
+
+           // limit decimal points
+           value = Ext.util.Format.number(value, format);
+
            return value.toString() + " " + units[si];
        },
 
        leftAxisRenderer: function(axis, label, layoutContext) {
-           var me = this;
-
+           let me = this;
            return me.convertToUnits(label);
        },
 
        onSeriesTooltipRender: function(tooltip, record, item) {
-           var me = this.getView();
-           
-           var suffix = '';
-           
-           if (me.unit === 'percent') {
+           let view = this.getView();
+
+           let suffix = '';
+           if (view.unit === 'percent') {
                suffix = '%';
-           } else if (me.unit === 'bytes') {
+           } else if (view.unit === 'bytes') {
                suffix = 'B';
-           } else if (me.unit === 'bytespersecond') {
+           } else if (view.unit === 'bytespersecond') {
                suffix = 'B/s';
            }
-           
-           var prefix = item.field;
-           if (me.fieldTitles && me.fieldTitles[me.fields.indexOf(item.field)]) {
-               prefix = me.fieldTitles[me.fields.indexOf(item.field)];
+
+           let prefix = item.field;
+           if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) {
+               prefix = view.fieldTitles[view.fields.indexOf(item.field)];
            }
-            tooltip.setHtml(prefix + ': ' + this.convertToUnits(record.get(item.field)) + suffix +
-                           '<br>' + new Date(record.get('time')));
+           let v = this.convertToUnits(record.get(item.field));
+           let t = new Date(record.get('time'));
+           tooltip.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
        },
 
        onAfterAnimation: function(chart, eopts) {
-           // if the undobuton is disabled,
-           // disable our tool
-
-           var ourUndoZoomButton = chart.tools[0];
-           var undoButton = chart.interactions[0].getUndoButton();
+           // if the undo button is disabled, disable our tool
+           let ourUndoZoomButton = chart.header.tools[0];
+           let undoButton = chart.interactions[0].getUndoButton();
            ourUndoZoomButton.setDisabled(undoButton.isDisabled());
-       }
+       },
     },
-    
+
     width: 770,
     height: 300,
     animation: false,
-    interactions: [{
-       type: 'crosszoom'
-    }],
-    axes: [{
-       type: 'numeric',
-       position: 'left',
-       grid: true,
-       renderer: 'leftAxisRenderer',
-       //renderer: function(axis, label) { return label; },
-       minimum: 0
-    }, {
-       type: 'time',
-       position: 'bottom',
-       grid: true,
-       fields: ['time']
-    }],
+    interactions: [
+       {
+           type: 'crosszoom',
+       },
+    ],
     legend: {
-       docked: 'bottom'
+       padding: 0,
     },
+    axes: [
+       {
+           type: 'numeric',
+           position: 'left',
+           grid: true,
+           renderer: 'leftAxisRenderer',
+           minimum: 0,
+       },
+       {
+           type: 'time',
+           position: 'bottom',
+           grid: true,
+           fields: ['time'],
+       },
+    ],
     listeners: {
-       animationend: 'onAfterAnimation'
+       animationend: 'onAfterAnimation',
     },
 
-
     initComponent: function() {
-       var me = this;
-       var series = {};
+       let me = this;
 
        if (!me.store) {
            throw "cannot work without store";
@@ -103,7 +104,7 @@ Ext.define('Proxmox.widget.RRDChart', {
        me.callParent();
 
        // add correct label for left axis
-       var axisTitle = "";
+       let axisTitle = "";
        if (me.unit === 'percent') {
            axisTitle = "%";
        } else if (me.unit === 'bytes') {
@@ -118,31 +119,30 @@ Ext.define('Proxmox.widget.RRDChart', {
 
        me.axes[0].setTitle(axisTitle);
 
+       me.updateHeader();
+
+       if (me.header && me.legend) {
+           me.header.padding = '4 9 4';
+           me.header.add(me.legend);
+       }
+
        if (!me.noTool) {
-           me.addTool([{
+           me.addTool({
                type: 'minus',
                disabled: true,
                tooltip: gettext('Undo Zoom'),
-               handler: function(){
-                   var undoButton = me.interactions[0].getUndoButton();
+               handler: function() {
+                   let undoButton = me.interactions[0].getUndoButton();
                    if (undoButton.handler) {
                        undoButton.handler();
                    }
-               }
-           },{
-               type: 'restore',
-               tooltip: gettext('Toggle Legend'),
-               handler: function(){
-                   if (me.legend) {
-                       me.legend.setVisible(!me.legend.isVisible());
-                   }
-               }
-           }]);
+               },
+           });
        }
 
        // add a series for each field we get
-       me.fields.forEach(function(item, index){
-           var title = item;
+       me.fields.forEach(function(item, index) {
+           let title = item;
            if (me.fieldTitles && me.fieldTitles[index]) {
                title = me.fieldTitles[index];
            }
@@ -155,32 +155,32 @@ Ext.define('Proxmox.widget.RRDChart', {
                    fill: true,
                    style: {
                        lineWidth: 1.5,
-                       opacity: 0.60
+                       opacity: 0.60,
                    },
                    marker: {
                        opacity: 0,
                        scaling: 0.01,
                        fx: {
                            duration: 200,
-                           easing: 'easeOut'
-                       }
+                           easing: 'easeOut',
+                       },
                    },
                    highlightCfg: {
                        opacity: 1,
-                       scaling: 1.5
+                       scaling: 1.5,
                    },
                    tooltip: {
                        trackMouse: true,
-                       renderer: 'onSeriesTooltipRender'
-                   }
+                       renderer: 'onSeriesTooltipRender',
+                   },
                },
-               me.seriesConfig
+               me.seriesConfig,
            ));
        });
 
        // enable animation after the store is loaded
        me.store.onAfter('load', function() {
            me.setAnimation(true);
-       }, this, {single: true});
-    }
+       }, this, { single: true });
+    },
 });