75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
|
<Card>
|
|
<h2 class="mb-6 text-xl text-violet-900 flex justify-between items-center">
|
|
Daily Hospitalizations per 10,000 Residents
|
|
|
|
<select v-model="chart" class="text-base m-0" v-if="parameters.county !== '-- Unknown --'">
|
|
<option value="calendar">Calendar</option>
|
|
<option value="line">Line Chart</option>
|
|
</select>
|
|
</h2>
|
|
|
|
<template v-if="parameters.county !== '-- Unknown --'">
|
|
<JSCharting v-if="chart === 'calendar'" :options="calendarOptions"></JSCharting>
|
|
<JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
|
|
</template>
|
|
<template v-else>
|
|
<div class="w-full h-full flex items-center justify-center text-2xl text-violet-700 font-bold">No Data</div>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { col, colors } from '@/components/charts/util'
|
|
import store from '@/components/charts/overall/hospitalizations/store.js'
|
|
|
|
const chart = ref('calendar')
|
|
|
|
const column = 'hospitalizations_last_14_days_per_capita'
|
|
const parameters = store.parameters
|
|
const data = store.data
|
|
|
|
const rows = computed(() => {
|
|
if (!data.value || !parameters.value) return []
|
|
return data.value.rows
|
|
.filter(r => {
|
|
return col(data, r, 'report_date') >= parameters.value.start && col(data, r, 'report_date') <= parameters.value.end
|
|
})
|
|
})
|
|
|
|
const calendarOptions = computed(() => {
|
|
return {
|
|
type: 'calendar month solid',
|
|
palette: { colors },
|
|
calendar_initial: parameters.value ? parameters.value.end : null,
|
|
data: rows.value.map(r => ([
|
|
`${col(data, r, 'report_date')} 23:59:59`,
|
|
Math.round(col(data, r, column) * 10000)
|
|
]))
|
|
}
|
|
})
|
|
|
|
const areaOptions = computed(() => {
|
|
return {
|
|
type: 'lineSpline',
|
|
legend_visible: false,
|
|
xAxis: { crosshair_enabled: true, scale_type: 'time' },
|
|
palette: { colors },
|
|
defaultSeries: {
|
|
shape_opacity: 0.55,
|
|
color: colors[Math.round(colors.length / 2)],
|
|
defaultPoint_marker_visible: false
|
|
},
|
|
series: [
|
|
{
|
|
points: rows.value.map(r => ([
|
|
`${col(data, r, 'report_date')} 23:59:59`,
|
|
Math.round(col(data, r, column) * 10000)
|
|
]))
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|