commit 966321690a124e50e55ae83bab27e53b78529a94
Author: Iain R. Learmonth <irl(a)fsfe.org>
Date: Sat Dec 2 18:12:03 2017 +0000
Adds map options panel
---
css/atlas.css | 8 ++++++-
js/router.js | 1 -
js/views/aggregate/map.js | 53 +++++++++++++++++++++++++++-----------------
templates/aggregate/map.html | 13 ++++++++++-
4 files changed, 52 insertions(+), 23 deletions(-)
diff --git a/css/atlas.css b/css/atlas.css
index 3fd9cdb..89a1def 100644
--- a/css/atlas.css
+++ b/css/atlas.css
@@ -52,7 +52,7 @@ span.flags {
background: #ff1515;
}
-#home-search, #home-aggregate-search, #home-advanced-search {
+#home-search, #home-aggregate-search, #home-advanced-search, #map-radio-buttons {
padding: 0;
margin: 0 0 10px 0;
width: 100%;
@@ -92,3 +92,9 @@ td a {
width: 120px;
display: inline;
}
+
+label.radio-inline {
+ display: inline !important;
+ width: auto;
+}
+
diff --git a/js/router.js b/js/router.js
index 8a73620..6428622 100644
--- a/js/router.js
+++ b/js/router.js
@@ -124,7 +124,6 @@ define([
$(".progress").show();
aggregateMapView.collection.aType = "cc";
- aggregateMapView.aggregateType = "consensus_weight_fraction";
if (query) {
query = query.trim();
diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js
index d8d7ec0..f585e33 100644
--- a/js/views/aggregate/map.js
+++ b/js/views/aggregate/map.js
@@ -17,17 +17,8 @@ define([
initialize: function() {
this.collection = new aggregatesCollection;
},
- render: function(query){
- document.title = "Relay Search";
- var compiledTemplate = _.template(aggregateMapTemplate)
- this.$el.html(compiledTemplate({query: query,
- aggregates: this.collection.models,
- countries: CountryCodes,
- error: this.error,
- relaysPublished: this.relaysPublished,
- bridgesPublished: this.bridgesPublished}));
-
- var aggregate_type = this.aggregateType;
+ plot: function() {
+ var aggregate_property = $('input[name="aggregate-property"]:checked').val();
var aggregates = this.collection.models;
var m_width = $("#container").width();
@@ -41,11 +32,11 @@ define([
var path = d3.geo.path()
.projection(projection);
+ $("#aggregate-map").html("");
+
var svg = d3.select("#aggregate-map").append("svg")
.attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 " + width + " " + height)
- .attr("width", m_width)
- .attr("height", m_width * height / width);
svg.append("rect")
.attr("class", "background")
@@ -58,13 +49,13 @@ define([
var maximum_value = 0;
_.each(aggregates, function(aggregate) {
- if (aggregate[aggregate_type] > maximum_value) maximum_value = aggregate[aggregate_type];
+ if (aggregate[aggregate_property] > maximum_value) maximum_value = aggregate[aggregate_property];
});
- var getCountryAggregate = function(code, aggregate_type) {
+ var getCountryAggregate = function(code, aggregate_property) {
var found = 0;
_.each(aggregates, function(aggregate) {
- if (aggregate.country.toUpperCase() == code) found = aggregate[aggregate_type];
+ if (aggregate.country.toUpperCase() == code) found = aggregate[aggregate_property];
});
return (found == 0) ? found : Math.sqrt(found/maximum_value);
@@ -94,7 +85,7 @@ define([
.enter()
.append("path")
.attr("id", function(d) { return d.id; })
- .style("fill-opacity", function(d) { return getCountryAggregate(d.id, aggregate_type); })
+ .style("fill-opacity", function(d) { return getCountryAggregate(d.id, aggregate_property); })
.attr("d", path)
.append("svg:title")
.text( function(d) { return d.id; });
@@ -125,13 +116,35 @@ define([
.text("" + (Math.pow(i,2)* maximum_value*100).toFixed(3) + "%");
}
+ });
+ },
+ save: function() {
/* Encode SVG image for download link. */
html = d3.select("#aggregate-map")
.node()
.innerHTML;
- d3.select("#save_svg")
- .attr("href", "data:image/svg+xml;base64," + btoa(html));
- });
+ window.open("data:image/svg+xml;base64," + btoa(html), "SaveSVG");
+ },
+ render: function(query){
+ document.title = "Relay Search";
+ var compiledTemplate = _.template(aggregateMapTemplate)
+ this.$el.html(compiledTemplate({query: query,
+ aggregates: this.collection.models,
+ countries: CountryCodes,
+ error: this.error,
+ relaysPublished: this.relaysPublished,
+ bridgesPublished: this.bridgesPublished}));
+
+ this.plot();
+
+ var thisView = this;
+
+ $('input[name="aggregate-property"]').bind('change', function(){
+ thisView.plot();
+ });
+ $('#save_svg').bind('click', function(){
+ thisView.save();
+ });
},
renderError: function(){
var compiledTemplate = _.template(aggregateSearchTemplate);
diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html
index 19efd66..1beac01 100644
--- a/templates/aggregate/map.html
+++ b/templates/aggregate/map.html
@@ -36,5 +36,16 @@
<% } %>
<% } else { %>
<div id="aggregate-map"></div>
- <a id="save_svg">Save Graph</a>
+ <div class="panel panel-default">
+ <div class="panel-body">
+ <form id="map-radio-buttons">
+ <label class="radio-inline"><input type="radio" name="aggregate-property" value="consensus_weight_fraction" checked="checked"> Consensus Weight</label>
+ <label class="radio-inline"><input type="radio" name="aggregate-property" value="guard_probability"> Guard Probability</label>
+ <label class="radio-inline"><input type="radio" name="aggregate-property" value="middle_probability"> Middle Probability</label>
+ <label class="radio-inline"><input type="radio" name="aggregate-property" value="exit_probability"> Exit Probability</label>
+ </form>
+ <a class="btn btn-primary" href="#aggregate/cc<%= (query) ? "/" + query : "" %>">View Table</a>
+ <a class="btn btn-secondary" id="save_svg">Save Map</a>
+ </div>
+ </div>
<% } %>