From 37564e64363924013a62eca821752e3debaead81 Mon Sep 17 00:00:00 2001
From: NicolasGrosjean <grosjen@hotmail.fr>
Date: Sat, 19 Jun 2021 17:31:27 +0200
Subject: [PATCH] Implement #9

---
 src/App.vue                        |   5 +-
 src/classes/BaseMap.ts             |   2 +-
 src/classes/PopUp.ts               |  42 ----------
 src/classes/PopUpAndStats.ts       |  82 +++++++++++++++++++
 src/components/BaseMap.vue         |  11 +--
 src/components/HistogramSlider.vue |   4 +-
 src/components/PopUp.vue           |   6 +-
 src/components/Stats.vue           | 125 +++++++++++++++++++++++++++++
 src/store.ts                       |  10 ++-
 9 files changed, 227 insertions(+), 60 deletions(-)
 delete mode 100644 src/classes/PopUp.ts
 create mode 100644 src/classes/PopUpAndStats.ts
 create mode 100644 src/components/Stats.vue

diff --git a/src/App.vue b/src/App.vue
index 3bb8262..57af86b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
   <PopUp />
   <HistogramSlider />
   <Legend />
+  <Stats />
 </template>
 
 <script lang="ts">
@@ -13,6 +14,7 @@ import PopUp from './components/PopUp.vue'
 import Header from './components/Header.vue'
 import Legend from './components/Legend.vue'
 import HistogramSlider from './components/HistogramSlider.vue'
