Merge pull request #118 from kymckay/make-toggle

Make toggle

public/css/main.css

@@ -95,6 +95,9 @@ main {
   align-self: center;
   max-width: 450px;
 }
+#middle-low {
+  display: inline-block;
+}
 
 /* prediction data dropdown menu section formatting */
 #dropdown-section {

public/css/toggle.css

@@ -0,0 +1,77 @@
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 17px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.toggle {
+  position: relative;
+  align-self: center;
+  padding-bottom: 5pt;
+}
+
+#check-box {
+  position: right;
+}
+
+#predictionLabel {
+  padding-left: 5pt;
+  font-size: small;
+}

public/index.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" type="text/css" href="css/legend.css">
   <link rel="stylesheet" type="text/css" href="css/search.css">
   <link rel="stylesheet" type="text/css" href="css/table.css">
+  <link rel="stylesheet" type="text/css" href="css/toggle.css">
   <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -49,7 +50,9 @@
   </div>
 </header>
 <main>
-  <section id="map"></section>
+  <section id="map">
+  </section>
+
 
   <section id="middle-section">
     <div id="graph" >
@@ -60,11 +63,21 @@ <h4 id="graph-title"></h4>
       <canvas id="canvas" ></canvas>
     </div>
 
+    <!-- Map toggle  -->
+    <div class="toggle">
+      <label class="switch">
+        <input type="checkbox" id="check-box">
+        <span class="slider round"></span>
+      </label>
+      <label for="check-box" id="predictionLabel">Colour Map: Actual</label>
+    </div>
+
     <!-- Prediction data dropdown menu -->
     <div id="dropdown-section">
       <select id="dropdown-data"></select>
     </div>
 
+
     <!-- Politician Profile Section -->
     <div id="candidate-section" >
       <h4 id="candName" ></h4>

public/src/dropdowns.js

@@ -1,5 +1,7 @@
 import { updatePredictions } from './graph.js';
+import { updateMap } from './map.js';
 import { newYear } from './requests.js';
+import { setSource } from './data.js';
 
 // Populates a dropdown (identified by ID in HTML) with array of values
 async function populateDropdown(id, options, index = false) {
@@ -29,5 +31,9 @@ export async function initDropdowns() {
   document.getElementById("dropdown-year").addEventListener("change", e => newYear(e.target.value));
 
   // Handle updates on source change
-  document.getElementById("dropdown-data").addEventListener("change", e => updatePredictions(e.target.value))
+  document.getElementById("dropdown-data").addEventListener("change", e => {
+    setSource(e.target.value); // Source should be respected by other events
+    updatePredictions(); // Graph predictions will change
+    updateMap(); // Colours may change if toggle active
+  });
 }

public/src/graph.js

@@ -1,6 +1,6 @@
 /* global Chart */ // Defined by Chart.js
 
-import { curSource, getData, setSource } from "./data";
+import { curSource, getData } from "./data";
 
 // Chart will be updated later
 let chart;
@@ -143,16 +143,14 @@ export async function updateGraph(gss) {
   document.getElementById('graph-title').innerHTML = "Votes per Party";
 }
 
-export async function updatePredictions(index) {
-  setSource(index);
-
+export async function updatePredictions() {
   // Show prediction data as an outline only bar to differentiate
   chart.data.datasets[1] = {
     label: 'Prediction',
     backgroundColor: '#FFF',
     borderWidth: 1,
     borderColor: "#3C4750",
-    data: predictions[index]
+    data: predictions[curSource]
   };
 
   chart.update();

public/src/main.js

@@ -4,6 +4,7 @@ import { initGraph } from './graph.js';
 import { initSearch, initSort } from './list.js';
 import { initMap } from './map.js';
 import { getOptions, newYear } from './requests.js';
+import { initToggle } from './toggle';
 
 // Leave this blank, value injected during build (see contributing guidelines)
 const MAPBOX_KEY = '';
@@ -16,6 +17,7 @@ function initPage() {
   initSearch();
   initGraph();
   initCandidate();
+  initToggle();
 }
 
 document.addEventListener('DOMContentLoaded', initPage);

public/src/map.js

@@ -1,8 +1,9 @@
 /* global mapboxgl, MapboxGeocoder */ // Defined by Mapbox GL JS
 
-import { getData } from "./data";
+import { curSource, getData } from "./data";
 import { updateList } from './list.js';
 import { updateGraph } from "./graph";
+import { state as toggleState } from "./toggle";
 
 let mapbox;
 
@@ -125,7 +126,7 @@ export async function initMap(apiKey) {
     );
 
     // Set layer styling after they exist
-    updateColours();
+    updateColours(true);
 
     mapbox.on('mousemove', 'constituency-fill', function (e) {
       // Change the cursor style as a UI indicator.
@@ -202,6 +203,8 @@ function updateColours() {
   // Do nothing if the layers don't exist yet
   if (!mapbox.getLayer('constituency-fill')) return;
 
+  // Always respect the toggle state when coulouring map
+  const useReal = !toggleState;
   const data = getData();
 
   const colourMap = {};
@@ -210,7 +213,14 @@ function updateColours() {
   data.constituencies.forEach(c => {
     // Find party colour of candidate with most votes in the constituency
     // (candidates sorted by votes by default)
-    const winner = data.candidates.filter(ca => ca.gss_code === c.gss_code)[0];
+    let winner;
+    const cands = data.candidates.filter(ca => ca.gss_code === c.gss_code);
+    if (useReal) {
+      winner = cands[0]
+    } else {
+      winner = cands.sort((a, b) => b.predictions[curSource] - a.predictions[curSource])[0];
+    }
+
     const colour = data.parties.find(p => p.party_ec_id === winner.party_ec_id).colour;
 
     // Skip over parties with no colour
@@ -241,5 +251,5 @@ function updateColours() {
 }
 
 export function updateMap() {
-  updateColours();
+  updateColours(true);
 }

public/src/toggle.js

@@ -0,0 +1,13 @@
+import { updateMap } from "./map";
+
+export let state;
+
+export async function initToggle() {
+  document.getElementById('check-box').addEventListener('change', function() {
+    state = this.checked;
+
+    document.getElementById('predictionLabel').innerHTML = this.checked ? "Colour Map: Predicted" : "Colour Map: Actual";
+
+    updateMap();
+  });
+}