From 9a54386a694093907d0df6f76c030164d04ac777 Mon Sep 17 00:00:00 2001 From: Bernhard Tittelbach Date: Sat, 25 Oct 2014 17:33:16 +0200 Subject: try to optimize speed --- src/viz/index.css | 6 +++++ src/viz/index.html | 1 + src/viz/index.js | 74 ++++++++++++++++++++++++++++++++++++------------------ 3 files changed, 57 insertions(+), 24 deletions(-) diff --git a/src/viz/index.css b/src/viz/index.css index 656f85d..00c8feb 100644 --- a/src/viz/index.css +++ b/src/viz/index.css @@ -22,6 +22,12 @@ body { color: #333; } +div.status { + font-size:20px; + font-weight:bold; + background-color:gray; +} + h1 { text-align:center; font-variant: small-caps; diff --git a/src/viz/index.html b/src/viz/index.html index 978b8d8..5d2368d 100644 --- a/src/viz/index.html +++ b/src/viz/index.html @@ -11,6 +11,7 @@

Sfive Stat Display

+
Loading Data ...
diff --git a/src/viz/index.js b/src/viz/index.js index 3a2b136..31c5637 100644 --- a/src/viz/index.js +++ b/src/viz/index.js @@ -6,16 +6,9 @@ var lastfrom="from=2013-10-24T06:30:45Z&to=2013-10-24T06:32:45"; console.log(lastfrom); //var possible_display_functions = {"Off":"none", "Value":showvalue, "Gauge":showgauge, "Graph":showasgraph}; var possible_display_functions = {"Off":"none", "Value":showvalue, "Graph":showasgraph}; -var stuff_to_display = {"clients":"none","*":showvalue,"client-count":showasgraph, "bytes-sent":showasgraph, "fuckups-per-second":showasgraph}; +var stuff_to_display = {"clients":"none","*":showvalue,"client-count":showasgraph, "bytes-sent":showasgraph}; var sidseen = []; -toQueryIsoData = function(dateStr) { - ts = new Date(dateStr) - ts.setTime(ts.getTime() + 1 * 1000) // add a second, lowest resolution step for s5 - return ts.toISOString(); -} - - $(document).ready(function() { updateS5Stats(); @@ -40,18 +33,21 @@ function killvalue(name, nosetselect) { } } -function showvalue(sid, name, value, jsdate) { +function showvalue(sid, name) { var divid = sid+"_"+name; var elem = $("#"+divid); if (elem.length<1) { getstreamdiv(sid).append('
  • '+ name +'
    • '); elem = $("#"+divid); } + var jsdvalue = graphdata[divid][graphdata[divid].length-1]; + var jsdate = jsdvalue[0]; + var value = jsdvalue[1]; elem.html(""+value+"
    @"+jsdate.toLocaleDateString()+" "+jsdate.toLocaleTimeString()+""); } var gauges = {}; -function showgauge(sid, name, value) { +function showgauge(sid, name) { var divid = sid+"_"+name; var elem = document.getElementById(divid); if (!elem) { @@ -59,23 +55,31 @@ function showgauge(sid, name, value) { elem = document.getElementById(divid); gauges[divid] = new google.visualization.Gauge(elem); } + var value = graphdata[divid][graphdata[divid].length-1][1]; var data = google.visualization.arrayToDataTable([["Label", "Value"],[name,value]]); gauges[divid].draw(data, {}); } var graphs = {} -var graphdata = {} -function showasgraph(sid, name, value, jsdate) { +function showasgraph(sid, name) { var divid = sid+"_"+name; var elem = document.getElementById(divid); if (!elem) { getstreamdiv(sid).append('
  • '+ name +'
    • '); elem = document.getElementById(divid); - graphdata[divid]=[]; graphs[divid] = new Dygraph(elem,graphdata[divid],{legend:'none',title:sid+"-"+name,labels:["Date/Time",name]}); + } else { + graphs[divid].updateOptions({'file':graphdata[divid]}); + } +} + +var graphdata = {} +function savedata(sid, name, value, jsdate) { + var divid = sid+"_"+name; + if (!graphdata[divid]) { + graphdata[divid]=[]; } graphdata[divid].push([jsdate,value]); - graphs[divid].updateOptions({'file':graphdata[divid]}); } function showasetting(name) { @@ -98,34 +102,56 @@ function showasetting(name) { function changeSetting(name, selobj) { var newdispfunc = possible_display_functions[selobj.options[selobj.selectedIndex].text]; if (newdispfunc) { + $("#status").text("Chaging Graph..."); killvalue(name, 1); stuff_to_display[name]=newdispfunc; + if (typeof(newdispfunc) == 'function') { + $.each(sidseen,function(index,sid){ newdispfunc(sid,name); }); + } + $("#status").text("Graph Change Done"); } } function graphS5Status(data) { - sidseen=[]; + var mysidseen=[]; + var jsdate; + $("#status").text("Loading data "+lastfrom); $.each(data.data, function(index, stream) { var sid = stream["streamer-id"].format + '-' + stream["streamer-id"].quality; - sidseen.push(sid); - var jsdate = new Date(stream["start-time"]); - var jsdate1s = new Date(jsdate.getTime() + 1000); - lastfrom = "from="+jsdate1s.toISOString(); + mysidseen.push(sid); + jsdate = new Date(stream["start-time"]); qintv_ms = stream["duration-ms"]; //doesnt really change anything yet - jsdate = new Date(jsdate.getTime() + qintv_ms); + var jsdateplus = new Date(jsdate.getTime() + qintv_ms); var data = stream.data; //console.log(data); //console.log(graphdata); for (var key in data) { + savedata(sid, key, data[key], jsdateplus); if (! stuff_to_display[key]) { stuff_to_display[key]=stuff_to_display['*']; } - showasetting(key); - if (typeof(stuff_to_display[key]) == 'function') { - stuff_to_display[key](sid, key, data[key], jsdate); - } } }); + $("#status").text("Loading done"); + if (mysidseen.length < 1) + return; + sidseen = mysidseen; + var jsdate1s = new Date(jsdate.getTime() + 1000); + lastfrom = "from="+jsdate1s.toISOString(); + $("#status").text("Graphing Data"); + $.each(mysidseen, function(index, sid){ + $.each(stuff_to_display, function(key, func){ + if (key!="*") + { + showasetting(key); + if (typeof(func) == 'function') + { + func(sid, key); + } + } + }); + }); + $("#status").text("Graphing Done"); } function updateS5Stats() { -- cgit v1.2.3