www/manager6/panel/RunningChart.js

   1 /*
   2  * This is a running chart widget you add time datapoints to it, and we only
   3  * show the last x of it used for ceph performance charts
   4  */
   5 Ext.define('PVE.widget.RunningChart', {
   6     extend: 'Ext.container.Container',
   7     alias: 'widget.pveRunningChart',
   8
   9     layout: {
  10         type: 'hbox',
  11         align: 'center'
  12     },
  13     items: [
  14         {
  15             width: 80,
  16             xtype: 'box',
  17             itemId: 'title',
  18             data: {
  19                 title: ''
  20             },
  21             tpl: '<h3>{title}:</h3>'
  22         },
  23         {
  24             flex: 1,
  25             xtype: 'cartesian',
  26             height: '100%',
  27             itemId: 'chart',
  28             border: false,
  29             axes: [
  30                 {
  31                     type: 'numeric',
  32                     position: 'left',
  33                     hidden: true,
  34                     minimum: 0
  35                 },
  36                 {
  37                     type: 'numeric',
  38                     position: 'bottom',
  39                     hidden: true
  40                 }
  41             ],
  42
  43             store: {
  44                 trackRemoved: false,
  45                 data: {},
  46             },
  47
  48             sprites: [{
  49                 id: 'valueSprite',
  50                 type: 'text',
  51                 text: '0 B/s',
  52                 textAlign: 'end',
  53                 textBaseline: 'middle',
  54                 fontSize: 14
  55             }],
  56
  57             series: [{
  58                 type: 'line',
  59                 xField: 'time',
  60                 yField: 'val',
  61                 fill: 'true',
  62                 colors: ['#cfcfcf'],
  63                 tooltip: {
  64                     trackMouse: true,
  65                     renderer: function( tooltip, record, ctx) {
  66                         let me = this.getChart();
  67                         if (!record || !record.data) return;
  68                         let date = new Date(record.data.time);
  69                         let value = me.up().renderer(record.data.val);
  70                         tooltip.setHtml(
  71                             me.up().title + ': ' + value + '<br />' +
  72                             Ext.Date.format(date, 'H:i:s')
  73                         );
  74                     }
  75                 },
  76                 style: {
  77                     lineWidth: 1.5,
  78                     opacity: 0.60
  79                 },
  80                 marker: {
  81                     opacity: 0,
  82                     scaling: 0.01,
  83                     fx: {
  84                         duration: 200,
  85                         easing: 'easeOut'
  86                     }
  87                 },
  88                 highlightCfg: {
  89                     opacity: 1,
  90                     scaling: 1.5
  91                 }
  92             }]
  93         }
  94     ],
  95
  96     // the renderer for the tooltip and last value, default just the value
  97     renderer: Ext.identityFn,
  98
  99     // show the last x seconds default is 5 minutes
 100     timeFrame: 5*60,
 101
 102     addDataPoint: function(value, time) {
 103         var me = this.chart;
 104         var panel = me.up();
 105         var now = new Date();
 106         var begin = new Date(now.getTime() - (1000*panel.timeFrame));
 107
 108         me.store.add({
 109             time: time || now.getTime(),
 110             val: value || 0
 111         });
 112
 113         // delete all old records when we have 20 times more datapoints
 114         // than seconds in our timeframe (so even a subsecond graph does
 115         // not trigger this often)
 116         //
 117         // records in the store do not take much space, but like this,
 118         // we prevent a memory leak when someone has the site open for a long time
 119         // with minimal graphical glitches
 120         if (me.store.count() > panel.timeFrame * 20) {
 121             var oldData = me.store.getData().createFiltered(function(item) {
 122                 return item.data.time < begin.getTime();
 123             });
 124
 125             me.store.remove(oldData.getRange());
 126         }
 127
 128         me.timeaxis.setMinimum(begin.getTime());
 129         me.timeaxis.setMaximum(now.getTime());
 130         me.valuesprite.setText(panel.renderer(value || 0).toString());
 131         me.valuesprite.setAttributes({
 132             x: me.getWidth() - 15,
 133             y: me.getHeight()/2
 134         }, true);
 135         me.redraw();
 136     },
 137
 138     setTitle: function(title) {
 139         this.title = title;
 140         var me = this.getComponent('title');
 141         me.update({title: title});
 142     },
 143
 144     initComponent: function(){
 145         var me = this;
 146         me.callParent();
 147
 148         if (me.title) {
 149             me.getComponent('title').update({title: me.title});
 150         }
 151         me.chart = me.getComponent('chart');
 152         me.chart.timeaxis = me.chart.getAxes()[1];
 153         me.chart.valuesprite = me.chart.getSurface('chart').get('valueSprite');
 154         if (me.color) {
 155             me.chart.series[0].setStyle({
 156                 fill: me.color,
 157                 stroke: me.color
 158             });
 159         }
 160     }
 161 });