← Back to branch summary

~ubuntu-branches/ubuntu/trusty/ntop/trusty

« back to all changes in this revision

Viewing changes to html/graph_if.svg

  • Committer: Bazaar Package Importer
  • Author(s): Ola Lundqvist
  • Date: 2008-06-15 14:38:28 UTC
  • mfrom: (2.1.11 intrepid)
  • Revision ID: james.westby@ubuntu.com-20080615143828-oalh84nda2hje4do
Tags: 3:3.3-11
http://bugs.debian.org/479490
Correction of Polish translation encoding, closes: #479490. Thanks
to Christian Perrier <bubulle@debian.org> for the help.

Show diffs side-by-side

added added

removed removed

Lines of Context:
html/graph_if.svg
 
1
<?xml version="1.0" encoding="iso-8859-1"?>
 
2
<!--
 
3
ntop port by Luca Deri
 
4
 
 
5
OpenWRT port of this file based originally on the following:
 
6
 
 
7
 
 
8
$Id: graph_if.svg,v 1.1 2007/01/07 23:46:54 deri Exp $
 
9
part of m0n0wall (http://m0n0.ch/wall)
 
10
 
 
11
Copyright (C) 2004-2005 T. Lechat <dev@lechat.org>, Manuel Kasper <mk@neon1.net>
 
12
and Jonathan Watt <jwatt@jwatt.org>.
 
13
All rights reserved.
 
14
 
 
15
Redistribution and use in source and binary forms, with or without
 
16
modification, are permitted provided that the following conditions are met:
 
17
 
 
18
1. Redistributions of source code must retain the above copyright notice,
 
19
        this list of conditions and the following disclaimer.
 
20
 
 
21
2. Redistributionss in binary form must reproduce the above copyright
 
22
        notice, this list of conditions and the following disclaimer in the
 
23
        documentation and/or other materials provided with the distribution.
 
24
 
 
25
THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES,
 
26
BINCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
 
27
AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 
28
AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
 
29
OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 
30
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 
31
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 
32
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 
33
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 
34
POSSIBILITY OF SUCH DAMAGE.
 
35
-->
 
36
<svg xml:space='preserve' xmlns='http://www.w3.org/2000/svg'
 
37
        xmlns:xlink='http://www.w3.org/1999/xlink'
 
38
        width='100%' height='100%'
 
39
        viewBox='0 0 600 300'
 
40
        preserveAspectRatio='none'
 
41
        onload='init(evt)'
 
42
>
 
43
<g id='graph'>
 
44
        <rect id='bg' x1='0' y1='0' width='600' height='300' fill='white' />
 
45
 
 
46
        <text id='graph_ip_lbl'  x='50' y='15' fill='#435370' text-anchor='end'>IP</text>
 
47
        <text id='graph_non_ip_lbl' x='50' y='35' fill='#8092B3' text-anchor='end'>Non IP</text>
 
48
 
 
49
        <text id='graph_ip_txt'  x='54' y='15' fill='#435370'>--</text>
 
50
        <text id='graph_non_ip_txt' x='54' y='35' fill='#8092B3'>--</text>
 
51
'
 
52
        <text id='switch_unit'  x='200' y='15' fill='#435370' cursor='pointer'>Switch to bytes/s</text>
 
53
        <text id='switch_scale' x='200' y='35' fill='#435370' cursor='pointer'>Autoscale (follow)</text>
 
54
 
 
55
        <text id='error'           x='300' y='125' text-anchor='middle' visibility='hidden' fill='blue'>Cannot get data about interface</text>
 
56
        <text id='collect_initial' x='300' y='125' text-anchor='middle' visibility='hidden' fill='gray'>Collecting initial data, please wait...</text>
 
57
 
 
58
        <path id='grid' d='M 2 75 L 600 75 M 2 150 L 600 150 M 2 225 L 600 225' stroke='gray' stroke-opacity='0.5' />
 
59
        <text id='grid_txt3' x='600' y='223' fill='gray' text-anchor='end'>--</text>
 
60
        <text id='grid_txt2' x='600' y='148' fill='gray' text-anchor='end'>--</text>
 
61
        <text id='grid_txt1' x='600' y='73' fill='gray' text-anchor='end'>--</text>
 
62
 
 
63
        <path id='graph_non_ip' d='' fill='none' stroke='#8092B3' stroke-width='2' stroke-opacity='0.8' />
 
64
        <path id='graph_ip'  d='' fill='none' stroke='#435370' stroke-width='2' stroke-opacity='0.8' />
 
65
 
 
66
        <line id='axis_x' x1='2' y1='299' x2='600' y2='299' stroke='black' />
 
67
        <line id='axis_y' x1='1' y1='300' x2='1' y2='0' stroke='black' />
 
68
</g>
 
69
<script type="text/ecmascript">
 
70
<![CDATA[
 
71
if (typeof getURL == 'undefined') {
 
72
        getURL = function(url, callback) {
 
73
                if (!url) throw 'No URL for getURL';
 
74
 
 
75
                try {
 
76
                        if (typeof callback.operationComplete == 'function') {
 
77
                                callback = callback.operationComplete;
 
78
                        }
 
79
                } catch (e) {}
 
80
 
 
81
                if (typeof callback != 'function') {
 
82
                        throw 'No callback function for getURL';
 
83
                }
 
84
 
 
85
                var http_request = null;
 
86
                if (typeof XMLHttpRequest != 'undefined') {
 
87
                        http_request = new XMLHttpRequest();
 
88
                } else if (typeof ActiveXObject != 'undefined') {
 
89
                        try {
 
90
                                http_request = new ActiveXObject('Msxml2.XMLHTTP');
 
91
                        } catch (e) {
 
92
                                try {
 
93
                                        http_request = new ActiveXObject('Microsoft.XMLHTTP');
 
94
                                } catch (e) {}
 
95
                        }
 
96
                }
 
97
                if (!http_request) {
 
98
                        throw 'Both getURL and XMLHttpRequest are undefined';
 
99
                }
 
100
 
 
101
                http_request.onreadystatechange = function() {
 
102
                        if (http_request.readyState == 4) {
 
103
                                callback(
 
104
                                        {
 
105
                                                success : true,
 
106
                                                content : http_request.responseText,
 
107
                                                contentType : http_request.getResponseHeader("Content-Type")
 
108
                                        }
 
109
                                );
 
110
                        }
 
111
                }
 
112
                http_request.open('GET', url, true);
 
113
                http_request.send(null);
 
114
        }
 
115
}
 
116
 
 
117
var SVGDoc = null;
 
118
var last_ifin = 0;
 
119
var last_ifout = 0;
 
120
var last_ugmt = 0;
 
121
var max = 0;
 
122
var plot_in = new Array();
 
123
var plot_out = new Array();
 
124
 
 
125
var max_num_points = 120;  // maximum number of plot data points
 
126
var step = 600 / max_num_points ;
 
127
var unit = 'bits';
 
128
var scale_type = 'follow';
 
129
 
 
130
var fetch_url='';
 
131
 
 
132
function init(evt) {
 
133
        /* hacked in fix for all browsers by spectra
 
134
         * he says is 'ugly', and someone may want to redo the 'right' way */
 
135
        fetch_url=location.search.split('?');
 
136
        fetch_url='/ifStats.html';
 
137
        /* end hacked in fix */
 
138
        SVGDoc = evt.target.ownerDocument;
 
139
        SVGDoc.getElementById("switch_unit").addEventListener("mousedown", switch_unit, false);
 
140
        SVGDoc.getElementById("switch_scale").addEventListener("mousedown", switch_scale, false);
 
141
 
 
142
        fetch_data();
 
143
        setInterval('fetch_data()', 1000);
 
144
}
 
145
 
 
146
function switch_unit(event) {
 
147
        SVGDoc.getElementById('switch_unit').firstChild.data = 'Switch to ' + unit + '/s';
 
148
        unit = (unit == 'bits') ? 'bytes' : 'bits';
 
149
}
 
150
 
 
151
function switch_scale(event) {
 
152
        scale_type = (scale_type == 'up') ? 'follow' : 'up';
 
153
        SVGDoc.getElementById('switch_scale').firstChild.data = 'AutoScale (' + scale_type + ')';
 
154
}
 
155
 
 
156
function fetch_data() {
 
157
        if (fetch_url) {
 
158
                getURL(fetch_url, plot_data);
 
159
        } else {
 
160
                handle_error();
 
161
        }
 
162
}
 
163
 
 
164
function plot_data(obj) {
 
165
        if (!obj.success) return handle_error();  // getURL failed to get data
 
166
 
 
167
        // parse incoming data
 
168
        // (format: "date" output, newline, proper line of /proc/net/dev)
 
169
        var data=obj.content.split("\n");
 
170
        var dateStr=data[0];
 
171
        //fake timezone cause the real value might confuse JS
 
172
        dateStr=dateStr.replace(/ [A-Z]+ /, ' GMT ');
 
173
        var ugmt=(Date.parse(dateStr))/1000;
 
174
 
 
175
        data=data[1].split(/\s+|:/);
 
176
        while (data[0]!=parseInt(data[0])) {
 
177
                data.shift();
 
178
 
 
179
                if (0==data.length) return;
 
180
        }
 
181
        var ifin=parseInt(data[0]);
 
182
        var ifout=parseInt(data[1]);
 
183
 
 
184
        if (!isNumber(ifin) || !isNumber(ifout)) {
 
185
                return handle_error();
 
186
        }
 
187
 
 
188
        var diff_ugmt  = ugmt - last_ugmt;
 
189
        var diff_ifin  = ifin - last_ifin;
 
190
        var diff_ifout = ifout - last_ifout;
 
191
 
 
192
        if (diff_ugmt == 0) diff_ugmt = 1;  // avoid division by zero
 
193
 
 
194
        last_ugmt = ugmt;
 
195
        last_ifin = ifin;
 
196
        last_ifout = ifout;
 
197
 
 
198
        switch (plot_in.length) {
 
199
        case 0:
 
200
                SVGDoc.getElementById("collect_initial").setAttributeNS(null, 'visibility', 'visible');
 
201
                plot_in[0] = diff_ifin / diff_ugmt;
 
202
                plot_out[0] = diff_ifout / diff_ugmt;
 
203
                return;
 
204
        case 1:
 
205
                SVGDoc.getElementById("collect_initial").setAttributeNS(null, 'visibility', 'hidden');
 
206
                break;
 
207
        case max_num_points:
 
208
                // shift plot to left if the maximum number of plot points has been reached
 
209
                var i = 0;
 
210
                while (i < max_num_points) {
 
211
                        plot_in[i] = plot_in[i+1];
 
212
                        plot_out[i] = plot_out[++i];
 
213
                }
 
214
                plot_in.length--;
 
215
                plot_out.length--;
 
216
        }
 
217
 
 
218
        plot_in[plot_in.length] = diff_ifin / diff_ugmt;
 
219
        plot_out[plot_out.length]= diff_ifout / diff_ugmt;
 
220
        var index_plot = plot_in.length - 1;
 
221
 
 
222
        SVGDoc.getElementById('graph_ip_txt').firstChild.data = formatSpeed(plot_in[index_plot], unit);
 
223
        SVGDoc.getElementById('graph_non_ip_txt').firstChild.data = formatSpeed(plot_out[index_plot], unit);
 
224
 
 
225
        // determine peak for sensible scaling
 
226
        if (scale_type == 'up') {
 
227
                if (plot_in[index_plot] > max) max = plot_in[index_plot];
 
228
                if (plot_out[index_plot] > max) max = plot_out[index_plot];
 
229
        } else if (scale_type == 'follow') {
 
230
                i = 0;
 
231
                max = 0;
 
232
                while (i < plot_in.length) {
 
233
                        if (plot_in[i] > max) max = plot_in[i];
 
234
                        if (plot_out[i] > max) max = plot_out[i];
 
235
                        i++;
 
236
                }
 
237
        }
 
238
 
 
239
        var rmax=makeRoundMax(max);
 
240
 
 
241
        var scale = 298 / rmax;
 
242
 
 
243
        // change labels accordingly
 
244
        SVGDoc.getElementById('grid_txt1').firstChild.data = formatSpeed(3*rmax/4, unit);
 
245
        SVGDoc.getElementById('grid_txt2').firstChild.data = formatSpeed(2*rmax/4, unit);
 
246
        SVGDoc.getElementById('grid_txt3').firstChild.data = formatSpeed(rmax/4, unit);
 
247
 
 
248
        var path_in = "M 0 " + (298 - (plot_in[0] * scale));
 
249
        var path_out = "M 0 " + (298 - (plot_out[0] * scale));
 
250
        for (i = 1; i < plot_in.length; i++) {
 
251
                var x = step * i;
 
252
                var y_in = 298 - (plot_in[i] * scale);
 
253
                var y_out = 298 - (plot_out[i] * scale);
 
254
                path_in += " L" + x + " " + y_in;
 
255
                path_out += " L" + x + " " + y_out;
 
256
        }
 
257
 
 
258
        SVGDoc.getElementById('error').setAttributeNS(null, 'visibility', 'hidden');
 
259
        SVGDoc.getElementById('graph_ip').setAttributeNS(null, 'd', path_in);
 
260
        SVGDoc.getElementById('graph_non_ip').setAttributeNS(null, 'd', path_out);
 
261
}
 
262
 
 
263
function makeRoundMax(max) {
 
264
        if (unit == 'bits') {
 
265
                rmax = 1250;
 
266
                i = 0;
 
267
                while (max > rmax) {
 
268
                        //dump(i+'\n');
 
269
                        i++;
 
270
                        if (i && (i % 4 == 0)) {
 
271
                                rmax *= 1.25;
 
272
                        } else {
 
273
                                rmax *= 2;
 
274
                        }
 
275
                }
 
276
        } else {
 
277
                rmax = 1024;
 
278
                i = 0;
 
279
                while (max > rmax) {
 
280
                        i++;
 
281
                        if (i && (i % 4 == 0)) {
 
282
                                rmax *= 1.25;
 
283
                        } else {
 
284
                                rmax *= 2;
 
285
                        }
 
286
 
 
287
                        if (i == 8) rmax *= 1.024;
 
288
                }
 
289
        }
 
290
        return rmax;
 
291
}
 
292
 
 
293
function handle_error() {
 
294
        SVGDoc.getElementById("error").setAttributeNS(null, 'visibility', 'visible');
 
295
}
 
296
 
 
297
function isNumber(a) {
 
298
        return typeof a == 'number' && isFinite(a);
 
299
}
 
300
 
 
301
function formatSpeed(speed, unit) {
 
302
        if (unit == 'bits') return formatSpeedBits(speed);
 
303
        if (unit == 'bytes') return formatSpeedBytes(speed);
 
304
}
 
305
 
 
306
function formatSpeedBits(speed) {
 
307
        // format speed in bits/sec, input: bytes/sec
 
308
        if (speed < 125000) return Math.round(speed / 125) + " Kbps";
 
309
        if (speed < 125000000) return Math.round(speed / 1250)/100 + " Mbps";
 
310
        // else
 
311
        return Math.round(speed / 1250000)/100 + " Gbps";  // wow!
 
312
}
 
313
 
 
314
function formatSpeedBytes(speed) {
 
315
        // format speed in bytes/sec, input:  bytes/sec
 
316
        if (speed < 1048576) return Math.round(speed / 10.24)/100 + " KB/s";
 
317
        if (speed < 1073741824) return Math.round(speed / 10485.76)/100 + " MB/s";
 
318
        // else
 
319
        return Math.round(speed / 10737418.24)/100 + " GB/s";  // wow!
 
320
}
 
321
 
 
322
]]>
 
323
</script>
 
324
</svg>