Implement Encart des thématiques clefs (#17)

* Implement #9

* Manage new histogramslider layout

* Remove date histogramslider  labels in mobile

* Toggle stats in mobile

Icons are placeholders

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 {

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;

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))
+}

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>

src/components/HistogramSlider.vue

@@ -46,7 +46,7 @@ export default class HistogramSlider extends Vue {
 
 <style>
 .vue-histogram-view {
-  z-index: 9;
+  z-index: 15;
 }
 
 .slider-wrapper {
@@ -91,6 +91,7 @@ export default class HistogramSlider extends Vue {
   display: block;
   left: 0;
   width: 0;
+  z-index: 11;
 }
 
 .irs-shadow {
@@ -105,11 +106,11 @@ export default class HistogramSlider extends Vue {
   display: block;
   box-sizing: border-box;
   cursor: default;
-  z-index: 1;
+  z-index: 11;
 }
 
 .irs-handle.type_last {
-  z-index: 2;
+  z-index: 12;
 }
 
 .irs-min,
@@ -186,7 +187,7 @@ export default class HistogramSlider extends Vue {
   height: 100%;
   cursor: default;
   background: rgba(0, 0, 0, 0);
-  z-index: 2;
+  z-index: 12;
 }
 
 .lt-ie9 .irs-disable-mask {
@@ -255,7 +256,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);
 }

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>