Skip to content

Commit

Permalink
Implement #9
Browse files Browse the repository at this point in the history
  • Loading branch information
NicolasGrosjean committed Jun 19, 2021
1 parent e57276f commit 37564e6
Show file tree
Hide file tree
Showing 9 changed files with 227 additions and 60 deletions.
5 changes: 4 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<PopUp />
<HistogramSlider />
<Legend />
<Stats />
</template>

<script lang="ts">
Expand All @@ -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({
Expand All @@ -21,7 +23,8 @@ import { store } from './store'
BaseMap,
HistogramSlider,
Legend,
PopUp
PopUp,
Stats
}
})
export default class App extends Vue {
Expand Down
2 changes: 1 addition & 1 deletion src/classes/BaseMap.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
42 changes: 0 additions & 42 deletions src/classes/PopUp.ts

This file was deleted.

82 changes: 82 additions & 0 deletions src/classes/PopUpAndStats.ts
Original file line number Diff line number Diff line change
@@ -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))
}
11 changes: 1 addition & 10 deletions src/components/BaseMap.vue
Original file line number Diff line number Diff line change
@@ -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'>
Expand All @@ -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>
4 changes: 2 additions & 2 deletions src/components/HistogramSlider.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default class HistogramSlider extends Vue {

<style>
.vue-histogram-view {
z-index: 9;
z-index: 11;
}
.slider-wrapper {
Expand Down Expand Up @@ -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);
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/PopUp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
125 changes: 125 additions & 0 deletions src/components/Stats.vue
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 9 additions & 1 deletion src/store.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 () {
Expand All @@ -41,5 +45,9 @@ export const store = {

updateHistogramSlider () {
this.state.histogramSlider.updateHistogram(this.allData.map(d => d.date.getTime()), this)
},

updateStats () {
updateStats(this.state)
}
}

0 comments on commit 37564e6

Please sign in to comment.