commit 966321690a124e50e55ae83bab27e53b78529a94 Author: Iain R. Learmonth irl@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> <% } %>