<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>
