try to optimize speed

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 @@
 	 <div class="">
     <h1>Sfive Stat Display</h1>
     <div id="menu" class="container"><a href="#settings">Settings</a>&nbsp;</div>
+    <div id="status" class="container status">Loading Data ... </div>
     <div id="content"></div>
     <div id="settings" class="container"></div>
    </div>
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('<li class="dispvalue size1" id="li-'+divid+'""><div class="dispvalueheader">'+ name +'</div><input type="button" class="dispvalueheaderafter" value="X" onClick="killvalue(\''+name+'\');"></input><div class="dispvaluevalue" id='+divid+'></div></li>');
 		elem = $("#"+divid);
 	}
+    var jsdvalue = graphdata[divid][graphdata[divid].length-1];
+    var jsdate = jsdvalue[0];
+    var value = jsdvalue[1];
 	elem.html("<strong>"+value+"</strong><br/><span style='font-size:smaller;'>@"+jsdate.toLocaleDateString()+" "+jsdate.toLocaleTimeString()+"</span>");
 }
 
 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('<li class="dispvalue graphsize" id="li-'+divid+'""><div class="dispvalueheader">'+ name +'</div><input type="button" class="dispvalueheaderafter" value="X" onClick="killvalue(\''+name+'\');"></input><div class="dispvaluevalue" id='+divid+'></div></li>');
 		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() {