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