]>
Commit | Line | Data |
---|---|---|
b5494945 DC |
1 | Ext.define('PVE.widget.RRDChart', { |
2 | extend: 'Ext.chart.CartesianChart', | |
3 | alias: 'widget.pveRRDChart', | |
4 | ||
5 | ||
7ec884ca | 6 | width: 770, |
b5494945 | 7 | height: 300, |
87484017 | 8 | animation: false, |
dba34cd6 DC |
9 | interactions: [{ |
10 | type: 'crosszoom' | |
11 | }], | |
b5494945 DC |
12 | axes: [{ |
13 | type: 'numeric', | |
14 | position: 'left', | |
15 | grid: true, | |
16 | renderer: 'leftAxisRenderer', | |
22f2f9d6 | 17 | minimum: 0 |
b5494945 DC |
18 | }, { |
19 | type: 'time', | |
20 | position: 'bottom', | |
21 | grid: true, | |
22f2f9d6 | 22 | fields: ['time'] |
b5494945 DC |
23 | }], |
24 | legend: { | |
ed37370c | 25 | docked: 'bottom' |
b5494945 DC |
26 | }, |
27 | listeners: { | |
dba34cd6 | 28 | animationend: 'onAfterAnimation' |
b5494945 DC |
29 | }, |
30 | ||
31 | bytesArr : [ | |
32 | 'memtotal', | |
33 | 'memused', | |
34 | 'roottotal', | |
35 | 'rootused', | |
36 | 'swaptotal', | |
37 | 'swapused', | |
38 | 'maxmem', | |
39 | 'mem', | |
40 | 'disk', | |
921324b6 DC |
41 | 'maxdisk', |
42 | 'total', | |
22f2f9d6 | 43 | 'used' |
b5494945 DC |
44 | ], |
45 | bytespersArr: [ | |
46 | 'netin', | |
47 | 'netout', | |
48 | 'diskread', | |
49 | 'diskwrite' | |
50 | ], | |
51 | ||
52 | percentArr: [ | |
53 | 'cpu', | |
54 | 'iowait' | |
55 | ], | |
56 | ||
57 | convertToUnits: function(value) { | |
58 | var units = ['', 'k','M','G','T', 'P']; | |
59 | var si = 0; | |
60 | while(value >= 1000 && si < (units.length -1)){ | |
61 | value = value / 1000; | |
62 | si++; | |
63 | } | |
64 | // javascript floating point weirdness | |
65 | value = Ext.Number.correctFloat(value); | |
66 | ||
67 | // limit to 2 decimal points | |
68 | value = Ext.util.Format.number(value, "0.##"); | |
69 | ||
ec0bd652 | 70 | return value.toString() + " " + units[si]; |
b5494945 DC |
71 | }, |
72 | ||
73 | leftAxisRenderer: function(axis, label, layoutContext) { | |
74 | var me = this; | |
75 | return me.convertToUnits(label); | |
76 | }, | |
77 | ||
78 | onSeriesTooltipRender: function (tooltip, record, item) { | |
79 | var me = this; | |
80 | var suffix = ''; | |
81 | ||
82 | if (me.percentArr.indexOf(item.field) != -1) { | |
83 | suffix = '%'; | |
84 | } else if (me.bytesArr.indexOf(item.field) != -1) { | |
85 | suffix = 'B'; | |
86 | } else if (me.bytespersArr.indexOf(item.field) != -1) { | |
87 | suffix = 'B/s'; | |
88 | } | |
89 | ||
90 | var prefix = item.field; | |
91 | if (me.fieldTitles && me.fieldTitles[me.fields.indexOf(item.field)]) { | |
92 | prefix = me.fieldTitles[me.fields.indexOf(item.field)]; | |
93 | } | |
94 | tooltip.setHtml(prefix + ': ' + this.convertToUnits(record.get(item.field)) + suffix + | |
95 | '<br>' + new Date(record.get('time'))); | |
96 | }, | |
97 | ||
94917cd1 DC |
98 | onAfterAnimation: function(chart, eopts) { |
99 | // if the undobuton is disabled, | |
100 | // disable our tool | |
101 | var ourUndoZoomButton = chart.tools[0]; | |
102 | var undoButton = chart.interactions[0].getUndoButton(); | |
103 | ourUndoZoomButton.setDisabled(undoButton.isDisabled()); | |
104 | }, | |
105 | ||
106 | initComponent: function() { | |
b5494945 DC |
107 | var me = this; |
108 | ||
94917cd1 DC |
109 | if (!me.store) { |
110 | throw "cannot work without store"; | |
111 | } | |
112 | ||
113 | if (!me.fields) { | |
114 | throw "cannot work without fields"; | |
115 | } | |
116 | ||
117 | me.callParent(); | |
118 | ||
b5494945 DC |
119 | // add correct label for left axis |
120 | var axisTitle = ""; | |
121 | if (me.percentArr.indexOf(me.fields[0]) != -1) { | |
122 | axisTitle = "%"; | |
123 | } else if (me.bytesArr.indexOf(me.fields[0]) != -1) { | |
124 | axisTitle = "Bytes"; | |
125 | } else if (me.bytespersArr.indexOf(me.fields[0]) != -1) { | |
126 | axisTitle = "Bytes/s"; | |
127 | } | |
128 | me.axes[0].setTitle(axisTitle); | |
129 | ||
ed37370c | 130 | me.addTool([{ |
dba34cd6 DC |
131 | type: 'minus', |
132 | disabled: true, | |
133 | tooltip: gettext('Undo Zoom'), | |
134 | handler: function(){ | |
135 | var undoButton = me.interactions[0].getUndoButton(); | |
136 | if (undoButton.handler) { | |
137 | undoButton.handler(); | |
138 | } | |
139 | } | |
ed37370c DC |
140 | },{ |
141 | type: 'restore', | |
142 | tooltip: gettext('Toggle Legend'), | |
143 | handler: function(){ | |
144 | me.legend.setVisible(!me.legend.isVisible()); | |
145 | } | |
146 | }]); | |
b5494945 DC |
147 | // add a series for each field we get |
148 | me.fields.forEach(function(item, index){ | |
149 | var title = item; | |
150 | if (me.fieldTitles && me.fieldTitles[index]) { | |
151 | title = me.fieldTitles[index]; | |
152 | } | |
153 | me.addSeries({ | |
154 | type: 'line', | |
155 | xField: 'time', | |
156 | yField: item, | |
157 | title: title, | |
158 | fill: true, | |
159 | style: { | |
160 | lineWidth: 1.5, | |
22f2f9d6 | 161 | opacity: 0.60 |
b5494945 DC |
162 | }, |
163 | marker: { | |
164 | opacity: 0, | |
165 | scaling: 0.01, | |
166 | fx: { | |
167 | duration: 200, | |
168 | easing: 'easeOut' | |
169 | } | |
170 | }, | |
171 | highlightCfg: { | |
172 | opacity: 1, | |
173 | scaling: 1.5 | |
174 | }, | |
175 | tooltip: { | |
176 | trackMouse: true, | |
177 | renderer: 'onSeriesTooltipRender' | |
178 | } | |
179 | }); | |
180 | }); | |
87484017 DC |
181 | |
182 | // enable animation after the store is loaded | |
183 | me.store.onAfter('load', function() { | |
184 | me.setAnimation(true); | |
185 | }, this, {single: true}); | |
b5494945 DC |
186 | } |
187 | }); |