[tor-commits] [depictor/master] Adjust the graph colors Per #22174
tom at torproject.org
tom at torproject.org
Thu May 18 21:25:42 UTC 2017
commit 60d2794b4cf0587168c6f69d3a501d25a89e4c9a
Author: Tom Ritter <tom at 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 = [
More information about the tor-commits
mailing list