]>
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
8 xclass
: 'Ext.app.ViewController',
10 convertToUnits: function(value
) {
11 let units
= ['', 'k', 'M', 'G', 'T', 'P'];
14 if (value
< 0.1) format
+= '#';
15 while (value
>= 1000 && si
< units
.length
-1) {
20 // javascript floating point weirdness
21 value
= Ext
.Number
.correctFloat(value
);
23 // limit decimal points
24 value
= Ext
.util
.Format
.number(value
, format
);
26 return value
.toString() + " " + units
[si
];
29 leftAxisRenderer: function(axis
, label
, layoutContext
) {
31 return me
.convertToUnits(label
);
34 onSeriesTooltipRender: function(tooltip
, record
, item
) {
35 let view
= this.getView();
38 if (view
.unit
=== 'percent') {
40 } else if (view
.unit
=== 'bytes') {
42 } else if (view
.unit
=== 'bytespersecond') {
46 let prefix
= item
.field
;
47 if (view
.fieldTitles
&& view
.fieldTitles
[view
.fields
.indexOf(item
.field
)]) {
48 prefix
= view
.fieldTitles
[view
.fields
.indexOf(item
.field
)];
50 let v
= this.convertToUnits(record
.get(item
.field
));
51 let t
= new Date(record
.get('time'));
52 tooltip
.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
55 onAfterAnimation: function(chart
, eopts
) {
56 // if the undo button is disabled, disable our tool
57 let ourUndoZoomButton
= chart
.header
.tools
[0];
58 let undoButton
= chart
.interactions
[0].getUndoButton();
59 ourUndoZoomButton
.setDisabled(undoButton
.isDisabled());
79 renderer
: 'leftAxisRenderer',
90 animationend
: 'onAfterAnimation',
93 initComponent: function() {
97 throw "cannot work without store";
101 throw "cannot work without fields";
106 // add correct label for left axis
108 if (me
.unit
=== 'percent') {
110 } else if (me
.unit
=== 'bytes') {
112 } else if (me
.unit
=== 'bytespersecond') {
113 axisTitle
= "Bytes/s";
114 } else if (me
.fieldTitles
&& me
.fieldTitles
.length
=== 1) {
115 axisTitle
= me
.fieldTitles
[0];
116 } else if (me
.fields
.length
=== 1) {
117 axisTitle
= me
.fields
[0];
120 me
.axes
[0].setTitle(axisTitle
);
124 if (me
.header
&& me
.legend
) {
125 me
.header
.padding
= '4 9 4';
126 me
.header
.add(me
.legend
);
133 tooltip
: gettext('Undo Zoom'),
134 handler: function() {
135 let undoButton
= me
.interactions
[0].getUndoButton();
136 if (undoButton
.handler
) {
137 undoButton
.handler();
143 // add a series for each field we get
144 me
.fields
.forEach(function(item
, index
) {
146 if (me
.fieldTitles
&& me
.fieldTitles
[index
]) {
147 title
= me
.fieldTitles
[index
];
149 me
.addSeries(Ext
.apply(
174 renderer
: 'onSeriesTooltipRender',
181 // enable animation after the store is loaded
182 me
.store
.onAfter('load', function() {
183 me
.setAnimation(true);
184 }, this, { single
: true });