]>
git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/panel/RRDChart.js
1 Ext
.define('Proxmox.widget.RRDChart', {
2 extend
: 'Ext.chart.CartesianChart',
3 alias
: 'widget.proxmoxRRDChart',
5 unit
: undefined, // bytes, bytespersecond, percent
10 xclass
: 'Ext.app.ViewController',
12 init: function(view
) {
13 this.powerOfTwo
= view
.powerOfTwo
;
16 convertToUnits: function(value
) {
17 let units
= ['', 'k', 'M', 'G', 'T', 'P'];
20 if (value
< 0.1) format
+= '#';
21 const baseValue
= this.powerOfTwo
? 1024 : 1000;
22 while (value
>= baseValue
&& si
< units
.length
-1) {
23 value
= value
/ baseValue
;
27 // javascript floating point weirdness
28 value
= Ext
.Number
.correctFloat(value
);
30 // limit decimal points
31 value
= Ext
.util
.Format
.number(value
, format
);
34 if (this.powerOfTwo
) unit
+= 'i';
36 return `${value.toString()} ${unit}`;
39 leftAxisRenderer: function(axis
, label
, layoutContext
) {
41 return me
.convertToUnits(label
);
44 onSeriesTooltipRender: function(tooltip
, record
, item
) {
45 let view
= this.getView();
48 if (view
.unit
=== 'percent') {
50 } else if (view
.unit
=== 'bytes') {
52 } else if (view
.unit
=== 'bytespersecond') {
56 let prefix
= item
.field
;
57 if (view
.fieldTitles
&& view
.fieldTitles
[view
.fields
.indexOf(item
.field
)]) {
58 prefix
= view
.fieldTitles
[view
.fields
.indexOf(item
.field
)];
60 let v
= this.convertToUnits(record
.get(item
.field
));
61 let t
= new Date(record
.get('time'));
62 tooltip
.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
65 onAfterAnimation: function(chart
, eopts
) {
66 // if the undo button is disabled, disable our tool
67 let ourUndoZoomButton
= chart
.header
.tools
[0];
68 let undoButton
= chart
.interactions
[0].getUndoButton();
69 ourUndoZoomButton
.setDisabled(undoButton
.isDisabled());
89 renderer
: 'leftAxisRenderer',
100 animationend
: 'onAfterAnimation',
103 initComponent: function() {
107 throw "cannot work without store";
111 throw "cannot work without fields";
116 // add correct label for left axis
118 if (me
.unit
=== 'percent') {
120 } else if (me
.unit
=== 'bytes') {
122 } else if (me
.unit
=== 'bytespersecond') {
123 axisTitle
= "Bytes/s";
124 } else if (me
.fieldTitles
&& me
.fieldTitles
.length
=== 1) {
125 axisTitle
= me
.fieldTitles
[0];
126 } else if (me
.fields
.length
=== 1) {
127 axisTitle
= me
.fields
[0];
130 me
.axes
[0].setTitle(axisTitle
);
134 if (me
.header
&& me
.legend
) {
135 me
.header
.padding
= '4 9 4';
136 me
.header
.add(me
.legend
);
143 tooltip
: gettext('Undo Zoom'),
144 handler: function() {
145 let undoButton
= me
.interactions
[0].getUndoButton();
146 if (undoButton
.handler
) {
147 undoButton
.handler();
153 // add a series for each field we get
154 me
.fields
.forEach(function(item
, index
) {
156 if (me
.fieldTitles
&& me
.fieldTitles
[index
]) {
157 title
= me
.fieldTitles
[index
];
159 me
.addSeries(Ext
.apply(
184 renderer
: 'onSeriesTooltipRender',
191 // enable animation after the store is loaded
192 me
.store
.onAfter('load', function() {
193 me
.setAnimation(true);
194 }, this, { single
: true });