49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<Card>
|
|
<h2 class="mb-6 text-xl text-indigo-900 flex justify-between items-center">
|
|
Total Deaths
|
|
</h2>
|
|
<JSCharting :options="areaOptions"></JSCharting>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { col, colors } from '@/components/charts/util'
|
|
import store from '@/components/charts/overall/deaths/store.js'
|
|
|
|
const column = 'total_deaths'
|
|
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 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`,
|
|
col(data, r, column)
|
|
]))
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|