only show 1 of every 7 data points so tables aren't pages long

[p2pool.git] / web-static / graphs.html

diff --git a/web-static/graphs.html b/web-static/graphs.html
index ad4f1ca..dc08915 100644 (file)
--- a/web-static/graphs.html
+++ b/web-static/graphs.html
@@ -82,6 +82,41 @@
             function plot(g, unit, total_unit, lines, stack) {
                 // lines is a list of objects which have attributes data, color, and label
                 
+                var table_div = document.createElement("div");
+                g.node().parentNode.insertBefore(table_div, g.node().nextSibling);
+                table_div.style.display = "none";
+                
+                var showhide = document.createElement("p");
+                g.node().parentNode.insertBefore(showhide, g.node().nextSibling);
+                d3.select(showhide).append("a")
+                    .text('Show/hide table')
+                    .on('click', function() { table_div.style.display = table_div.style.display == "block" ? "none" : "block" })
+                    .attr("style", "color:blue;text-decoration:underline;cursor:pointer");
+                
+                for(var i = 0; i < lines.length; ++i) {
+                    var line = lines[i];
+                    var table_sel = d3.select(table_div).append('table').attr('border', 1).attr('style', 'float:left');
+                    
+                    var first_tr = table_sel.insert('tr');
+                    first_tr.append('th').text('Date');
+                    first_tr.append('th').text(line.label + '/(' + unit + ')');
+                    
+                    var new_data = []
+                    for(var j = 0; j < line.data.length; ++j)
+                        if(j % 7 == 3)
+                            new_data.push(line.data[j]);
+                    var tr = table_sel.selectAll().data(new_data).enter().append('tr');
+                    tr.append('td').text(function(datum){return new Date(1000*datum[0]).toString()});
+                    tr.append('td').text(function(datum){return d3.format(".3s")(datum[1])});
+                }
+                d3.select(table_div).append('div').attr('style', 'clear:both');
+                
+                d3.select(table_div).append('p').append("a")
+                    .text('Show/hide table')
+                    .on('click', function() { table_div.style.display = table_div.style.display == "block" ? "none" : "block" })
+                    .attr("style", "color:blue;text-decoration:underline;cursor:pointer");
+                
+                
                 var w = 700;
                 var h = 300;
                 var margin_v = 40;
@@ -363,13 +398,17 @@
                 });
             }
             
+            periods = ["Hour", "Day", "Week", "Month", "Year"];
+            d3.select("#period_chooser").selectAll().data(periods).enter().append("a")
+                .text(function(period) { return period })
+                .attr('href', function(period){ return "?" + period })
+                .attr("style", function(d, i) { return (i == 0 ? "" : "margin-left:.4em;") + "color:blue;text-decoration:underline;cursor:pointer" });
+            period = window.location.search.substr(1);
+            if(period == "") {
+                window.location.search = "Day";
+            }
             d3.json('/web/currency_info', function(currency_info) {
-                periods = ["Hour", "Day", "Week", "Month", "Year"];
-                d3.select("#period_chooser").selectAll().data(periods).enter().append("span")
-                    .text(function(period) { return period })
-                    .on("click", function(period){ change_period(period, currency_info) })
-                    .attr("style", function(d, i) { return (i == 0 ? "" : "margin-left:.4em;") + "color:blue;text-decoration:underline;cursor:pointer" });
-                change_period(periods[1], currency_info);
+                change_period(period, currency_info);
             });
         </script>
     </body>