<template>
	<div>
		<canvas :id="id" @click="test($event)"></canvas>
	</div>
</template>

<script>
import Chart from "chart.js/auto"

export const chartTypes = [
	"line",
	"bar",
	"doughnut",
	"bubble",
	"scatter"
	// 'radar',
	// 'polarArea'
]

export default {
	props: {
		id: {
			type: String,
			default: "my-chart",
			required: true
		},
		type: {
			type: String,
			default: "line",
			required: true,
			validator: function (value) {
				return chartTypes.indexOf(value) !== -1
			}
		},
		data: {
			type: Object,
			default: undefined,
			required: true
		},
		options: {
			type: Object,
			default: undefined
		}
	},
	data() {
		return {
			chart: undefined,
			chartData: {
				type: this.type,
				data: this.data,
				options: this.options
			}
		}
	},
	methods: {
		createChart() {
			this.chart?.destroy()
			this.chart = new Chart(document.getElementById(this.id), this.chartData)
		}
	},
	mounted() {
		this.createChart()
	},
	watch: {
		type: {
			handler(n, o) {
				this.chartData.type = n
				this.createChart()
			}
		},
		data: {
			handler(n, o) {
				this.chartData.data = n
				this.createChart()
			}
		},
		options: {
			handler(n, o) {
				this.chartData.options = n
				this.createChart()
			}
		}
	}
}
</script>