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>