<template>
  <JSCharting v-if="data" :options="chartOptions"></JSCharting>
</template>

<script setup>
import { computed, inject } from 'vue'
import { colors, col } from './util.js'

const parameters = inject('parameters')
const data = inject('data')

const chartOptions = computed(() => {
  if (!data.value) return

  return {
    type: 'calendar solid',
    palette: { colors },
    data: data.value.rows
      .filter(r => {
        return col(data, r, 'report_date') >= parameters.start && col(data, r, 'report_date') <= parameters.end
      })
      .map(r => ([
        `${col(data, r, 'report_date')} 12:00:00`,
        col(data, r, parameters.column)
      ]))
  }
})
</script>
