]>
Commit | Line | Data |
---|---|---|
4226b8fb | 1 | /* |
eb7f9197 TL |
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 | |
4226b8fb DC |
4 | */ |
5 | Ext.define('PVE.widget.RunningChart', { | |
6 | extend: 'Ext.container.Container', | |
7 | alias: 'widget.pveRunningChart', | |
8 | ||
9 | layout: { | |
10 | type: 'hbox', | |
f6710aac | 11 | align: 'center', |
4226b8fb DC |
12 | }, |
13 | items: [ | |
14 | { | |
15 | width: 80, | |
16 | xtype: 'box', | |
17 | itemId: 'title', | |
18 | data: { | |
f6710aac | 19 | title: '', |
4226b8fb | 20 | }, |
f6710aac | 21 | tpl: '<h3>{title}:</h3>', |
4226b8fb DC |
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, | |
f6710aac | 34 | minimum: 0, |
4226b8fb DC |
35 | }, |
36 | { | |
37 | type: 'numeric', | |
38 | position: 'bottom', | |
f6710aac TL |
39 | hidden: true, |
40 | }, | |
4226b8fb DC |
41 | ], |
42 | ||
43 | store: { | |
ca0267fd TL |
44 | trackRemoved: false, |
45 | data: {}, | |
4226b8fb DC |
46 | }, |
47 | ||
48 | sprites: [{ | |
49 | id: 'valueSprite', | |
50 | type: 'text', | |
51 | text: '0 B/s', | |
52 | textAlign: 'end', | |
53 | textBaseline: 'middle', | |
f6710aac | 54 | fontSize: 14, |
4226b8fb DC |
55 | }], |
56 | ||
57 | series: [{ | |
58 | type: 'line', | |
59 | xField: 'time', | |
60 | yField: 'val', | |
61 | fill: 'true', | |
62 | colors: ['#cfcfcf'], | |
63 | tooltip: { | |
64 | trackMouse: true, | |
8058410f | 65 | renderer: function(tooltip, record, ctx) { |
e75392ce TL |
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); | |
4226b8fb DC |
70 | tooltip.setHtml( |
71 | me.up().title + ': ' + value + '<br />' + | |
f6710aac | 72 | Ext.Date.format(date, 'H:i:s'), |
4226b8fb | 73 | ); |
f6710aac | 74 | }, |
4226b8fb DC |
75 | }, |
76 | style: { | |
77 | lineWidth: 1.5, | |
f6710aac | 78 | opacity: 0.60, |
4226b8fb DC |
79 | }, |
80 | marker: { | |
81 | opacity: 0, | |
82 | scaling: 0.01, | |
83 | fx: { | |
84 | duration: 200, | |
f6710aac TL |
85 | easing: 'easeOut', |
86 | }, | |
4226b8fb DC |
87 | }, |
88 | highlightCfg: { | |
89 | opacity: 1, | |
f6710aac TL |
90 | scaling: 1.5, |
91 | }, | |
92 | }], | |
93 | }, | |
4226b8fb DC |
94 | ], |
95 | ||
eb7f9197 | 96 | // the renderer for the tooltip and last value, default just the value |
4226b8fb DC |
97 | renderer: Ext.identityFn, |
98 | ||
eb7f9197 | 99 | // show the last x seconds default is 5 minutes |
4226b8fb DC |
100 | timeFrame: 5*60, |
101 | ||
102 | addDataPoint: function(value, time) { | |
497c94f2 TL |
103 | let me = this.chart; |
104 | let panel = me.up(); | |
105 | let now = new Date().getTime(); | |
53e3ea84 | 106 | let begin = new Date(now - 1000 * panel.timeFrame).getTime(); |
4226b8fb DC |
107 | |
108 | me.store.add({ | |
497c94f2 | 109 | time: time || now, |
f6710aac | 110 | val: value || 0, |
4226b8fb DC |
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) { | |
497c94f2 | 122 | return item.data.time < begin; |
4226b8fb DC |
123 | }); |
124 | ||
125 | me.store.remove(oldData.getRange()); | |
126 | } | |
127 | ||
497c94f2 TL |
128 | me.timeaxis.setMinimum(begin); |
129 | me.timeaxis.setMaximum(now); | |
4226b8fb DC |
130 | me.valuesprite.setText(panel.renderer(value || 0).toString()); |
131 | me.valuesprite.setAttributes({ | |
132 | x: me.getWidth() - 15, | |
f6710aac | 133 | y: me.getHeight()/2, |
4226b8fb DC |
134 | }, true); |
135 | me.redraw(); | |
136 | }, | |
137 | ||
138 | setTitle: function(title) { | |
139 | this.title = title; | |
140 | var me = this.getComponent('title'); | |
8058410f | 141 | me.update({ title: title }); |
4226b8fb DC |
142 | }, |
143 | ||
8058410f | 144 | initComponent: function() { |
4226b8fb DC |
145 | var me = this; |
146 | me.callParent(); | |
147 | ||
148 | if (me.title) { | |
8058410f | 149 | me.getComponent('title').update({ title: me.title }); |
4226b8fb DC |
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, | |
f6710aac | 157 | stroke: me.color, |
4226b8fb DC |
158 | }); |
159 | } | |
f6710aac | 160 | }, |
4226b8fb | 161 | }); |