10 var callLuciRealtimeStats = rpc.declare({
12 method: 'getRealtimeStats',
13 params: [ 'mode', 'device' ],
14 expect: { result: [] }
20 Math.log2 = Math.log2 || function(x) { return Math.log(x) * Math.LOG2E; };
22 function rate(n, br) {
23 n = (n || 0).toFixed(2);
24 return [ '%1024.2mbit/s'.format(n * 8), br ? E('br') : ' ', '(%1024.2mB/s)'.format(n) ]
30 this.loadSVG(L.resource('bandwidth.svg')),
35 updateGraph: function(ifname, svg, lines, cb) {
36 var G = svg.firstElementChild;
38 var view = document.querySelector('#view');
40 var width = view.offsetWidth - 2;
44 var data_wanted = Math.floor(width / step);
49 for (var i = 0; i < lines.length; i++)
59 /* prefill datasets */
60 for (var i = 0; i < data_values.length; i++)
61 for (var j = 0; j < data_wanted; j++)
62 data_values[i][j] = 0;
64 /* plot horizontal time interval lines */
65 for (var i = width % (step * 60); i < width; i += step * 60) {
66 var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
67 line.setAttribute('x1', i);
68 line.setAttribute('y1', 0);
69 line.setAttribute('x2', i);
70 line.setAttribute('y2', '100%');
71 line.setAttribute('style', 'stroke:black;stroke-width:0.1');
73 var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
74 text.setAttribute('x', i + 5);
75 text.setAttribute('y', 15);
76 text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
77 text.appendChild(document.createTextNode(Math.round((width - i) / step / 60) + 'm'));
83 info.interval = pollInterval;
84 info.timeframe = data_wanted / 60;
101 pollData: function() {
102 poll.add(L.bind(function() {
105 for (var i = 0; i < graphPolls.length; i++) {
106 var ctx = graphPolls[i];
107 tasks.push(L.resolveDefault(callLuciRealtimeStats('interface', ctx.ifname), []));
110 return Promise.all(tasks).then(L.bind(function(datasets) {
111 for (var gi = 0; gi < graphPolls.length; gi++) {
112 var ctx = graphPolls[gi],
119 var data_wanted = Math.floor(ctx.width / ctx.step);
120 var last_timestamp = NaN;
122 for (var i = 0, di = 0; di < lines.length; di++) {
123 if (lines[di] == null)
126 var multiply = (lines[di].multiply != null) ? lines[di].multiply : 1,
127 offset = (lines[di].offset != null) ? lines[di].offset : 0;
129 for (var j = ctx.timestamp ? 0 : 1; j < data.length; j++) {
130 /* skip overlapping entries */
131 if (data[j][0] <= ctx.timestamp)
136 last_timestamp = data[j][0];
139 if (lines[di].counter) {
140 /* normalize difference against time interval */
142 var time_delta = data[j][0] - data[j - 1][0];
144 info.line_current[i] = (data[j][di + 1] * multiply - data[j - 1][di + 1] * multiply) / time_delta;
145 info.line_current[i] -= Math.min(info.line_current[i], offset);
146 values[i].push(info.line_current[i]);
151 info.line_current[i] = data[j][di + 1] * multiply;
152 info.line_current[i] -= Math.min(info.line_current[i], offset);
153 values[i].push(info.line_current[i]);
160 /* cut off outdated entries */
161 ctx.fill = Math.min(ctx.fill, data_wanted);
163 for (var i = 0; i < values.length; i++) {
164 var len = values[i].length;
165 values[i] = values[i].slice(len - data_wanted, len);
167 /* find peaks, averages */
168 info.line_peak[i] = NaN;
169 info.line_average[i] = 0;
171 for (var j = 0; j < values[i].length; j++) {
172 info.line_peak[i] = isNaN(info.line_peak[i]) ? values[i][j] : Math.max(info.line_peak[i], values[i][j]);
173 info.line_average[i] += values[i][j];
176 info.line_average[i] = info.line_average[i] / ctx.fill;
179 info.peak = Math.max.apply(Math, info.line_peak);
181 /* remember current timestamp, calculate horizontal scale */
182 if (!isNaN(last_timestamp))
183 ctx.timestamp = last_timestamp;
185 var size = Math.floor(Math.log2(info.peak)),
186 div = Math.pow(2, size - (size % 10)),
187 mult = info.peak / div,
188 mult = (mult < 5) ? 2 : ((mult < 50) ? 10 : ((mult < 500) ? 100 : 1000));
190 info.peak = info.peak + (mult * div) - (info.peak % (mult * div));
192 data_scale = ctx.height / info.peak;
195 for (var i = 0, di = 0; di < lines.length; di++) {
196 if (lines[di] == null)
199 var el = ctx.svg.firstElementChild.getElementById(lines[di].line),
200 pt = '0,' + ctx.height,
206 for (var j = 0; j < values[i].length; j++) {
207 var x = j * ctx.step;
209 y = ctx.height - Math.floor(values[i][j] * data_scale);
210 //y -= Math.floor(y % (1 / data_scale));
212 pt += ' ' + x + ',' + y;
215 pt += ' ' + ctx.width + ',' + y + ' ' + ctx.width + ',' + ctx.height;
217 el.setAttribute('points', pt);
222 info.label_25 = 0.25 * info.peak;
223 info.label_50 = 0.50 * info.peak;
224 info.label_75 = 0.75 * info.peak;
226 if (typeof(ctx.cb) == 'function')
227 ctx.cb(ctx.svg, info);
230 }, this), pollInterval);
233 loadSVG: function(src) {
234 return request.get(src).then(function(response) {
236 throw new Error(response.statusText);
239 'style': 'width:100%;height:300px;border:1px solid #000;background:#fff'
240 }, E(response.text()));
244 render: function(data) {
248 var v = E('div', {}, E('div'));
250 for (var i = 0; i < devs.length; i++) {
251 var ifname = devs[i].getName();
256 var csvg = svg.cloneNode(true);
258 v.firstElementChild.appendChild(E('div', { 'data-tab': ifname, 'data-tab-title': ifname }, [
260 E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
263 E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
264 E('div', { 'class': 'tr' }, [
265 E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Inbound:') ])),
266 E('div', { 'class': 'td', 'id': 'rx_bw_cur' }, rate(0, true)),
268 E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
269 E('div', { 'class': 'td', 'id': 'rx_bw_avg' }, rate(0, true)),
271 E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
272 E('div', { 'class': 'td', 'id': 'rx_bw_peak' }, rate(0, true))
274 E('div', { 'class': 'tr' }, [
275 E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Outbound:') ])),
276 E('div', { 'class': 'td', 'id': 'tx_bw_cur' }, rate(0, true)),
278 E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
279 E('div', { 'class': 'td', 'id': 'tx_bw_avg' }, rate(0, true)),
281 E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
282 E('div', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
287 this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
288 var G = svg.firstElementChild, tab = svg.parentNode;
290 G.getElementById('label_25').firstChild.data = rate(info.label_25).join('');
291 G.getElementById('label_50').firstChild.data = rate(info.label_50).join('');
292 G.getElementById('label_75').firstChild.data = rate(info.label_75).join('');
294 tab.querySelector('#scale').firstChild.data = _('(%d minute window, %d second interval)').format(info.timeframe, info.interval);
296 dom.content(tab.querySelector('#rx_bw_cur'), rate(info.line_current[0], true));
297 dom.content(tab.querySelector('#rx_bw_avg'), rate(info.line_average[0], true));
298 dom.content(tab.querySelector('#rx_bw_peak'), rate(info.line_peak[0], true));
300 dom.content(tab.querySelector('#tx_bw_cur'), rate(info.line_current[1], true));
301 dom.content(tab.querySelector('#tx_bw_avg'), rate(info.line_average[1], true));
302 dom.content(tab.querySelector('#tx_bw_peak'), rate(info.line_peak[1], true));
306 ui.tabs.initTabGroup(v.firstElementChild.childNodes);
313 handleSaveApply: null,