]>
git.proxmox.com Git - pve-manager.git/blob - www/manager6/panel/RunningChart.js
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
5 Ext
.define('PVE.widget.RunningChart', {
6 extend
: 'Ext.container.Container',
7 alias
: 'widget.pveRunningChart',
21 tpl
: '<h3>{title}:</h3>',
53 textBaseline
: 'middle',
65 renderer: function(tooltip
, record
, ctx
) {
66 if (!record
|| !record
.data
) return;
67 const view
= this.getChart();
68 const date
= new Date(record
.data
.time
);
69 const value
= view
.up().renderer(record
.data
.val
);
70 const line1
= `${view.up().title}: ${value}`;
71 const line2
= Ext
.Date
.format(date
, 'H:i:s');
72 tooltip
.setHtml(`${line1}<br />${line2}`);
95 // the renderer for the tooltip and last value, default just the value
96 renderer
: Ext
.identityFn
,
98 // show the last x seconds default is 5 minutes
101 addDataPoint: function(value
, time
) {
102 let view
= this.chart
;
103 let panel
= view
.up();
104 let now
= new Date().getTime();
105 let begin
= new Date(now
- 1000 * panel
.timeFrame
).getTime();
112 // delete all old records when we have 20 times more datapoints
113 // than seconds in our timeframe (so even a subsecond graph does
114 // not trigger this often)
116 // records in the store do not take much space, but like this,
117 // we prevent a memory leak when someone has the site open for a long time
118 // with minimal graphical glitches
119 if (view
.store
.count() > panel
.timeFrame
* 20) {
120 var oldData
= view
.store
.getData().createFiltered(function(item
) {
121 return item
.data
.time
< begin
;
124 view
.store
.remove(oldData
.getRange());
127 view
.timeaxis
.setMinimum(begin
);
128 view
.timeaxis
.setMaximum(now
);
129 view
.valuesprite
.setText(panel
.renderer(value
|| 0).toString());
130 view
.valuesprite
.setAttributes({
131 x
: view
.getWidth() - 15,
132 y
: view
.getHeight()/2,
137 setTitle: function(title
) {
139 let titlebox
= this.getComponent('title');
140 titlebox
.update({ title
: title
});
143 initComponent: function() {
148 me
.getComponent('title').update({ title
: me
.title
});
150 me
.chart
= me
.getComponent('chart');
151 me
.chart
.timeaxis
= me
.chart
.getAxes()[1];
152 me
.chart
.valuesprite
= me
.chart
.getSurface('chart').get('valueSprite');
154 me
.chart
.series
[0].setStyle({