diff options
Diffstat (limited to 'web/nms.gathering.org/speedometer')
| -rw-r--r-- | web/nms.gathering.org/speedometer/default.css | 52 | ||||
| -rw-r--r-- | web/nms.gathering.org/speedometer/index.html | 154 |
2 files changed, 147 insertions, 59 deletions
diff --git a/web/nms.gathering.org/speedometer/default.css b/web/nms.gathering.org/speedometer/default.css index 4602b2e..eddcb95 100644 --- a/web/nms.gathering.org/speedometer/default.css +++ b/web/nms.gathering.org/speedometer/default.css @@ -1,3 +1,53 @@ body{ - background: #000; + background: #fff url('Statistikk_bakgrunn_alternate-02.png') top left no-repeat; +} + +*{ + margin: 0; + padding: 0; + +} + +div#container{ + width: 1920px; + height: 1080px; + min-width: 1920px; + display: block; +} + +div#data{ + padding-top: 100px; +} + +a{ + color: #fff; + padding: 10px; + border-color: #fff; + text-decoration: none; + background-color: #fff; + border-radius: 7px; + width: auto; +} + +a:hover{ + color: #333; + border-color: #ddd; + background-color: #e0e0e0; +} + +h1{ + +} + +h1#title{ + font-family: 'Droid Sans', sans-serif; + font-size: 70px; + padding-left: 505px; + padding-top: 70px; + color: #293f6c; +} + +div#logs{ + font-size: 26px; + font-family: 'Droid Sans', sans-serif; } diff --git a/web/nms.gathering.org/speedometer/index.html b/web/nms.gathering.org/speedometer/index.html index 6cd92fd..ba504cf 100644 --- a/web/nms.gathering.org/speedometer/index.html +++ b/web/nms.gathering.org/speedometer/index.html @@ -14,74 +14,112 @@ <!-- Load d3.js and c3.js --> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="c3-master/c3.min.js"></script> - + <script src="nms-tmp.js"></script> + + <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> </head> <body> - <div id="data" style="color: #fff;"> - - </div> - + <div id="ruler"></div> + <div id="container"> + <h1 id="title">Aggregated internal traffic</h1> + + <div id="data"></div> + + <h1 align="center" id="text-bandwidth" data-used_bw='0'></h1> + <a href="#" id="switch" data-mode="edge_ports">Switch view to <span>total aggregated</span></a> + <br><br> + <div style="margin-left: 800px;" id="logs"></div> + </div><!-- /#container --> <script> - var chart = c3.generate({ - bindto: '#data', - data: { - columns: [ - ['data', 0] - ], - type: 'gauge', - onclick: function (d, i) { console.log("onclick", d, i); }, - onmouseover: function (d, i) { console.log("onmouseover", d, i); }, - onmouseout: function (d, i) { console.log("onmouseout", d, i); } - }, - gauge: { - // label: { - // format: function(value, ratio) { - // return value; - // }, - // show: false // to turn off the min/max labels. - // }, - // min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change - // max: 100, // 100 is default - // units: ' %', - // width: 39 // for adjusting arc thickness - width: 30, - min: 0, - max: 100 - }, - color: { - pattern: ['#00D185', '#F7AB7D', '#FF6929', '#E81417'], // the three color levels for the percentage values. - threshold: { - // unit: 'value', // percentage is default - // max: 400, // 100 is default - values: [100, 200, 300, 400] + + + + $(function(){ + $('#switch').click(function(e) { + e.preventDefault(); + if($(this).attr('data-mode') == 'tot_agg'){ + // mode = 'tot_agg'; + $('#switch span').text('total aggregated'); + console.log('switched to edge ports'); + $(this).attr('data-mode', 'edge_ports'); + }else{ + // mode = 'edge_ports'; + $('#switch span').text('edge ports'); + + console.log('switched to total aggregated'); + $(this).attr('data-mode', 'tot_agg'); } - }, - size: { - height: 800 - } - }); + }); + + /* + Configures and draws the speedometer + */ + var chart = c3.generate({ + bindto: '#data', + data: { + columns: [ + ['data', 0] + ], + type: 'gauge' + }, + interaction: { enabled: false }, + transition: { duration: 0 }, + gauge: { + label: { + format: function(value, ratio) { + // return value; + x = 8 * parseInt($('#text-bandwidth').attr('data-used_bw')) / 1024 / 1024; + return x.toPrecision(4) + ' Gbps'; + }, + show: false // to turn off the min/max labels. + }, + width: 30, + min: 0, + max: 80 + }, + color: { + pattern: ['#54CD41', '#CEFF04', '#FFB404', '#FF0000'], // the three color levels for the percentage values. + threshold: { values: [20, 40, 60, 80] } + }, + size: { height: 600 } + }); - setInterval(function () { - - $.getJSON("../aggregated_traffic.pl", function(result){ - // var sum = Math.round((parseInt(result.sum_in/8)+parseInt(result.sum_out/8))/(1024*1024*1 024)); + var maxspeed=15*8; // 40GB (total internet capacity) * bits in a byte = 320Gbit/s - does not make much sense, but we have to use a "max speed" + + + /* + Update graph every 3 seconds + */ + setInterval(function () { + mode = $('#switch').attr('data-mode'); - var sum = Math.round(parseInt(result.sum_in)/(1024*1024*1024)); - console.log(sum); - /* - $.each(result, function(i, field){ - $("div").append(field + " "); - }); - */ + console.log('updates graph - mode: ' + mode); + + myspeed = 8 * bandwidth / 1024 / 1024; + if (myspeed > maxspeed) { + maxspeed = myspeed; + } + + update = 100 * myspeed / maxspeed; + chart.load({ - columns: [['data', sum]] + columns: [['data', update]] }); - }); - - + + var foo = document.getElementById(""); + if(mode = 'tot_agg'){ + $('#text-speed').text('aggregated traffic'); + }else{ + $('#text-speed').text('edge ports traffic'); + } + + $("#logs").text('avg. last hour: ' + (get_bytes_avg_1h(parseInt($('#switch').attr('data-mode')))/128/1024/1024).toPrecision(4) + 'Gbps'); + }, 5000); - }, 3000); + setInterval(fetch_switch_data,2000); + setInterval(update_bandwidth,1000); + }); </script> </body> </html> |