
<script>
import { defineComponent } from 'vue';
import { Doughnut } from 'vue3-chart-v2';
export default defineComponent({
    extends: Doughnut,
    props: {
        pieData: Object,
        update: Number
    },
    name: 'MyAppVuePieChart',

    data() {
        return {
            chartData: {
                labels: ['ເງິນສົດ', 'ເງິນໃນບັນຊີ', 'ຍອດເງິນທັງໝົດ'],
                datasets: [
                {
                    data: [ this.pieData.monney, this.pieData.account, this.pieData.all],
                    backgroundColor: ['rgba(39, 97, 245, 0.8)', 'rgba(255, 23, 23, 0.8)', 'rgba(255, 166, 23, 0.8)'],
                    offset: 5,
                    weight: 8,
                    borderWidth: 4,
                    borderRadius: 5
                }
                ]
                },
                options: {
                    elements: {
                    arc: {
                        spacing: 15
                        }
                },
                cutoutPercentage: 70,
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                position: 'right',
                },
                tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                //console.log(data.labels[tooltipItem.index]);
                               // console.log(data.datasets[0].data[tooltipItem.index]);
                            return data.labels[tooltipItem.index]+ ': ' + (
                                Number(data.datasets[0].data[tooltipItem.index])
                                .toFixed(0)
                                .replace(/./g, function (c, i, a) {
                                    return i > 0 && c !== "," && (a.length - i) % 3 === 0
                                    ? "," + c
                                    : c;
                                }) + " ກີບ"
                            );
                            },
                        },
                 
                        mode: "index",
                        intersect: false,
                        },
                }
        };
    },

    mounted() {
        //this.renderPieChart();
       this.renderChart(this.chartData, this.options);
    },

    methods: {
        // renderPieChart() {
        // this.renderChart(this.chartData, this.options);
        // }
    },
    watch:{
        update: {
      handler: function () {
        this._chart.destroy();
       // this.renderChart(this.chartData, this.chartOptions)
        this.renderChart(this.chartData, this.options);
      }
    }
    },
     created(){
        //renderPieChart()
    }

});
</script>

<style lang="scss" scoped></style>
