]>
Commit | Line | Data |
---|---|---|
1 | Ext.define('Proxmox.chart.axis.segmenter.NumericBase2', { | |
2 | extend: 'Ext.chart.axis.segmenter.Numeric', | |
3 | alias: 'segmenter.numericBase2', | |
4 | ||
5 | // derived from the original numeric segmenter but using 2 instead of 10 as base | |
6 | preferredStep: function(min, estStepSize) { | |
7 | // Getting an order of magnitude of the estStepSize with a common logarithm. | |
8 | let order = Math.floor(Math.log2(estStepSize)); | |
9 | let scale = Math.pow(2, order); | |
10 | ||
11 | estStepSize /= scale; | |
12 | ||
13 | // FIXME: below is not useful when using base 2 instead of base 10, we could | |
14 | // just directly set estStepSize to 2 | |
15 | if (estStepSize <= 1) { | |
16 | estStepSize = 1; | |
17 | } else if (estStepSize < 2) { | |
18 | estStepSize = 2; | |
19 | } | |
20 | return { | |
21 | unit: { | |
22 | // When passed estStepSize is less than 1, its order of magnitude | |
23 | // is equal to -number_of_leading_zeros in the estStepSize. | |
24 | fixes: -order, // Number of fractional digits. | |
25 | scale: scale, | |
26 | }, | |
27 | step: estStepSize, | |
28 | }; | |
29 | }, | |
30 | ||
31 | /** | |
32 | * Wraps the provided estimated step size of a range without altering it into a step size object. | |
33 | * | |
34 | * @param {*} min The start point of range. | |
35 | * @param {*} estStepSize The estimated step size. | |
36 | * @return {Object} Return the step size by an object of step x unit. | |
37 | * @return {Number} return.step The step count of units. | |
38 | * @return {Object} return.unit The unit. | |
39 | */ | |
40 | // derived from the original numeric segmenter but using 2 instead of 10 as base | |
41 | exactStep: function(min, estStepSize) { | |
42 | let order = Math.floor(Math.log2(estStepSize)); | |
43 | let scale = Math.pow(2, order); | |
44 | ||
45 | return { | |
46 | unit: { | |
47 | // add one decimal point if estStepSize is not a multiple of scale | |
48 | fixes: -order + (estStepSize % scale === 0 ? 0 : 1), | |
49 | scale: 1, | |
50 | }, | |
51 | step: estStepSize, | |
52 | }; | |
53 | }, | |
54 | }); | |
55 | ||
56 | Ext.define('Proxmox.widget.RRDChart', { | |
57 | extend: 'Ext.chart.CartesianChart', | |
58 | alias: 'widget.proxmoxRRDChart', | |
59 | ||
60 | unit: undefined, // bytes, bytespersecond, percent | |
61 | ||
62 | powerOfTwo: false, | |
63 | ||
64 | controller: { | |
65 | xclass: 'Ext.app.ViewController', | |
66 | ||
67 | init: function(view) { | |
68 | this.powerOfTwo = view.powerOfTwo; | |
69 | }, | |
70 | ||
71 | convertToUnits: function(value) { | |
72 | let units = ['', 'k', 'M', 'G', 'T', 'P']; | |
73 | let si = 0; | |
74 | let format = '0.##'; | |
75 | if (value < 0.1) format += '#'; | |
76 | const baseValue = this.powerOfTwo ? 1024 : 1000; | |
77 | while (value >= baseValue && si < units.length -1) { | |
78 | value = value / baseValue; | |
79 | si++; | |
80 | } | |
81 | ||
82 | // javascript floating point weirdness | |
83 | value = Ext.Number.correctFloat(value); | |
84 | ||
85 | // limit decimal points | |
86 | value = Ext.util.Format.number(value, format); | |
87 | ||
88 | let unit = units[si]; | |
89 | if (this.powerOfTwo) unit += 'i'; | |
90 | ||
91 | return `${value.toString()} ${unit}`; | |
92 | }, | |
93 | ||
94 | leftAxisRenderer: function(axis, label, layoutContext) { | |
95 | let me = this; | |
96 | return me.convertToUnits(label); | |
97 | }, | |
98 | ||
99 | onSeriesTooltipRender: function(tooltip, record, item) { | |
100 | let view = this.getView(); | |
101 | ||
102 | let suffix = ''; | |
103 | if (view.unit === 'percent') { | |
104 | suffix = '%'; | |
105 | } else if (view.unit === 'bytes') { | |
106 | suffix = 'B'; | |
107 | } else if (view.unit === 'bytespersecond') { | |
108 | suffix = 'B/s'; | |
109 | } | |
110 | ||
111 | let prefix = item.field; | |
112 | if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) { | |
113 | prefix = view.fieldTitles[view.fields.indexOf(item.field)]; | |
114 | } | |
115 | let v = this.convertToUnits(record.get(item.field)); | |
116 | let t = new Date(record.get('time')); | |
117 | tooltip.setHtml(`${prefix}: ${v}${suffix}<br>${t}`); | |
118 | }, | |
119 | ||
120 | onAfterAnimation: function(chart, eopts) { | |
121 | // if the undo button is disabled, disable our tool | |
122 | let ourUndoZoomButton = chart.header.tools[0]; | |
123 | let undoButton = chart.interactions[0].getUndoButton(); | |
124 | ourUndoZoomButton.setDisabled(undoButton.isDisabled()); | |
125 | }, | |
126 | }, | |
127 | ||
128 | width: 770, | |
129 | height: 300, | |
130 | animation: false, | |
131 | interactions: [ | |
132 | { | |
133 | type: 'crosszoom', | |
134 | }, | |
135 | ], | |
136 | legend: { | |
137 | padding: 0, | |
138 | }, | |
139 | listeners: { | |
140 | animationend: 'onAfterAnimation', | |
141 | }, | |
142 | ||
143 | constructor: function(config) { | |
144 | let me = this; | |
145 | ||
146 | let segmenter = config.powerOfTwo ? 'numericBase2' : 'numeric'; | |
147 | config.axes = [ | |
148 | { | |
149 | type: 'numeric', | |
150 | position: 'left', | |
151 | grid: true, | |
152 | renderer: 'leftAxisRenderer', | |
153 | minimum: 0, | |
154 | segmenter, | |
155 | }, | |
156 | { | |
157 | type: 'time', | |
158 | position: 'bottom', | |
159 | grid: true, | |
160 | fields: ['time'], | |
161 | }, | |
162 | ]; | |
163 | me.callParent([config]); | |
164 | }, | |
165 | ||
166 | initComponent: function() { | |
167 | let me = this; | |
168 | ||
169 | if (!me.store) { | |
170 | throw "cannot work without store"; | |
171 | } | |
172 | ||
173 | if (!me.fields) { | |
174 | throw "cannot work without fields"; | |
175 | } | |
176 | ||
177 | me.callParent(); | |
178 | ||
179 | // add correct label for left axis | |
180 | let axisTitle = ""; | |
181 | if (me.unit === 'percent') { | |
182 | axisTitle = "%"; | |
183 | } else if (me.unit === 'bytes') { | |
184 | axisTitle = "Bytes"; | |
185 | } else if (me.unit === 'bytespersecond') { | |
186 | axisTitle = "Bytes/s"; | |
187 | } else if (me.fieldTitles && me.fieldTitles.length === 1) { | |
188 | axisTitle = me.fieldTitles[0]; | |
189 | } else if (me.fields.length === 1) { | |
190 | axisTitle = me.fields[0]; | |
191 | } | |
192 | ||
193 | me.axes[0].setTitle(axisTitle); | |
194 | ||
195 | me.updateHeader(); | |
196 | ||
197 | if (me.header && me.legend) { | |
198 | me.header.padding = '4 9 4'; | |
199 | me.header.add(me.legend); | |
200 | } | |
201 | ||
202 | if (!me.noTool) { | |
203 | me.addTool({ | |
204 | type: 'minus', | |
205 | disabled: true, | |
206 | tooltip: gettext('Undo Zoom'), | |
207 | handler: function() { | |
208 | let undoButton = me.interactions[0].getUndoButton(); | |
209 | if (undoButton.handler) { | |
210 | undoButton.handler(); | |
211 | } | |
212 | }, | |
213 | }); | |
214 | } | |
215 | ||
216 | // add a series for each field we get | |
217 | me.fields.forEach(function(item, index) { | |
218 | let title = item; | |
219 | if (me.fieldTitles && me.fieldTitles[index]) { | |
220 | title = me.fieldTitles[index]; | |
221 | } | |
222 | me.addSeries(Ext.apply( | |
223 | { | |
224 | type: 'line', | |
225 | xField: 'time', | |
226 | yField: item, | |
227 | title: title, | |
228 | fill: true, | |
229 | style: { | |
230 | lineWidth: 1.5, | |
231 | opacity: 0.60, | |
232 | }, | |
233 | marker: { | |
234 | opacity: 0, | |
235 | scaling: 0.01, | |
236 | fx: { | |
237 | duration: 200, | |
238 | easing: 'easeOut', | |
239 | }, | |
240 | }, | |
241 | highlightCfg: { | |
242 | opacity: 1, | |
243 | scaling: 1.5, | |
244 | }, | |
245 | tooltip: { | |
246 | trackMouse: true, | |
247 | renderer: 'onSeriesTooltipRender', | |
248 | }, | |
249 | }, | |
250 | me.seriesConfig, | |
251 | )); | |
252 | }); | |
253 | ||
254 | // enable animation after the store is loaded | |
255 | me.store.onAfter('load', function() { | |
256 | me.setAnimation(true); | |
257 | }, this, { single: true }); | |
258 | }, | |
259 | }); |