+import Stats from './components/Stats.vue'
 import { store } from './store'
 
 @Options({
@@ -21,7 +23,8 @@ import { store } from './store'
     BaseMap,
     HistogramSlider,
     Legend,
-    PopUp
+    PopUp,
+    Stats
   }
 })
 export default class App extends Vue {
diff --git a/src/classes/BaseMap.ts b/src/classes/BaseMap.ts
index 8616a6e..2df6200 100644
--- a/src/classes/BaseMap.ts
+++ b/src/classes/BaseMap.ts
@@ -1,7 +1,7 @@
 import { OpsData, TypeOps } from './opsData'
 import { MapboxGLButtonControl } from './MapboxGLButtonControl'
 import mapboxgl from 'mapbox-gl'
-import { showPopUp } from './PopUp'
+import { showPopUp } from './PopUpAndStats'
 
 export class BaseMap {
   private map!: mapboxgl.Map;
diff --git a/src/classes/PopUp.ts b/src/classes/PopUp.ts
deleted file mode 100644
index b4effe2..0000000
--- a/src/classes/PopUp.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { OpsData } from './opsData'
-
-const numberToString = function (n: number) {
-  if (isNaN(n)) {
-    return ''
-  } else {
-    return n.toString()
-  }
-}
-
-const setInnerText = function (popUpElemId: string, textToAdd: string) {
-  const popUpElem = document.getElementById(popUpElemId)
-  if (popUpElem) {
-    popUpElem.innerText = textToAdd
-  }
-}
-
-const fillPopUp = function (data: OpsData) {
-  setInnerText('popUpTypeOps', data.typeOps)
-  setInnerText('popUpDate', data.date.toDateString())
-  setInnerText('popUpBoatType', data.boatType)
-  setInnerText('popUpNbSurvivor', numberToString(data.nbSurvivor))
-  setInnerText('popUpFemale', numberToString(data.female))
-  setInnerText('popUpMale', numberToString(data.male))
-  setInnerText('popUpMinor', numberToString(data.under18))
-  setInnerText('popUpPregnant', numberToString(data.pregnantwomen))
-  setInnerText('popUpUnaccompagnied', numberToString(data.under18unacc))
-  setInnerText('popUpChildren', numberToString(data.under5))
-  setInnerText('popUpNationalities', numberToString(data.nbNationalities))
-  setInnerText('popUpWind', numberToString(data.windForce))
-  setInnerText('popUpWave', numberToString(data.waveHeight))
-  setInnerText('popUpLat', numberToString(data.latitude))
-  setInnerText('popUpLon', numberToString(data.longitude))
-}
-
-export const showPopUp = function (data: OpsData) {
-  const popUp = document.getElementById('popUp')
-  if (popUp) {
-    popUp.classList.add('scale-100')
-  }
-  fillPopUp(data)
-}
diff --git a/src/classes/PopUpAndStats.ts b/src/classes/PopUpAndStats.ts
new file mode 100644
index 0000000..d9d8503
--- /dev/null
+++ b/src/classes/PopUpAndStats.ts
@@ -0,0 +1,82 @@
+import { OpsData } from './opsData'
+import { State } from './state'
+
+const numberToString = function (n: number) {
+  if (isNaN(n)) {
+    return ''
+  } else {
+    return n.toString()
+  }
+}
+
+const setInnerText = function (elemId: string, textToAdd: string) {
+  const elem = document.getElementById(elemId)
+  if (elem) {
+    elem.innerText = textToAdd
+  }
+}
+
+const fillPopUp = function (data: OpsData) {
+  setInnerText('popUpTypeOps', data.typeOps)
+  setInnerText('popUpDate', data.date.toDateString())
+  setInnerText('popUpBoatType', data.boatType)
+  setInnerText('popUpNbSurvivor', numberToString(data.nbSurvivor))
+  setInnerText('popUpFemale', numberToString(data.female))
+  setInnerText('popUpMale', numberToString(data.male))
+  setInnerText('popUpMinor', numberToString(data.under18))
+  setInnerText('popUpPregnant', numberToString(data.pregnantwomen))
+  setInnerText('popUpUnaccompagnied', numberToString(data.under18unacc))
+  setInnerText('popUpChildren', numberToString(data.under5))
+  setInnerText('popUpNationalities', numberToString(data.nbNationalities))
+  setInnerText('popUpWind', numberToString(data.windForce))
+  setInnerText('popUpWave', numberToString(data.waveHeight))
+  setInnerText('popUpLat', numberToString(data.latitude))
+  setInnerText('popUpLon', numberToString(data.longitude))
+}
+
+export const showPopUp = function (data: OpsData) {
+  const popUp = document.getElementById('popUp')
+  if (popUp) {
+    popUp.classList.add('scale-100')
+  }
+  fillPopUp(data)
+}
+
+export const updateStats = function (state: State) {
+  setInnerText('statsMinDate', state.minDate.toDateString())
+  setInnerText('statsMaxDate', state.maxDate.toDateString())
+  let nbSurvivor = 0
+  let female = 0
+  let male = 0
+  let under18 = 0
+  let pregnantwomen = 0
+  let under18unacc = 0
+  let under5 = 0
+  let nbNationalities = 0
+  const days = new Set()
+  for (const data of state.timeFilteredData) {
+    nbSurvivor = data.nbSurvivor ? nbSurvivor + data.nbSurvivor : nbSurvivor
+    female = data.female ? female + data.female : female
+    male = data.male ? male + data.male : male
+    under18 = data.under18 ? under18 + data.under18 : under18
+    pregnantwomen = data.pregnantwomen ? pregnantwomen + data.pregnantwomen : pregnantwomen
+    under18unacc = data.under18unacc ? under18unacc + data.under18unacc : under18unacc
+    under5 = data.under5 ? under5 + data.under5 : under5
+    nbNationalities = data.nbNationalities ? Math.max(nbNationalities, data.nbNationalities) : nbNationalities
+    days.add(data.date)
+  }
+  setInnerText('statsNbSurvivor', numberToString(nbSurvivor))
+  setInnerText('statsFemale', numberToString(female))
+  setInnerText('statsMale', numberToString(male))
+  setInnerText('statsMinor', numberToString(under18))
+  setInnerText('statsPregnant', numberToString(pregnantwomen))
+  setInnerText('statsUnaccompagnied', numberToString(under18unacc))
+  setInnerText('statsChildren', numberToString(under5))
+  setInnerText('statsNationalities', numberToString(nbNationalities))
+  setInnerText('statsNbDays', numberToString(days.size))
+  // Mobile view
+  setInnerText('statsMinDate2', state.minDate.toDateString())
+  setInnerText('statsMaxDate2', state.maxDate.toDateString())
+  setInnerText('statsNbSurvivor2', numberToString(nbSurvivor))
+  setInnerText('statsNbDays2', numberToString(days.size))
+}
diff --git a/src/components/BaseMap.vue b/src/components/BaseMap.vue
index e784417..0c005a6 100644
--- a/src/components/BaseMap.vue
+++ b/src/components/BaseMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id='mapContainer' class='basemap basemap-height-mobile sm:basemap-height-sm'></div>
+  <div id='mapContainer' class='w-screen m-auto z-0 basemap-height-mobile sm:basemap-height-sm'></div>
 </template>
 
 <script lang='ts'>
@@ -16,12 +16,3 @@ export default class extends Vue {
   }
 }
 </script>
-
-<!-- Add 'scoped' attribute to limit CSS to this component only -->
-<style scoped>
-  .basemap {
-    width: 100vw;
-    /* This works to center horizontally we probably need to do something else to center vertically depending on where this sits */
-    margin: auto;
-  }
-</style>
diff --git a/src/components/HistogramSlider.vue b/src/components/HistogramSlider.vue
index 6f5e049..14b17ae 100644
--- a/src/components/HistogramSlider.vue
+++ b/src/components/HistogramSlider.vue
@@ -46,7 +46,7 @@ export default class HistogramSlider extends Vue {
 
 <style>
 .vue-histogram-view {
-  z-index: 9;
+  z-index: 11;
 }
 
 .slider-wrapper {
@@ -255,7 +255,7 @@ export default class HistogramSlider extends Vue {
   width: var(--handle-size);
   height: var(--handle-size);
   background-color: var(--handle-color);
-  z-index: 9;
+  z-index: 11;
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
 }
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index 409393a..f854def 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -15,17 +15,17 @@
           <div class="ml-3">
             <div class="flex flex-row justify-around mb-5">
               <div class="flex flex-col">
-                <span class ='icon icon-female text-6xl text-center'/>
+                <span class ='icon icon-female text-6xl text-center sm:text-5xl'/>
                 <span id='popUpFemale' class='font-bold text-center'/>
                 <p class='text-xs uppercase text-center'>females</p>
               </div>
               <div class="flex flex-col">
-                <span class ='icon icon-male text-6xl text-center'/>
+                <span class ='icon icon-male text-6xl text-center sm:text-5xl'/>
                 <span id='popUpMale' class='font-bold text-center'/>
                 <p class='text-xs uppercase text-center'>males</p>
               </div>
               <div class="flex flex-col">
-                <span class ='icon icon-kid text-6xl text-center'/>
+                <span class ='icon icon-kid text-6xl text-center sm:text-5xl'/>
                 <span id='popUpMinor' class='font-bold text-center'/>
                 <p class='text-xs uppercase text-center'>minors</p>
               </div>
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
new file mode 100644
index 0000000..dd38ba1
--- /dev/null
+++ b/src/components/Stats.vue
@@ -0,0 +1,125 @@
+<template>
+
+  <!-- mobile version -->
+  <div id='stats' :style="style" class="bg-white rounded-xl flex flex-col justify-between w-full pb-10 z-10 position-mobile sm:invisible">
+    <h1 class=' text-sm text-white text-center rounded-t mb-1'><span id='statsMinDate2'/> <span class ='icon icon-calendar'/> - <span id='statsMaxDate2'/><span class ='icon icon-calendar ml-1'/></h1>
+    <div class='flex flex-row justify-around'>
+      <div class='flex flex-col'>
+        <span class ='icon icon-rescue text-2xl text-center orange-color'/>
+        <p class='text-sm blue-color font-bold'><span id='statsNbSurvivor' class='orange-color text-lg'/> people rescued</p>
+      </div>
+      <div class='flex flex-col'>
+        <span class ='icon icon-sosmed-ship  text-4xl leading-6 text-center detail-color'/>
+        <p class='text-sm text-center blue-color font-bold'><span id='statsNbDays' class='orange-color text-lg'/> operational days</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- sm version -->
+  <div id='stats' :style="style" class="bg-white rounded-xl flex flex-col justify-between w-1/5 h-1/2 position-desktop invisible sm:visible">
+    <h1 class='text-white text-center rounded-t mb-3'><span id='statsMinDate'/> <span class ='icon icon-calendar text-sm'/> - <span id='statsMaxDate'/><span class ='icon icon-calendar text-sm ml-1'/></h1>
+    <div class='flex flex-col pb-6 pl-6 pr-6'>
+      <span class ='icon icon-rescue text-5xl text-center orange-color'/>
+      <p class='blue-color text-xl font-bold mb-5'><span id='statsNbSurvivor' class='orange-color'/> people rescued</p>
+      <div class="flex flex-row justify-around mb-5 blue-color">
+        <div class="flex flex-col">
+          <span class ='icon icon-female text-5xl text-center'/>
+          <span id='statsFemale' class='font-bold text-center'/>
+          <p class='text-xs uppercase text-center'>females</p>
+        </div>
+        <div class="flex flex-col">
+          <span class ='icon icon-male text-5xl text-center'/>
+          <span id='statsMale' class='font-bold text-center'/>
+          <p class='text-xs uppercase text-center'>males</p>
+        </div>
+        <div class="flex flex-col">
+          <span class ='icon icon-kid text-5xl text-center'/>
+          <span id='statsMinor' class='font-bold text-center'/>
+          <p class='text-xs uppercase text-center'>minors</p>
+        </div>
+      </div>
+      <div class="flex flex-row justify-around border-dotted border-color border-2 rounded-xl p-4 mb-5">
+        <div class="flex flex-row">
+          <div class="flex flex-col">
+            <span id='statsPregnant' class='font-bold text-right detail-color'/>
+            <p class='text-3xs uppercase text-right detail-color'>pregnant</p>
+          </div>
+          <span class ='icon icon-pregnant text-4xl text-right detail-color'/>
+        </div>
+        <div class="flex flex-col">
+          <span class ='icon text-4xl text-center detail-color'/>
+          <span id='statsUnaccompagnied' class='font-bold text-center detail-color'/>
+          <p class='text-3xs uppercase text-center detail-color'>unaccompagnied</p>
+        </div>
+        <div class="flex flex-row">
+          <span class ='icon icon-bib text-3xl text-left detail-color'/>
+          <div class="flex flex-col">
+          <span id='statsChildren' class='font-bold text-center detail-color'/>
+          <p class='text-3xs uppercase text-left detail-color'>children</p>
+          </div>
+        </div>
+      </div>
+      <p class='text-sm text-center orange-color'><span class ='icon icon-planet mr-3'/><span id='statsNationalities'/> nationalities</p>
+      <hr class='border w-1/4 ml-auto mr-auto mt-2 mb-2'/>
+      <span class ='icon icon-sosmed-ship  text-8xl leading-6 text-center detail-color mb-2'/>
+      <p class='text-center blue-color text-xl font-bold'><span id='statsNbDays' class='orange-color'/> operational days</p>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Colors } from '@/utils/Colors'
+
+export default {
+  name: 'Stats',
+
+  computed: {
+    style () {
+      return `
+        --orange-color: ${Colors.ORANGE};
+        --blue-color: ${Colors.BLUE};
+      `
+    }
+  }
+}
+
+</script>
+
+<!-- Add 'scoped' attribute to limit CSS to this component only -->
+<style scoped>
+  .position-desktop {
+    position: absolute;
+    top: 20%;
+    margin-left: 5%;
+  }
+
+  .position-mobile {
+    position: absolute;
+    bottom: 55px;
+  }
+
+  h1 {
+    background-color: var(--orange-color);
+  }
+
+  .blue-color {
+    color: var(--blue-color);
+  }
+
+  .orange-color {
+    color: var(--orange-color);
+  }
+
+  .detail-color {
+    color: var(--orange-color);
+  }
+
+  .border-color {
+    border-color: var(--orange-color);
+  }
+
+  .text-3xs {
+    font-size: 0.5rem;
+    line-height: 0.5rem;
+  }
+</style>
diff --git a/src/store.ts b/src/store.ts
index 334ef67..92a6ac5 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,4 +1,5 @@
 import { OpsData, fetchOpsData } from './classes/opsData'
+import { updateStats } from './classes/PopUpAndStats'
 import { State } from './classes/state'
 
 // Constant to expose and manage the store
@@ -8,13 +9,16 @@ export const store = {
   state: new State(),
 
   filterData (minDate: Date, maxDate: Date) {
+    this.state.minDate = new Date(minDate)
+    this.state.maxDate = new Date(maxDate)
     this.state.timeFilteredData = []
     for (const data of this.allData) {
-      if ((minDate <= data.date) && (data.date <= maxDate)) {
+      if ((this.state.minDate <= data.date) && (data.date <= this.state.maxDate)) {
         this.state.timeFilteredData.push(data)
       }
     }
     this.updateMap()
+    this.updateStats()
   },
 
   async initStore () {
@@ -41,5 +45,9 @@ export const store = {
 
   updateHistogramSlider () {
     this.state.histogramSlider.updateHistogram(this.allData.map(d => d.date.getTime()), this)
+  },
+
+  updateStats () {
+    updateStats(this.state)
   }
 }