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