<script setup lang="ts">
import { Pie } from 'vue-chartjs'
import { 
  Chart as ChartJS, 
  Title, 
  Tooltip, 
  Legend, 
  ArcElement,
  CategoryScale
} from 'chart.js'
import { computed } from 'vue';

ChartJS.register(
  Title, 
  Tooltip, 
  Legend, 
  ArcElement,
  CategoryScale
)

const props = defineProps<{
  chartData: {
    labels: string[],
    datasets: Array<{
      data: number[],
      backgroundColor?: string[],
      borderColor?: string[],
      hoverOffset?: number,
      borderWidth?: number
    }>
  },
  chartOptions?: any
}>()

const defaultOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        boxWidth: 10
      }
    }
  },
}

const options = computed(() => {
  return {
    ...defaultOptions,
    ...props.chartOptions
  }
})
</script>

<template>
  <div class="pie-chart">
    <Pie 
      :data="chartData"
      :options="options"
    />
  </div>
</template>

<style scoped>
.pie-chart {
  min-height: 300px;
  position: relative;
}
</style>
