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 = '';
+ let view = this.getView();
- if (me.unit === 'percent') {
+ 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";
me.callParent();
// add correct label for left axis
- var axisTitle = "";
+ let axisTitle = "";
if (me.unit === 'percent') {
axisTitle = "%";
} else if (me.unit === 'bytes') {
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];
}
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 });
+ },
});