Added toggle for data source and made help text clearer

jameshulse · jameshulse · commit e95d44f91cca · 2020-04-11T00:13:24.000+01:00
diff --git a/package.json b/package.json
@@ -10,11 +10,14 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.13",
     "@amcharts/amcharts4-geodata": "^4.1.14",
+    "@syncfusion/ej2-vue-inputs": "^18.1.43",
     "color-interpolate": "^1.0.5",
     "core-js": "^3.6.4",
     "data-forge": "^1.8.4",
     "date-fns": "^2.12.0",
     "least-squares": "^0.0.2",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6"
   },
diff --git a/src/components/DataToggle.vue b/src/components/DataToggle.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="toggle">
+        <svg v-if="dataType === 'cases'" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="notes-medical" class="svg-inline--fa fa-notes-medical fa-w-12" role="img" viewBox="0 0 384 512"><path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm96 304c0 4.4-3.6 8-8 8h-56v56c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-56h-56c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h56v-56c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v56h56c4.4 0 8 3.6 8 8v48zm0-192c0 4.4-3.6 8-8 8H104c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h176c4.4 0 8 3.6 8 8v16z"/></svg>
+        <svg v-else-if="dataType === 'deaths'" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="skull" class="svg-inline--fa fa-skull fa-w-16" role="img" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"/></svg>
+
+        <div class="tooltip">
+            <p>Data based on {{ dataType === 'cases' ? 'confirmed cases' : 'deaths' }} by country.</p>
+            <p>Click to change.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataType: { type: String, required: true },
+    }
+};
+</script>
+
+<style scoped lang="scss">
+
+.toggle {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    color: #9a9a9a;
+    position: relative;
+
+    &:hover {
+        color: #565656;
+    }
+
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        transform: translateY(-50%);
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
+.tooltip {
+    display: none;
+    width: 300px;
+}
+
+.toggle:hover .tooltip {
+    position: absolute;
+    top: 0px;
+    left: 60px;
+    display: block;
+    background: white;
+    border: 1px solid black;
+    padding: 0.5em;
+}
+
+</style>
diff --git a/src/components/Help.vue b/src/components/Help.vue
@@ -1,10 +1,10 @@
-<template>
+<template functional>
     <div class="help">
-        <div class="opener" @click="toggle">
+        <div class="opener">
             <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
         </div>
 
-        <div v-if="isOpen" @click.stop ref="panel" class="panel">
+        <div ref="panel" class="panel">
             <p>
                 The fight against COVID-19 is being waged across the globe. This visualisation shows which countries are winning against exponential growth.
                 Countries are colour coded to represent the rate at which infection is spreading. Green countries have fought back against the growth and the number
@@ -16,47 +16,52 @@
 
 <script>
 export default {
-    data () {
-        return {
-            isOpen: false
-        };
-    },
-    methods: {
-        toggle (e) {
-            this.isOpen = !this.isOpen;
+    // data () {
+    //     return {
+    //         isOpen: false
+    //     };
+    // },
+    // methods: {
+    //     toggle (e) {
+    //         this.isOpen = !this.isOpen;
 
-            if (this.isOpen) {
-                document.addEventListener('click', this.closeOnOutsideClick);
-            } else {
-                document.removeEventListener('click', this.closeOnOutsideClick);
-            }
+    //         if (this.isOpen) {
+    //             document.addEventListener('click', this.closeOnOutsideClick);
+    //         }
 
-            e.stopPropagation();
-        },
-        closeOnOutsideClick (e) {
-            this.isOpen = false;
-        }
-    }
+    //         e.stopPropagation();
+    //     },
+    //     closeOnOutsideClick (e) {
+    //         this.isOpen = false;
+
+    //         document.removeEventListener('click', this.closeOnOutsideClick);
+    //     }
+    // }
 };
 </script>
 
 <style scoped>
 
+.help {
+    position: relative;
+}
+
 .opener {
-    position: absolute;
-    z-index: 1;
-    left: 10px;
-    top: 10px;
     width: 50px;
     height: 50px;
     cursor: pointer;
     color: #9a9a9a;
 }
 
+.help:hover .panel {
+    display: block;
+}
+
 .panel {
+    display: none;
     position: absolute;
-    left: 80px;
-    top: 10px;
+    left: 60px;
+    top: 0px;
     border: 1px solid #565656;
     background: white;
     width: 300px;
diff --git a/src/lib/countryLookup.js b/src/lib/countryLookup.js
@@ -117,8 +117,8 @@ export default {
     'Kazakhstan': 'KZ',
     'Kenya': 'KE',
     'Kiribati': 'KI',
-    'Korea (Democratic People\s Republic of)': 'KP',
-    'Korea, Republic of': 'KR',
+    'Korea (Democratic People\'s Republic of)': 'KP',
+    'South Korea': 'KR',
     'Kuwait': 'KW',
     'Kyrgyzstan': 'KG',
     'Lao People\'s Democratic Republic': 'LA',
diff --git a/src/lib/data.js b/src/lib/data.js
@@ -3,11 +3,11 @@ import { parse, format, addDays } from 'date-fns';
 import LeastSquares from 'least-squares';
 import countryLookup from './countryLookup';
 
-const dataUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv';
-// const dataUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv';
+const casesUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv';
+const deathsUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv';
 
-export async function loadData (period = 7) {
-    const response = await fetch(dataUrl);
+export async function loadData (dataType, period = 7) {
+    const response = await fetch(dataType === 'cases' ? casesUrl : deathsUrl);
     const data = await response.text();
 
     const dfAll = fromCSV(data);
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,19 +1,36 @@
 <template>
     <Loading v-if="loading" />
     <div v-else class="container">
-        <!-- <h1 class="title">Are We Winning?</h1> -->
-        <Help />
+        <div class="options">
+            <Help />
+            <DataToggle :data-type="dataType" @click.native="changeDataType()" />
+        </div>
         <Map class="map" :countries="countries" />
+        <ejs-slider id="range" min="1" max="20" v-model="dateRange" type="Range"></ejs-slider>
     </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import * as interpolate from 'color-interpolate';
+import { SliderPlugin } from '@syncfusion/ej2-vue-inputs';
 import { loadData } from '@/lib/data';
 import Help from '@/components/Help';
+import DataToggle from '@/components/DataToggle';
 import Map from '@/components/Map';
 import Loading from '@/components/Loading';
 
+// TODO
+// - Fade map etc in
+// - Date range slider to pick dates for calculation
+// - Toggle between confirmed cases and deaths
+// - Download data sets and save to local storage for quicker subsequent loads on same day
+// - Confirm calculation is correct / useful
+// - Get data working for grey countries
+// - Finalise colour scheme!
+
+Vue.use(SliderPlugin);
+
 // const gradient = ['#017a29', '#c7c214', '#c40707'];
 // const gradient = ['#447c46', '#5b995e', '#81c784', '#d0855c', '#c84646'];
 // const gradient = ['#440154', '#414487', '#2a788e', '#22a884', '#7ad151', '#fde725'];
@@ -25,36 +42,59 @@ const badGradient = ['#FFECB3', '#EF6C00'];
 export default {
     name: 'Home',
     components: {
+        DataToggle,
         Help,
         Loading,
         Map
     },
     data () {
         return {
             loading: true,
+            dataType: 'cases',
+            dateRange: null,
             countries: null
         };
     },
     async created () {
-        const data = await loadData();
+        await this.loadData();
+    },
+    computed: {
+        periodLength () {
+            return 7; // Default to 7 days
+        }
+    },
+    watch: {
+        dataType () {
+            this.loadData();
+        }
+    },
+    methods: {
+        async loadData () {
+            this.loading = true;
 
-        const max = 8;
-        const min = -8;
+            const data = await loadData(this.dataType, this.periodLength);
 
-        const goodColormap = interpolate(goodGradient);
-        const badColormap = interpolate(badGradient);
-        const normalize = x => (Math.max(Math.min(x, max), min) + Math.abs(min)) / (Math.abs(max) + Math.abs(min));
+            const max = 8;
+            const min = -8;
 
-        this.countries = data.map(c => ({
-            id: c.id,
-            gradient: c.gradient,
-            fill: c.gradient === 0
-                ? '#C8E6C9'
-                : (c.gradient < 0 ? goodColormap(normalize(c.gradient)) : badColormap(normalize(c.gradient)))
-        }));
+            const goodColormap = interpolate(goodGradient);
+            const badColormap = interpolate(badGradient);
+            const normalize = x => (Math.max(Math.min(x, max), min) + Math.abs(min)) / (Math.abs(max) + Math.abs(min));
 
-        this.loading = false;
-    },
+            this.countries = data.map(c => ({
+                id: c.id,
+                gradient: c.gradient,
+                fill: c.gradient === 0
+                    ? '#C8E6C9'
+                    : (c.gradient < 0 ? goodColormap(normalize(c.gradient)) : badColormap(normalize(c.gradient)))
+            }));
+
+            this.loading = false;
+        },
+        changeDataType () {
+            this.dataType = this.dataType === 'cases' ? 'deaths' : 'cases';
+        }
+    }
 };
 </script>
 
@@ -64,18 +104,31 @@ export default {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    /* padding: 3em; */
     height: 100%;
 }
 
 .map {
     flex: 1;
 }
 
+.options {
+    z-index: 1;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.options > * {
+    margin-bottom: 1em;
+}
+
 .fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter, .fade-leave-to {
     opacity: 0;
 }
 
diff --git a/yarn.lock b/yarn.lock
