
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import Highcharts from 'highcharts';

const props = defineProps({
  chartData: {
    type: Array
  },
  id: {
    type: Number
  }
})

const options = {
  accessibility: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom'
  },
  tooltip: {
    valueSuffix: '%'
  },
  plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: false
			},
			showInLegend: true,
      point: {
				events: {
					mouseOver: function(e) {  
						chart.value.setTitle({
							text: e.target.name
						});
					}
				}
			},
		}
	},
  title: {
      floating:true,
      y: 150,
      text: '',
      style: {
        fontSize: 40
      }
    },
  series: [
    {
      type: 'pie',
      name: '',
      innerSize: '65%',
      label: {
        enabled: false
      },
      data:[]
    },
  ],
  colors: ["#0F80E7",'#61DCF3','#60E184','#7A4DDA','#F7E701','#34C8A4','#FFBB37','#E241EE','#FF9559','#FF8CE9',
    '#FF5BAA','#E75300','#B8ED75','#3AEBC0','#A1F8FF','#03FFD2','#A56FF8','#F0960E','#2CB2EC','#63B0FF'], 
  
}

const chart = ref(null)
function drawChart() {
    options.series[0].data = props.chartData.map(_ =>({
      name: _.name,
      y: _.value
    }))

    nextTick(() => {
       chart.value = Highcharts.chart(`pie${props.id}`,options);
    })
}

onMounted(() => {
drawChart()
}) 

</script>

<template>
	<div class="pie-chart" :id="`pie${id}`" style="height: 100%;width: 100%;"></div>
</template>

<style lang="scss" scoped>

</style>