Skip to content

Instantly share code, notes, and snippets.

@akatgelar

akatgelar/pages-data-index-20200412-165900.vue

Last active April 12, 2020 13:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save akatgelar/849e617df7a1ba63ba82bbd4f43adab0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save akatgelar/849e617df7a1ba63ba82bbd4f43adab0 to your computer and use it in GitHub Desktop.
Download ZIP
fix conflict dashboard-development 20200412-165900
Raw
pages-data-index-20200412-165900.vue
<template>
<div class="container mx-auto">
<br>
<header class="m-4 mb-8 md:m-8">
<h3 class="text-3xl text-gray-900 font-bold text-left leading-none" style="margin-bottom: 10px; ">
Dashboard Kasus COVID-19 Provinsi Jawa Barat
</h3>
<small class="text-xl opacity-75">*Update Terakhir: {{ lastUpdatedAt }}</small>
</header>
<section class="m-4 mb-8 md:m-8">
<DataSummary />
</section>
<!-- <section class="m-4 mb-8 md:m-8">
<DataRDT :propsDataRekapitulasiJabar.sync="jsonDataRekapitulasiJabarProv" />
</section> -->
<section class="m-4 mb-8 md:m-8">
<div class="flex flex-row items-stretch">
<button
class="button-selector mr-2"
:active="stat.isActivePolygon"
@click="enablePolygon"
>
<font-awesome-icon :icon="faMap" /> Sebaran Polygon
</button>
<button
class="button-selector mr-2"
:active="stat.isActiveCluster"
@click="enableCluster"
>
<font-awesome-icon :icon="faBug" /> Sebaran Titik
</button>
<button
class="button-selector mr-2"
:active="stat.isActiveFaskes"
@click="enableFaskes"
>
<font-awesome-icon :icon="faFirstAid" /> Fasilitas Kesehatan
</button>
<!-- <button
class="button-selector mr-2"
:active="stat.isActiveTimeslider"
@click="enableTimeslider"
>
<font-awesome-icon :icon="faCalendarMinus" /> Timeslider - Data Positif
</button> -->
</div>
<div class="mt-4">
<!-- <MapSebaranCovid v-if="stat.isActiveCovid" />
<MapFaskes v-if="stat.isActiveRS" />
<MapSebaranPolygon v-if="stat.isActivePolygon" /> -->
<MapV2SebaranPolygon
v-if="stat.isActivePolygon"
:propsDataSebaranJawaBarat.sync="jsonDataSebaranJawaBarat"
/>
<MapV2SebaranCluster
v-if="stat.isActiveCluster"
:propsDataSebaranJabar.sync="jsonDataSebaranJabar"
/>
<MapV2SebaranFaskes
v-if="stat.isActiveFaskes"
:propsDataSebaranJabarFaskes.sync="jsonDataSebaranJabarFaskes"
/>
<MapV2SebaranTimeslider
v-if="stat.isActiveTimeslider"
:propsDataSebaranJabar.sync="jsonDataSebaranJabar"
/>
</div>
</section>
<section class="m-4 mb-8 md:m-8">
<BarStatArea
:propsDataRekapitulasiJabarProv.sync="jsonDataRekapitulasiJabarProv"
:propsDataRekapitulasiJabarKab.sync="jsonDataRekapitulasiJabarKab"
:propsDataRekapitulasiJabarHarianProv.sync="jsonDataRekapitulasiJabarHarianProv"
:propsDataRekapitulasiJabarHarianKab.sync="jsonDataRekapitulasiJabarHarianKab"
:propsDataRekapitulasiJabarKumulatifProv.sync="jsonDataRekapitulasiJabarKumulatifProv"
:propsDataRekapitulasiJabarKumulatifKab.sync="jsonDataRekapitulasiJabarKumulatifKab"
:propsDataNasionalHarianKumulatif.sync="jsonDataNasionalHarianKumulatif"
/>
</section>
<section class="m-4 mb-8 md:m-8">
<BarStatTable :propsDataRekapitulasiJabarKab.sync="jsonDataRekapitulasiJabarKab" />
</section>
<section class="m-4 mb-8 md:m-8">
<div class="chart-container w-full">
<BarStatJenisKelamin :propsDataRekapitulasiJabar.sync="jsonDataRekapitulasiJabarProv" />
<BarStatUsia :propsDataRekapitulasiJabar.sync="jsonDataRekapitulasiJabarProv" />
</div>
</section>
<section class="m-4 md:m-8">
<BarStatHarianAkumulatif
:propsDataRekapitulasiJabarHarianProv.sync="jsonDataRekapitulasiJabarHarianProv"
:propsDataRekapitulasiJabarKumulatifProv.sync="jsonDataRekapitulasiJabarKumulatifProv"
/>
</section>
</div>
</template>
<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { faFirstAid, faBug, faMap, faCalendarMinus } from '@fortawesome/free-solid-svg-icons'
import DataSummary from '~/components/_pages/index/DataSummary'
import { formatDateTimeShort } from '~/lib/date'
import { analytics } from '~/lib/firebase'
export default {
components: {
DataSummary,
DataRDT: () => import('~/components/DataRDT'),
// MapSebaranCovid: () => import('~/components/MapSebaranCovid'),
// MapSebaranPolygon: () => import('~/components/MapSebaranPolygon'),
// MapFaskes: () => import('~/components/MapFaskes'),
// BarStat: () => import('~/components/BarStat'),
// BarStatDetail: () => import('~/components/BarStatDetail'),
BarStatArea: () => import('~/components/BarStatArea'),
BarStatJenisKelamin: () => import('~/components/BarStatJenisKelamin'),
BarStatUsia: () => import('~/components/BarStatUsia'),
BarStatHarianAkumulatif: () => import('~/components/BarStatHarianAkumulatif'),
BarStatTable: () => import('~/components/BarStatTable'),
MapV2SebaranCluster: () => import('~/components/MapV2SebaranCluster'),
MapV2SebaranPolygon: () => import('~/components/MapV2SebaranPolygon'),
MapV2SebaranFaskes: () => import('~/components/MapV2SebaranFaskes'),
MapV2SebaranTimeslider: () => import('~/components/MapV2SebaranTimeslider')
},
data () {
return {
stat: {
isActivePolygon: true,
isActiveCluster: false,
isActiveFaskes: false,
isActiveTimeslider: false
},
faFirstAid,
faBug,
faMap,
faCalendarMinus,
jsonDataRekapitulasiJabarProv: {},
jsonDataRekapitulasiJabarKab: [],
jsonDataRekapitulasiJabarHarianProv: [],
jsonDataRekapitulasiJabarHarianKab: [],
jsonDataRekapitulasiJabarKumulatifProv: [],
jsonDataRekapitulasiJabarKumulatifKab: [],
jsonDataNasionalHarianKumulatif: [],
jsonDataSebaranJabar: [],
jsonDataSebaranJawaBarat: [],
jsonDataSebaranJabarFaskes: []
}
},
computed: {
...mapState({
cases: state => state.statistics.cases
}),
lastUpdatedAt () {
if (!this.cases) {
return ''
}
return this.formatDateTimeShort(this.cases.updated_at)
}
},
created () {
this.fetchDataNasionalHarian()
this.fetchDataRekapitulasiJabarProv()
this.fetchDataRekapitulasiJabarHarianProv()
this.fetchDataRekapitulasiJabarKumulatifProv()
this.fetchDataRekapitulasiJabarKab()
this.fetchDataRekapitulasiJabarHarianKab()
this.fetchDataRekapitulasiJabarKumulatifKab()
this.fetchDataSebaranJabar()
this.fetchDataSebaranJabarFaskes()
},
mounted () {
this.$store.dispatch('statistics/getCases')
this.$nextTick(() => {
if (process.browser) {
analytics.logEvent('dashboard_view')
}
})
},
methods: {
formatDateTimeShort,
enablePolygon () {
this.stat.isActivePolygon = true
this.stat.isActiveCluster = false
this.stat.isActiveFaskes = false
this.stat.isActiveTimeslider = false
},
enableCluster () {
this.stat.isActivePolygon = false
this.stat.isActiveCluster = true
this.stat.isActiveFaskes = false
this.stat.isActiveTimeslider = false
},
enableFaskes () {
this.stat.isActivePolygon = false
this.stat.isActiveCluster = false
this.stat.isActiveFaskes = true
this.stat.isActiveTimeslider = false
},
enableTimeslider () {
this.stat.isActivePolygon = false
this.stat.isActiveCluster = false
this.stat.isActiveFaskes = false
this.stat.isActiveTimeslider = true
},
fetchDataRekapitulasiJabarProv () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar?level=prov')
.then(function (response) {
self.jsonDataRekapitulasiJabarProv = response.data.data.content
self.jsonDataRekapitulasiJabarProv.positif_per_gender.laki_laki = self.jsonDataRekapitulasiJabarProv.positif_per_gender['laki-laki']
try {
if (typeof self.jsonDataRekapitulasiJabarProv.sembuh_per_gender['laki-laki'] !== 'undefined') {
self.jsonDataRekapitulasiJabarProv.sembuh_per_gender.laki_laki = self.jsonDataRekapitulasiJabarProv.sembuh_per_gender['laki-laki']
}
} catch (error) {
Object.assign(self.jsonDataRekapitulasiJabarProv, { sembuh_per_gender: { laki_laki: 0, perempuan: 0 } })
Object.assign(self.jsonDataRekapitulasiJabarProv, {
sembuh_per_usia: {
bawah_5: 0, '6_19': 0, '20_29': 0, '30_39': 0, '40_49': 0, '50_59': 0, '60_69': 0, '70_79': 0, atas_80: 0
}
})
}
try {
if (typeof self.jsonDataRekapitulasiJabarProv.meninggal_per_gender['laki-laki'] !== 'undefined') {
self.jsonDataRekapitulasiJabarProv.meninggal_per_gender.laki_laki = self.jsonDataRekapitulasiJabarProv.meninggal_per_gender['laki-laki']
}
} catch (error) {
Object.assign(self.jsonDataRekapitulasiJabarProv, { meninggal_per_gender: { laki_laki: 0, perempuan: 0 } })
Object.assign(self.jsonDataRekapitulasiJabarProv, {
meninggal_per_usia: {
bawah_5: 0, '6_19': 0, '20_29': 0, '30_39': 0, '40_49': 0, '50_59': 0, '60_69': 0, '70_79': 0, atas_80: 0
}
})
}
})
.catch(function (error) {
console.log(error)
})
},
fetchDataRekapitulasiJabarKab () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar?level=kab')
.then(function (response) {
self.jsonDataRekapitulasiJabarKab = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataRekapitulasiJabarHarianProv () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar/harian?level=prov')
.then(function (response) {
self.jsonDataRekapitulasiJabarHarianProv = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataRekapitulasiJabarHarianKab () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar/harian?level=kab')
.then(function (response) {
self.jsonDataRekapitulasiJabarHarianKab = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataRekapitulasiJabarKumulatifProv () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar/kumulatif?level=prov')
.then(function (response) {
self.jsonDataRekapitulasiJabarKumulatifProv = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataRekapitulasiJabarKumulatifKab () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/rekapitulasi/jabar/kumulatif?level=kab')
.then(function (response) {
self.jsonDataRekapitulasiJabarKumulatifKab = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataNasionalHarian () {
const self = this
axios
.get('https://indonesia-covid-19.mathdro.id/api/harian')
.then(function (response) {
self.jsonDataNasionalHarianKumulatif = response.data.data
})
.catch(function (error) {
console.log(error)
})
},
fetchDataSebaranJabar () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/sebaran/jabar')
.then(function (response) {
self.jsonDataSebaranJabar = response.data.data.content
self.jsonDataSebaranJawaBarat = response.data.data.content
})
.catch(function (error) {
console.log(error)
})
},
fetchDataSebaranJabarFaskes () {
const self = this
axios
.get('https://covid19-public.digitalservice.id/api/v1/sebaran/jabar/faskes')
.then(function (response) {
self.jsonDataSebaranJabarFaskes = response.data.data
})
.catch(function (error) {
console.log(error)
})
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
display: grid;
grid-template-columns: 1fr;
column-gap: 1rem;
row-gap: 1rem;
@screen md {
grid-template-columns: 2fr 4fr;
}
}
.button-selector {
@apply px-6 py-2 rounded-md border border-solid border-brand-green
text-brand-green bg-white;
&[active] {
@apply text-white bg-brand-green;
}
}
</style>
<style>
@import "leaflet-geosearch/assets/css/leaflet.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
.btn {
border-radius: 0.25rem;
}
.container-map {
width:100%;
height:100%;
position: relative;
}
.filter-layer {
position: absolute;
top: 0px;
right: 10px;
padding-right: 1em;
padding-top: 1em;
}
.filter-layer .btn {
font-size: 0.8em;
padding: 2px 6px;
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.filter-data {
background: #fff;
margin-top: 0.5em;
padding: 0.6em;
border-radius: 0.6em;
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.filter-layer li {
list-style: none;
opacity: 0.4;
padding-bottom: 0.2em;
}
.filter-layer li:hover {
cursor: pointer;
}
.filter-active {
opacity: 1 !important;
}
.filter-data {
background: #fff;
color: black;
margin-top: 0.5em;
padding: 0.6em;
border-radius: 0.6em;
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.legend-color {
width: 1em;
height: 1em;
float: left;
border-radius: 10px;
margin-top: 4px;
}
.cluster {
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
font-family: monospace;
height: 10px;
width: 10px;
}
.cluster-odp-proses {
/* box-shadow: 0 0 5px 0 rgb(45, 156, 219, 0.9); */
border: 2px solid rgb(45, 156, 219, 0.9);
background: rgb(45, 156, 219, 0.9);
}
.cluster-odp-selesai {
/* box-shadow: 0 0 5px 0 rgb(45, 156, 219, 0.9); */
border: 2px solid rgb(45, 156, 219, 0.9);
background: rgba(196, 195, 195, 0.9);
}
.cluster-odp-meninggal {
/* box-shadow: 0 0 5px 0 rgb(45, 156, 219, 0.9); */
border: 2px solid rgb(45, 156, 219, 0.9);
background: rgb(165,18,18, 0.9);
}
.cluster-pdp-proses {
/* box-shadow: 0 0 5px 0 rgb(242, 201, 76, 0.9); */
border: 2px solid rgb(242, 201, 76, 0.9);
background: rgb(242, 201, 76, 0.9);
}
.cluster-pdp-selesai {
/* box-shadow: 0 0 5px 0 rgb(242, 201, 76, 0.9); */
border: 2px solid rgb(242, 201, 76, 0.9);
background: rgba(196, 195, 195, 0.9);
}
.cluster-pdp-meninggal {
/* box-shadow: 0 0 5px 0 rgb(242, 201, 76, 0.9); */
border: 2px solid rgb(242, 201, 76, 0.9);
background: rgb(165,18,18, 0.9);
}
.cluster-positif-proses {
/* box-shadow: 0 0 5px 0 rgb(235, 87, 87, 0.9); */
border: 2px solid rgb(235, 87, 87, 0.9);
background: rgb(235, 87, 87, 0.9);
}
.cluster-positif-sembuh {
/* box-shadow: 0 0 5px 0 rgb(235, 87, 87, 0.9); */
border: 2px solid rgb(235, 87, 87, 0.9);
background: rgb(39, 174, 96, 0.9);
}
.cluster-positif-meninggal {
/* box-shadow: 0 0 5px 0 rgb(235, 87, 87, 0.9); */
border: 2px solid rgb(235, 87, 87, 0.9);
background: rgb(165,18,18, 0.9);
}
.digits-0 {
height: 17px;
width: 17px;
margin-top: -14px;
margin-left: -14px;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 35px;
margin-top: -17px;
margin-left: -17px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 47px;
line-height: 47px;
/* border-width: 3px; */
margin-top: -24px;
margin-left: -24px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 57px;
/* border-width: 4px; */
margin-top: -29px;
margin-left: -29px;
}
.legend-data {
background: rgb(255,255,2555);
margin-top: 0.5em;
padding: 0.6em;
/* border-radius: 0.6em; */
/* box-shadow: 0 1px 5px rgba(0,0,0,0.65); */
line-height: 18px;
color: #252525;
}
.legend-data ul {
list-style: none;
margin-bottom: 0px;
}
.legend-data li {
padding: 3px;
}
.legend-data i {
width: 13px;
height: 13px;
float: left;
margin-right: 8px;
border: white 1px solid;
}
.leaflet-div-icon {
border: none!important;
border-radius: 20px;
}
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
border-radius: 1em;
}
.text-disclaimer {
top:15%;
width: 100%;
position: absolute;
text-align: center;
color: #fff;
}
.leaflet-top .leaflet-control-geosearch.bar,
.leaflet-bottom .leaflet-control-geosearch.bar {
display: none;
}
.leaflet-control-geosearch.bar {
position: relative;
display: block;
height: auto;
width: 400px;
margin: 10px auto 0;
cursor: auto;
z-index: 1000;
}
.leaflet-control-geosearch.bar form {
position: relative;
top: 0;
left: 0;
display: block;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.leaflet-control-geosearch.bar form input {
min-width: 100%;
width: 100%;
}
.leaflet-control-geosearch.bar .results.active:after {
opacity: .2;
}
.leaflet-right .leaflet-control-geosearch form {
right: 28px;
left: initial;
border-radius: 4px 0 0 4px;
border-left: inherit;
border-right: none;
}
.leaflet-control-geosearch a.reset {
color: black;
position: absolute;
line-height: 30px;
padding: 0 8px;
right: 0;
top: 0;
cursor: pointer;
border: none;
}
.leaflet-control-geosearch a.reset:hover {
background: #f5f5f5;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment