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