commit 60d2794b4cf0587168c6f69d3a501d25a89e4c9a Author: Tom Ritter tom@ritter.vg Date: Thu May 18 16:25:28 2017 -0500
Adjust the graph colors Per #22174 --- graphs.py | 159 ++++++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 93 insertions(+), 66 deletions(-)
diff --git a/graphs.py b/graphs.py index 0e2a94e..695d9b6 100755 --- a/graphs.py +++ b/graphs.py @@ -69,92 +69,119 @@ class GraphWriter(WebsiteWriter): + " text-align: center;\n" + " display: none;\n" + " }\n" - + " .auth1, .steelblue {\n" - + " fill: none;\n" - + " stroke: steelblue;\n" - + " background-color: steelblue;\n" + + " .fallback_green {\n" + + " fill: #1a9850;\n" + + " stroke: #1a9850;\n" + + " background-color: #1a9850;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .steelblue {\n" - + " fill: steelblue;\n" + + " .fallback_orange {\n" + + " fill: #fdae61;\n" + + " stroke: #fdae61;\n" + + " background-color: #fdae61;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth2, .orange {\n" - + " fill: none;\n" - + " stroke: orange;\n" - + " background-color: orange;\n" + + " .fallback_red {\n" + + " fill: #d73027;\n" + + " stroke: #d73027;\n" + + " background-color: #d73027;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .orange {\n" - + " fill: orange;\n" + + " .bwauth_above {\n" + + " fill: #984ea3;\n" + + " stroke: #984ea3;\n" + + " background-color: #984ea3;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth3, .limegreen {\n" - + " fill: none;\n" - + " stroke: limegreen;\n" - + " background-color: limegreen;\n" + + " .bwauth_shared {\n" + + " fill: #377eb8;\n" + + " stroke: #377eb8;\n" + + " background-color: #377eb8;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .limegreen {\n" - + " fill: limegreen;\n" + + " .bwauth_exclusive {\n" + + " fill: #4daf4a;\n" + + " stroke: #4daf4a;\n" + + " background-color: #4daf4a;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth4, .green {\n" - + " fill: none;\n" - + " stroke: green;\n" - + " background-color: green;\n" + + " .bwauth_below {\n" + + " fill: #ff7f00;\n" + + " stroke: #ff7f00;\n" + + " background-color: #ff7f00;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .green {\n" - + " fill: green;\n" + + " .bwauth_unmeasured {\n" + + " fill: #e41a1c;\n" + + " stroke: #e41a1c;\n" + + " background-color: #e41a1c;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth5, .red {\n" + + " .auth1 {\n" + " fill: none;\n" - + " stroke: red;\n" - + " background-color: red;\n" + + " stroke: #1f78b4;\n" + + " background-color: #1f78b4;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .red {\n" - + " fill: red;\n" + + " .auth2 {\n" + + " fill: none;\n" + + " stroke: #33a02c;\n" + + " background-color: #33a02c;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth6, .purple {\n" + + " .auth3 {\n" + " fill: none;\n" - + " stroke: purple;\n" - + " background-color: purple;\n" + + " stroke: #e31a1c;\n" + + " background-color: #e31a1c;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .purple {\n" - + " fill: purple;\n" + + " .auth4 {\n" + + " fill: none;\n" + + " stroke: #ff7f00;\n" + + " background-color: #ff7f00;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth7 {\n" + + " .auth5 {\n" + " fill: none;\n" - + " stroke: black;\n" - + " background-color: black;\n" + + " stroke: #6a3d9a;\n" + + " background-color: #6a3d9a;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .auth8, .blue {\n" + + " .auth6 {\n" + " fill: none;\n" - + " stroke: #0000FF;\n" - + " background-color: #0000FF;\n" + + " stroke: #a6cee3;\n" + + " background-color: #a6cee3;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .blue {\n" - + " fill: blue;\n" + + " .auth7 {\n" + + " fill: none;\n" + + " stroke: #b2df8a;\n" + + " background-color: #b2df8a;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth9, .yellow {\n" + + " .auth8 {\n" + " fill: none;\n" - + " stroke: yellow;\n" - + " background-color: yellow;\n" + + " stroke: #fb9a99;\n" + + " background-color: #fb9a99;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .yellow {\n" - + " fill: yellow;\n" + + " .auth9 {\n" + + " fill: none;\n" + + " stroke: #fdbf6f;\n" + + " background-color: #fdbf6f;\n" + + " stroke-width: 1.5px;\n" + " }\n" - + " .auth10, .pink {\n" + + " .auth10 {\n" + " fill: none;\n" - + " stroke: pink;\n" - + " background-color: pink;\n" + + " stroke: #cab2d6;\n" + + " background-color: #cab2d6;\n" + " stroke-width: 1.5px;\n" + " }\n" - + " .pink {\n" - + " fill: pink;\n" + + " .auth11 {\n" + + " fill: none;\n" + + " stroke: #ffff99;\n" + + " background-color: #ffff99;\n" + + " stroke-width: 1.5px;\n" + " }\n" + " </style>\n" + " <div class="center">\n" @@ -171,9 +198,9 @@ class GraphWriter(WebsiteWriter): self.site.write(" <tr>\n" + " <td>\n" + " <div id="" + str(divName) + "" class="graphbox">\n" - + " <span class="green" style="margin-left:5px"> </span> Running\n" - + " <span class="orange" style="margin-left:5px"> </span> Not Running\n" - + " <span class="red" style="margin-left:5px"> </span> Missing From Consensus\n" + + " <span class="fallback_green" style="margin-left:5px"> </span> Running\n" + + " <span class="fallback_orange" style="margin-left:5px"> </span> Not Running\n" + + " <span class="fallback_red" style="margin-left:5px"> </span> Missing From Consensus\n" + " </div>\n" + " </td>\n" + " </tr>\n") @@ -277,11 +304,11 @@ class GraphWriter(WebsiteWriter): + " <div id="" + str(divName) + "" class="graphbox">\n" + " <span class="graph-title">Bandwidth Auth Statistics, Past " + timeframe + " Days</span>\n" + " <br />\n" - + " <span class="steelblue" style="margin-left:5px"> </span> above\n" - + " <span class="purple" style="margin-left:5px"> </span> shared\n" - + " <span class="green" style="margin-left:5px"> </span> exclusive\n" - + " <span class="orange" style="margin-left:5px"> </span> below\n" - + " <span class="blue" style="margin-left:5px"> </span> unmeasured\n" + + " <span class="bwauth_above" style="margin-left:5px"> </span> above\n" + + " <span class="bwauth_shared" style="margin-left:5px"> </span> shared\n" + + " <span class="bwauth_exclusive" style="margin-left:5px"> </span> exclusive\n" + + " <span class="bwauth_below" style="margin-left:5px"> </span> below\n" + + " <span class="bwauth_unmeasured" style="margin-left:5px"> </span> unmeasured\n" + " </div>\n" + " </td>\n" + " </tr>\n") @@ -574,15 +601,15 @@ class GraphWriter(WebsiteWriter):
var key_to_color = function(k) { if(k.includes("_above")) - return "steelblue"; + return "bwauth_above"; else if(k.includes("_shared")) - return "purple"; + return "bwauth_shared"; else if(k.includes("_exclusive")) - return "green"; + return "bwauth_exclusive"; else if(k.includes("_below")) - return "orange"; + return "bwauth_below"; else - return "blue"; + return "bwauth_unmeasured"; };
if(graph.data_slice+1 > data.length) { @@ -693,7 +720,7 @@ class GraphWriter(WebsiteWriter): return d; }); }).then(function(data) { - var key_to_color = function(k) { return k == 'fallback_dirs_running' ? 'green' : k == 'fallback_dirs_notrunning' ? 'orange' : 'red' }; + var key_to_color = function(k) { return k == 'fallback_dirs_running' ? 'fallback_green' : k == 'fallback_dirs_notrunning' ? 'fallback_orange' : 'fallback_red' }; /*Pie Graph data_subset = data.slice(0); data_subset = [