103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
<template>
|
|
<StatCard class="flex flex-col justify-around">
|
|
<template v-slot:heading>Confirmed Hospitalizations {{last_report_date ? humanDate(last_report_date) : ''}}</template>
|
|
<template v-slot:value v-if="chips.today_hospitalizations != null">
|
|
{{chips.today_hospitalizations.toLocaleString()}}
|
|
</template>
|
|
<template v-slot:meta v-if="chips.today_hospitalization_change != null">
|
|
<span v-if="chips.today_hospitalization_change > 0">Up </span>
|
|
<span v-if="chips.today_hospitalization_change < 0">Down </span>
|
|
<span :class="{'font-semibold': true, 'text-red-600': chips.today_hospitalization_change > 0, 'text-green-600': chips.today_hospitalization_change < 0}">
|
|
{{Math.abs(chips.today_hospitalization_change).toLocaleString()}} ({{chips.today_hospitalization_change_percent}}%)
|
|
</span> compared to previous day
|
|
</template>
|
|
</StatCard>
|
|
|
|
<StatCard class="flex flex-col justify-around">
|
|
<template v-slot:heading>Hospitalizations per 10,000 Residents Last Two Weeks</template>
|
|
<template v-slot:value v-if="chips.last_14_days_hospitalizations_per_capita != null">
|
|
<span v-if="chips.population">~{{chips.last_14_days_hospitalizations_per_capita.toLocaleString()}}</span>
|
|
<span v-else>No Data</span>
|
|
</template>
|
|
<template v-slot:meta v-if="chips.population">
|
|
<span class="text-indigo-500 font-semibold">{{chips.last_14_days_hospitalizations.toLocaleString()}}</span> out of <span class="text-indigo-500 font-semibold">{{chips.population.toLocaleString()}}</span> residents
|
|
</template>
|
|
</StatCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, computed } from 'vue'
|
|
import { col, humanDate } from '@/components/charts/util'
|
|
import store from '@/components/charts/overall/hospitalizations/store.js'
|
|
|
|
const data = store.data
|
|
|
|
const last_report_date = computed(() => {
|
|
if (!data.value) return null
|
|
return col(data, data.value.rows.at(-1), 'report_date')
|
|
})
|
|
|
|
const chips = reactive({
|
|
population: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const r = data.value.rows.at(-1)
|
|
return col(data, r, 'population')
|
|
}),
|
|
|
|
today_hospitalizations: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const r = data.value.rows.at(-1)
|
|
return col(data, r, 'hospitalizations')
|
|
}),
|
|
|
|
today_hospitalization_change: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const today = col(data, data.value.rows.at(-1), 'hospitalizations')
|
|
const yesterday = col(data, data.value.rows.at(-2), 'hospitalizations')
|
|
return today - yesterday
|
|
}),
|
|
|
|
today_hospitalization_change_percent: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const today = col(data, data.value.rows.at(-1), 'hospitalizations')
|
|
const yesterday = col(data, data.value.rows.at(-2), 'hospitalizations')
|
|
const change = today - yesterday
|
|
|
|
const percent = change > 0
|
|
? ((change / yesterday) * 100)
|
|
: ((change / today) * 100)
|
|
|
|
if (Math.abs(percent) === Infinity) return 100
|
|
if (isNaN(percent)) return 0
|
|
|
|
return Math.abs(percent.toFixed(1))
|
|
}),
|
|
|
|
last_14_days_hospitalizations: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const r = data.value.rows.at(-1)
|
|
return col(data, r, 'hospitalizations_last_14_days')
|
|
}),
|
|
|
|
last_14_days_hospitalizations_per_capita: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const r = data.value.rows.at(-1)
|
|
return parseFloat((col(data, r, 'hospitalizations_last_14_days_per_capita') * 10000).toFixed(1))
|
|
}),
|
|
|
|
total_hospitalizations_per_capita: computed(() => {
|
|
if (!data.value) return null
|
|
|
|
const r = data.value.rows.at(-1)
|
|
return parseFloat((col(data, r, 'total_hospitalizations_per_capita') * 10000).toFixed(1))
|
|
})
|
|
})
|
|
|
|
</script>
|