]>
Commit | Line | Data |
---|---|---|
0c786d2b DM |
1 | Ext.define('Proxmox.widget.RRDChart', { |
2 | extend: 'Ext.chart.CartesianChart', | |
3 | alias: 'widget.proxmoxRRDChart', | |
4 | ||
5 | unit: undefined, // bytes, bytespersecond, percent | |
13fc756d | 6 | |
0c786d2b DM |
7 | controller: { |
8 | xclass: 'Ext.app.ViewController', | |
9 | ||
10 | convertToUnits: function(value) { | |
05a977a2 TL |
11 | let units = ['', 'k', 'M', 'G', 'T', 'P']; |
12 | let si = 0; | |
c58d4100 TL |
13 | let format = '0.##'; |
14 | if (value < 0.1) format += '#'; | |
01031528 | 15 | while (value >= 1000 && si < units.length -1) { |
0c786d2b DM |
16 | value = value / 1000; |
17 | si++; | |
18 | } | |
19 | ||
20 | // javascript floating point weirdness | |
21 | value = Ext.Number.correctFloat(value); | |
13fc756d | 22 | |
c58d4100 TL |
23 | // limit decimal points |
24 | value = Ext.util.Format.number(value, format); | |
13fc756d | 25 | |
0c786d2b DM |
26 | return value.toString() + " " + units[si]; |
27 | }, | |
28 | ||
29 | leftAxisRenderer: function(axis, label, layoutContext) { | |
05a977a2 | 30 | let me = this; |
0c786d2b DM |
31 | return me.convertToUnits(label); |
32 | }, | |
33 | ||
34 | onSeriesTooltipRender: function(tooltip, record, item) { | |
05a977a2 | 35 | let view = this.getView(); |
13fc756d | 36 | |
05a977a2 TL |
37 | let suffix = ''; |
38 | if (view.unit === 'percent') { | |
0c786d2b | 39 | suffix = '%'; |
05a977a2 | 40 | } else if (view.unit === 'bytes') { |
0c786d2b | 41 | suffix = 'B'; |
05a977a2 | 42 | } else if (view.unit === 'bytespersecond') { |
0c786d2b DM |
43 | suffix = 'B/s'; |
44 | } | |
13fc756d | 45 | |
05a977a2 TL |
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)]; | |
0c786d2b | 49 | } |
efa61051 TL |
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}`); | |
0c786d2b DM |
53 | }, |
54 | ||
55 | onAfterAnimation: function(chart, eopts) { | |
efa61051 | 56 | // if the undo button is disabled, disable our tool |
05a977a2 TL |
57 | let ourUndoZoomButton = chart.header.tools[0]; |
58 | let undoButton = chart.interactions[0].getUndoButton(); | |
0c786d2b | 59 | ourUndoZoomButton.setDisabled(undoButton.isDisabled()); |
01031528 | 60 | }, |
0c786d2b | 61 | }, |
13fc756d | 62 | |
0c786d2b DM |
63 | width: 770, |
64 | height: 300, | |
65 | animation: false, | |
efa61051 TL |
66 | interactions: [ |
67 | { | |
01031528 | 68 | type: 'crosszoom', |
efa61051 TL |
69 | }, |
70 | ], | |
0c786d2b | 71 | legend: { |
e662b4a0 | 72 | padding: 0, |
0c786d2b | 73 | }, |
efa61051 TL |
74 | axes: [ |
75 | { | |
76 | type: 'numeric', | |
77 | position: 'left', | |
78 | grid: true, | |
79 | renderer: 'leftAxisRenderer', | |
01031528 | 80 | minimum: 0, |
efa61051 TL |
81 | }, |
82 | { | |
83 | type: 'time', | |
84 | position: 'bottom', | |
85 | grid: true, | |
01031528 | 86 | fields: ['time'], |
efa61051 TL |
87 | }, |
88 | ], | |
0c786d2b | 89 | listeners: { |
01031528 | 90 | animationend: 'onAfterAnimation', |
0c786d2b DM |
91 | }, |
92 | ||
0c786d2b | 93 | initComponent: function() { |
05a977a2 | 94 | let me = this; |
0c786d2b DM |
95 | |
96 | if (!me.store) { | |
97 | throw "cannot work without store"; | |
98 | } | |
99 | ||
100 | if (!me.fields) { | |
101 | throw "cannot work without fields"; | |
102 | } | |
103 | ||
104 | me.callParent(); | |
105 | ||
106 | // add correct label for left axis | |
05a977a2 | 107 | let axisTitle = ""; |
0c786d2b DM |
108 | if (me.unit === 'percent') { |
109 | axisTitle = "%"; | |
110 | } else if (me.unit === 'bytes') { | |
111 | axisTitle = "Bytes"; | |
112 | } else if (me.unit === 'bytespersecond') { | |
113 | axisTitle = "Bytes/s"; | |
51613ace DC |
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]; | |
0c786d2b DM |
118 | } |
119 | ||
120 | me.axes[0].setTitle(axisTitle); | |
121 | ||
e662b4a0 | 122 | me.updateHeader(); |
0855ba61 TL |
123 | |
124 | if (me.header && me.legend) { | |
125 | me.header.padding = '4 9 4'; | |
126 | me.header.add(me.legend); | |
127 | } | |
e662b4a0 | 128 | |
fcb5b70f | 129 | if (!me.noTool) { |
e662b4a0 | 130 | me.addTool({ |
fcb5b70f DC |
131 | type: 'minus', |
132 | disabled: true, | |
133 | tooltip: gettext('Undo Zoom'), | |
01031528 | 134 | handler: function() { |
05a977a2 | 135 | let undoButton = me.interactions[0].getUndoButton(); |
fcb5b70f DC |
136 | if (undoButton.handler) { |
137 | undoButton.handler(); | |
138 | } | |
01031528 | 139 | }, |
e662b4a0 | 140 | }); |
fcb5b70f DC |
141 | } |
142 | ||
0c786d2b | 143 | // add a series for each field we get |
01031528 | 144 | me.fields.forEach(function(item, index) { |
05a977a2 | 145 | let title = item; |
0c786d2b DM |
146 | if (me.fieldTitles && me.fieldTitles[index]) { |
147 | title = me.fieldTitles[index]; | |
148 | } | |
9950ec0f DC |
149 | me.addSeries(Ext.apply( |
150 | { | |
151 | type: 'line', | |
152 | xField: 'time', | |
153 | yField: item, | |
154 | title: title, | |
155 | fill: true, | |
156 | style: { | |
157 | lineWidth: 1.5, | |
01031528 | 158 | opacity: 0.60, |
9950ec0f DC |
159 | }, |
160 | marker: { | |
161 | opacity: 0, | |
162 | scaling: 0.01, | |
163 | fx: { | |
164 | duration: 200, | |
01031528 TL |
165 | easing: 'easeOut', |
166 | }, | |
9950ec0f DC |
167 | }, |
168 | highlightCfg: { | |
169 | opacity: 1, | |
01031528 | 170 | scaling: 1.5, |
9950ec0f DC |
171 | }, |
172 | tooltip: { | |
173 | trackMouse: true, | |
01031528 TL |
174 | renderer: 'onSeriesTooltipRender', |
175 | }, | |
0c786d2b | 176 | }, |
01031528 | 177 | me.seriesConfig, |
9950ec0f | 178 | )); |
0c786d2b DM |
179 | }); |
180 | ||
181 | // enable animation after the store is loaded | |
182 | me.store.onAfter('load', function() { | |
183 | me.setAnimation(true); | |
01031528 TL |
184 | }, this, { single: true }); |
185 | }, | |
0c786d2b | 186 | }); |