clarified current payout graph title
[p2pool.git] / web-static / graphs.html
index 7135884..cf7b067 100644 (file)
@@ -39,7 +39,7 @@
         <h2>Local rate reflected in shares</h2>
         <svg id="local_shares"></svg>
         
-        <h2>Current payout</h2>
+        <h2>Current payout to default address</h2>
         <svg id="payout"></svg>
         
         <h2>Pool rate</h2>
             function not_null(x) { return x != null; }
             function identity(x) { return x; }
             
-            function getData(url) {
-                var xmlhttp = new XMLHttpRequest();
-                xmlhttp.open("GET",  url, false);
-                xmlhttp.send();
-                return JSON.parse(xmlhttp.responseText);
-            }
-            
             function get_area_mean(data, value_getter) {
                 var top = 0;
                 var bottom = 0;
             }
             
             function plot(g, unit, total_unit, lines) {
-                // lines is a list of objects which have attributes data, value_getter, color
+                // lines is a list of objects which have attributes data, value_getter, color, and optionally label
                 
                 var w = 640;
                 var h = 300;
                 var margin_v = 40;
-                var margin_h = 60;
+                var margin_h = 120;
                 
                 var x = d3.time.scale().domain([
                     as_date(d3.min(lines, function(line) { return d3.min(line.data, itemgetter(0)); })),
                     as_date(d3.max(lines, function(line) { return d3.max(line.data, itemgetter(0)); }))
-                ]).range([0 + margin_h * 2, w - margin_h * 2]);
+                ]).range([0 + margin_h, w - margin_h]);
                 var y = d3.scale.linear().domain([
                     0,
                     d3.max(lines, function(line) { return d3.max(line.data, compose(line.value_getter, itemgetter(1))); } )
                             .attr("text-anchor", "start")
                             .attr("dominant-baseline", "central")
                             .attr("fill", line.color)
-                            .attr("x", w - 2*margin_h + 10)
+                            .attr("x", w - margin_h + 10)
                             .attr("y", y(stats.mean) - 12);
                         g.append("svg:text")
                             .text("-Mean: " + d3.format(".3s")(stats.mean) + unit)
                             .attr("text-anchor", "start")
                             .attr("dominant-baseline", "central")
                             .attr("fill", line.color)
-                            .attr("x", w - 2*margin_h)
+                            .attr("x", w - margin_h)
                             .attr("y", y(stats.mean));
                         if(total_unit != null)
                             g.append("svg:text")
                                 .attr("text-anchor", "start")
                                 .attr("dominant-baseline", "central")
                                 .attr("fill", line.color)
-                                .attr("x", w - 2*margin_h + 10)
+                                .attr("x", w - margin_h + 10)
                                 .attr("y", y(stats.mean) + 12);
                     }
                 }
                 // x axis
                 
                 g.append("svg:line")
-                    .attr("x1", margin_h * 2)
+                    .attr("x1", margin_h)
                     .attr("y1", h - margin_v)
-                    .attr("x2", w - margin_h * 2)
+                    .attr("x2", w - margin_h)
                     .attr("y2", h - margin_v);
                 
                 g.selectAll()
                 // y axis
                 
                 g.append("svg:line")
-                    .attr("x1", margin_h * 2)
+                    .attr("x1", margin_h)
                     .attr("y1", h - margin_v)
-                    .attr("x2", margin_h * 2)
+                    .attr("x2", margin_h)
                     .attr("y2", margin_v);
                 
                 g.selectAll()
                     .data(y.ticks(6))
                     .enter().append("svg:line")
-                    .attr("x1", margin_h * 2 - 5)
+                    .attr("x1", margin_h - 5)
                     .attr("y1", y)
-                    .attr("x2", margin_h * 2)
+                    .attr("x2", margin_h)
                     .attr("y2", y);
                 
                 g.selectAll()
                     .data(y.ticks(6))
                     .enter().append("svg:text")
                     .text(compose(function(x) { return x + unit; }, d3.format(".2s")))
-                    .attr("x", margin_h)
+                    .attr("x", margin_h/2)
                     .attr("y", y)
                     .attr("dominant-baseline", "central")
                     .attr("text-anchor", "middle");
             }
