69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<Card>
|
|
<h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
|
|
Daily Positive PCR Results
|
|
|
|
<select v-model="chart" class="text-base m-0">
|
|
<option value="calendar">Calendar</option>
|
|
<option value="line">Line Chart</option>
|
|
</select>
|
|
</h2>
|
|
<JSCharting v-if="chart === 'calendar'" :options="calendarOptions"></JSCharting>
|
|
<JSCharting v-if="chart === 'line'" :options="areaOptions"></JSCharting>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { col, colors } from '@/components/charts/util'
|
|
import cache from '@/data/cache.js'
|
|
|
|
const chart = ref('calendar')
|
|
|
|
const column = 'pcr_positive'
|
|
const parameters = cache.parameters
|
|
const data = cache.data
|
|
|
|
const rows = computed(() => {
|
|
if (!data.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.end,
|
|
data: rows.value.map(r => ([
|
|
`${col(data, r, 'report_date')} 12:00:00`,
|
|
col(data, r, column)
|
|
]))
|
|
}
|
|
})
|
|
|
|
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')} 12:00:00`,
|
|
col(data, r, column)
|
|
]))
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|