]>
git.proxmox.com Git - pve-manager.git/blob - www/manager6/panel/RunningChart.js
2 * This is a running chart widget
3 * you add time datapoints to it,
4 * and we only show the last x of it
5 * used for ceph performance charts
7 Ext
.define('PVE.widget.RunningChart', {
8 extend
: 'Ext.container.Container',
9 alias
: 'widget.pveRunningChart',
23 tpl
: '<h3>{title}:</h3>'
54 textBaseline
: 'middle',
66 renderer: function( tooltip
, record
, ctx
) {
67 var me
= this.getChart();
68 var date
= new Date(record
.data
.time
);
69 var value
= me
.up().renderer(record
.data
.val
);
71 me
.up().title
+ ': ' + value
+ '<br />' +
72 Ext
.Date
.format(date
, 'H:i:s')
96 // the renderer for the tooltip and last value,
97 // default just the value
98 renderer
: Ext
.identityFn
,
100 // show the last x seconds
101 // default is 5 minutes
104 addDataPoint: function(value
, time
) {
107 var now
= new Date();
108 var begin
= new Date(now
.getTime() - (1000*panel
.timeFrame
));
111 time
: time
|| now
.getTime(),
115 // delete all old records when we have 20 times more datapoints
116 // than seconds in our timeframe (so even a subsecond graph does
117 // not trigger this often)
119 // records in the store do not take much space, but like this,
120 // we prevent a memory leak when someone has the site open for a long time
121 // with minimal graphical glitches
122 if (me
.store
.count() > panel
.timeFrame
* 20) {
123 var oldData
= me
.store
.getData().createFiltered(function(item
) {
124 return item
.data
.time
< begin
.getTime();
127 me
.store
.remove(oldData
.getRange());
130 me
.timeaxis
.setMinimum(begin
.getTime());
131 me
.timeaxis
.setMaximum(now
.getTime());
132 me
.valuesprite
.setText(panel
.renderer(value
|| 0).toString());
133 me
.valuesprite
.setAttributes({
134 x
: me
.getWidth() - 15,
140 setTitle: function(title
) {
142 var me
= this.getComponent('title');
143 me
.update({title
: title
});
146 initComponent: function(){
151 me
.getComponent('title').update({title
: me
.title
});
153 me
.chart
= me
.getComponent('chart');
154 me
.chart
.timeaxis
= me
.chart
.getAxes()[1];
155 me
.chart
.valuesprite
= me
.chart
.getSurface('chart').get('valueSprite');
157 me
.chart
.series
[0].setStyle({