+            function plot_later(g, unit, total_unit, lines) { // takes lines with url attribute instead of data attribute
+                var callbacks_left = lines.length;
+                lines.map(function(line) {
+                    d3.json(line.url, function(line_data) {
+                        line.data = line_data;
+                        callbacks_left--;
+                        if(callbacks_left == 0)
+                            plot(g, unit, total_unit, lines);
+                    });
+                });
+            }
             
             function change_period(period) {
                 d3.select("#period_current").text(period);
                 var lowerperiod = period.toLowerCase();
-                plot(d3.select("#local"), "H/s", "H", [
-                    {"data": getData("/web/graph_data/local_hash_rate/last_" + lowerperiod), "value_getter": identity, "color": "#0000FF", "label": "Total"},
-                    {"data": getData("/web/graph_data/local_dead_hash_rate/last_" + lowerperiod), "value_getter": identity, "color": "#FF0000", "label": "Dead"}
+                plot_later(d3.select("#local"), "H/s", "H", [
+                    {"url": "/web/graph_data/local_hash_rate/last_" + lowerperiod, "value_getter": identity, "color": "#0000FF", "label": "Total"},
+                    {"url": "/web/graph_data/local_dead_hash_rate/last_" + lowerperiod, "value_getter": identity, "color": "#FF0000", "label": "Dead"}
                 ]);
-                plot(d3.select("#local_shares"), "H/s", "H", [
-                    {"data": getData("/web/graph_data/local_share_hash_rate/last_" + lowerperiod), "value_getter": identity, "color": "#0000FF", "label": "Total"},
-                    //{"data": getData("/web/graph_data/local_dead_share_hash_rate/last_" + lowerperiod), "value_getter": identity, "color": "#FF0000", "label": "Dead"}
+                plot_later(d3.select("#local_shares"), "H/s", "H", [
+                    {"url": "/web/graph_data/local_share_hash_rate/last_" + lowerperiod, "value_getter": identity, "color": "#0000FF", "label": "Total"},
+                    //{"url": getData("/web/graph_data/local_dead_share_hash_rate/last_" + lowerperiod, "value_getter": identity, "color": "#FF0000", "label": "Dead"}
                 ]);
-                plot(d3.select("#payout"), "BTC", null, [
-                    {"data": getData("/web/graph_data/current_payout/last_" + lowerperiod), "value_getter": identity, "color": "#0000FF"}
+                plot_later(d3.select("#payout"), "BTC", null, [
+                    {"url": "/web/graph_data/current_payout/last_" + lowerperiod, "value_getter": identity, "color": "#0000FF"}
                 ]);
-                plot(d3.select("#pool"), "H/s", "H", [
-                    {"data": getData("/web/graph_data/pool_rate/last_" + lowerperiod), "value_getter": identity, "color": "#0000FF", "label": "Total"},
-                    {"data": getData("/web/graph_data/pool_stale_rate/last_" + lowerperiod), "value_getter": identity, "color": "#FF0000", "label": "Stale"}
+                plot_later(d3.select("#pool"), "H/s", "H", [
+                    {"url": "/web/graph_data/pool_rate/last_" + lowerperiod, "value_getter": identity, "color": "#0000FF", "label": "Total"},
+                    {"url": "/web/graph_data/pool_stale_rate/last_" + lowerperiod, "value_getter": identity, "color": "#FF0000", "label": "Stale"}
                 ]);
-                plot(d3.select("#peers"), "", null, [
-                    {"data": getData("/web/graph_data/incoming_peers/last_" + lowerperiod), "value_getter": identity, "color": "#0000FF", "label": "Incoming"},
-                    {"data": getData("/web/graph_data/outgoing_peers/last_" + lowerperiod), "value_getter": identity, "color": "#FF0000", "label": "Outgoing"}
+                plot_later(d3.select("#peers"), "", null, [
+                    {"url": "/web/graph_data/incoming_peers/last_" + lowerperiod, "value_getter": identity, "color": "#0000FF", "label": "Incoming"},
+                    {"url": "/web/graph_data/outgoing_peers/last_" + lowerperiod, "value_getter": identity, "color": "#FF0000", "label": "Outgoing"}
                 ]);
                 
-                var data = getData("/web/graph_data/miner_hash_rates/last_" + lowerperiod);
-                var dead_data = getData("/web/graph_data/miner_dead_hash_rates/last_" + lowerperiod);
-                var users = {}; for(var i = 0; i < data.length; ++i) for(var u in data[i][1]) users[u] = null; for(var i = 0; i < dead_data.length; ++i) for(var u in dead_data[i][1]) users[u] = null;
-                var userlist = []; for(var u in users) userlist.push(u);
-                d3.select("#miners").selectAll("*").remove();
-                var div = d3.select("#miners").selectAll().data(userlist).enter().append("div");
-                div.append("h3").text(identity);
-                div.append("svg:svg").each(function(u) {
-                    plot(d3.select(this), "H/s", "H", [
-                        {"data": data, "value_getter": function(d) { return u in d ? d[u] : 0; }, "color": "#0000FF", "label": "Total"},
-                        {"data": dead_data, "value_getter": function(d) { return u in d ? d[u] : 0; }, "color": "#FF0000", "label": "Dead"}
-                    ]);
+                d3.json("/web/graph_data/miner_hash_rates/last_" + lowerperiod, function(data) {
+                    d3.json("/web/graph_data/miner_dead_hash_rates/last_" + lowerperiod, function(dead_data) {
+                        var users = {}; for(var i = 0; i < data.length; ++i) for(var u in data[i][1]) users[u] = null; for(var i = 0; i < dead_data.length; ++i) for(var u in dead_data[i][1]) users[u] = null;
+                        var userlist = []; for(var u in users) userlist.push(u);
+                        d3.select("#miners").selectAll("*").remove();
+                        var div = d3.select("#miners").selectAll().data(userlist).enter().append("div");
+                        div.append("h3").text(identity);
+                        div.append("svg:svg").each(function(u) {
+                            plot(d3.select(this), "H/s", "H", [
+                                {"data": data, "value_getter": function(d) { return u in d ? d[u] : 0; }, "color": "#0000FF", "label": "Total"},
+                                {"data": dead_data, "value_getter": function(d) { return u in d ? d[u] : 0; }, "color": "#FF0000", "label": "Dead"}
+                            ]);
+                        });
+                    });
                 });
             }