Feature/table-improvements

static/js/modules/maps.js

@@ -70,8 +70,8 @@ function stateMap($elm, data, width, height, max, addLegend, addTooltips) {
   );
   var quantiles = 4;
   max = max || _.max(_.pluck(data.results, 'total'));
-  var scale = chroma.scale(['#fff', '#2678BA']).domain([0, max]);
-  var quantize = chroma.scale(['#fff', '#2678BA']).domain([0, max], quantiles);
+  var scale = chroma.scale(['#fff', '#36BDBB']).domain([0, max]);
+  var quantize = chroma.scale(['#fff', '#36BDBB']).domain([0, max], quantiles);
   var map = svg.append('g')
     .selectAll('path')
       .data(stateFeatures)
@@ -85,11 +85,15 @@ function stateMap($elm, data, width, height, max, addLegend, addTooltips) {
       .attr('class', 'shape')
       .attr('d', path)
     .on('mouseover', function(d) {
-      this.parentNode.appendChild(this);
+      if (results.hasOwnProperty(d.properties.name)) {
+        this.parentNode.appendChild(this);
+        this.classList.add('state--hover')
+      }
     });
 
   if (addLegend || typeof addLegend === 'undefined') {
-    stateLegend(svg, scale, quantize, quantiles);
+    var legendSVG = d3.select('.legend-container svg');
+    stateLegend(legendSVG, scale, quantize, quantiles);
   }
 
   if (addTooltips) {
@@ -110,7 +114,7 @@ function stateLegend(svg, scale, quantize, quantiles) {
     .attr('x', function(d, i) {
       return i * legendWidth + (legendWidth - legendBar) / 2;
     })
-    .attr('y', 20)
+    .attr('y', 0)
     .attr('width', legendBar)
     .attr('height', 20)
     .style('fill', function(d) {
@@ -123,7 +127,7 @@ function stateLegend(svg, scale, quantize, quantiles) {
     .attr('x', function(d, i) {
       return (i + 0.5) * legendWidth;
     })
-    .attr('y', 50)
+    .attr('y', 30)
     .attr('width', legendWidth)
     .attr('height', 20)
     .attr('font-size', '10px')

static/js/pages/committee-single.js

@@ -176,6 +176,23 @@ function buildStateUrl($elm) {
   );
 }
 
+function highlightRowAndState($map, $table, state, scroll) {
+  var $scrollBody = $table.closest('.dataTables_scrollBody');
+  var $row = $scrollBody.find('span[data-state="' + state + '"]');
+
+  if ($row.length > 0) {
+    maps.highlightState($('.state-map'), state);
+    $scrollBody.find('.row-active').removeClass('row-active');
+    $row.parents('tr').addClass('row-active');
+    if (scroll) {
+      $scrollBody.animate({
+        scrollTop: $row.closest('tr').height() * parseInt($row.attr('data-row'))
+      }, 500);
+    }
+  }
+
+}
+
 var aggregateCallbacks = _.extend(
   {afterRender: tables.barsAfterRender.bind(undefined, undefined)},
   tables.offsetCallbacks
@@ -229,13 +246,8 @@ $(document).ready(function() {
           )
         );
         events.on('state.map', function(params) {
-          var $scrollBody = $table.closest('.dataTables_scrollBody');
-          var $row = $scrollBody.find('span[data-state="' + params.state + '"]');
-          $scrollBody.find('.active').removeClass('active');
-          $row.parents('tr').addClass('active');
-          $scrollBody.animate({
-            scrollTop: $row.closest('tr').height() * parseInt($row.attr('data-row'))
-          }, 500);
+          var $map = $('.state-map');
+          highlightRowAndState($map, $table, params.state, true)
         });
         $table.on('click', 'tr', function(e) {
           events.emit('state.table', {state: $(this).find('span[data-state]').attr('data-state')});
@@ -294,14 +306,13 @@ $(document).ready(function() {
   var $map = $('.state-map');
   var url = buildStateUrl($map);
   $.getJSON(url).done(function(data) {
-    maps.stateMap($map, data, 400, 400, null, true, false);
+    maps.stateMap($map, data, 400, 300, null, true, false);
   });
   events.on('state.table', function(params) {
-    maps.highlightState($map, params.state);
+    highlightRowAndState($map, $('.data-table'), params.state, false);
   });
   $map.on('click', 'path[data-state]', function(e) {
     var state = $(this).attr('data-state');
-    maps.highlightState($map, state);
     events.emit('state.map', {state: state});
   });
 });

static/js/pages/elections.js

@@ -384,8 +384,8 @@ function updateColorScale($container, cached) {
     }
   });
   var max = mapMax(cached);
-  var scale = chroma.scale(['#fff', '#2678BA']).domain([0, max]);
-  var quantize = chroma.scale(['#fff', '#2678BA']).domain([0, max], 4);
+  var scale = chroma.scale(['#fff', '#36BDBB']).domain([0, max]);
+  var quantize = chroma.scale(['#fff', '#36BDBB']).domain([0, max], 4);
   $container.closest('#state-maps').find('.state-map').each(function(_, elm) {
     var $elm = $(elm);
     var results = cached[$elm.find('select').val()];
@@ -396,7 +396,7 @@ function updateColorScale($container, cached) {
       });
   });
   $container.find('.legend svg g').remove();
-  var svg = d3.select($container.get(0)).select('.legend svg');
+  var svg = d3.select($container.get(0)).select('.legend-container svg');
   if (isFinite(max)) {
     maps.stateLegend(svg, scale, quantize, 4);
   }

static/js/pages/receipts.js

@@ -13,7 +13,7 @@ var columns = [
     data: 'contributor',
     orderable: false,
     className: 'all',
-    width: '280px',
+    width: '20%',
     render: function(data, type, row, meta) {
       if (data) {
         return tables.buildEntityLink(data.name, '/committee/' + data.committee_id, 'committee');

templates/partials/elections/candidate-comparison-tab.html

@@ -95,9 +95,11 @@ <h3 class="results-info__title">Contributions by location</h3>
           </div>
           <div id="state-maps" class="panel-toggle-element" aria-hidden="true'">
             <div class="choropleths row"></div>
-            <div class="legend">
-              <span class="t-sans t-block">Total amount received from state:</span>
-              <svg></svg>
+            <div class="row">
+              <div class="legend-container">
+                <span class="t-block">Total amount received from state:</span>
+                <svg></svg>
+              </div>
             </div>
           </div>
         </div>

templates/partials/filings-table.html

@@ -1,4 +1,4 @@
-<table id="results" class="data-table" data-type="filing-table">
+<table id="results" class="data-table data-table--wrapped" data-type="filing-table">
     <thead>
       <tr>
         <th scope="col">Document</th>

templates/partials/receipts-tab.html

@@ -39,7 +39,7 @@ <h2 class="heading__title" id="section-2-heading">
           <div class="results-info results-info--simple">
             <h3 class="results-info__title">Receipts by State</h3>
           </div>
-          <div class="usa-width-one-half">
+          <div class="map-table">
             <table
                 class="data-table"
                 data-type="receipts-by-state"
@@ -52,8 +52,13 @@ <h3 class="results-info__title">Receipts by State</h3>
               </thead>
             </table>
           </div>
-          <div class="usa-width-one-half">
-            <div class="state-map" data-committee-id="{{ committee.committee_id }}" data-cycle="{{ cycle }}"></div>
+          <div class="map-panel">
+            <div class="state-map" data-committee-id="{{ committee.committee_id }}" data-cycle="{{ cycle }}">
+              <div class="legend-container">
+                <span class="t-sans t-block">Total amount received from state:</span>
+                <svg></svg>
+              </div>
+            </div>
           </div>
         </div>