<template>
    <lightning-card title='My Completed Tasks'>
      <template if:true={resultItems}>
       <template for:each={resultItems} for:item="item">

        <div>
          label : - {item.label}  count:- {item.count}
          <canvas class="donut" lwc:dom="manual"></canvas>
       </div>
       </template>
    </template>
       
      template if:false={resultItems}>
        <div class="slds-align_absolute-center slds-m-top_xx-large" style ="font-size: large;">No Data is available to show</div>
   </template>
     
    </lightning-card>
</template>

import { LightningElement, wire, track } from 'lwc';
//importing the Chart library from Static resources
import Chartjs from '@salesforce/resourceUrl/Chartjs';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
//importing the apex method.
import getAllTasksByType from '@salesforce/apex/TaskChartController.getAllTasksByType';
export default class DonutChart extends LightningElement {
    //isData = false;
    resultItems;
    @wire(getAllTasksByType) task({ error, data }) {
        if (data) {
            console.log('get value', data)
            this.resultItems = data;
           /* for (var key in data) {
                this.updateChart(data[key].count, data[key].label);
            }*/
            this.error = undefined;
        }
        else if (error) {
            console.log('get value', error);
            this.error = error;
            //this.task = undefined;
        }
    }
    chart;
    chartjsInitialized = false;
    config = {
        type: 'doughnut',
        data: {
            datasets: [
                {
                    data: [
                    ],
                    backgroundColor: [
                        'rgb(255,99,132)',
                        'rgb(255,159,64)',
                        'rgb(255,205,86)',
                        'rgb(75,192,192)',
                    ],
                    label: 'Dataset 1'
                }
            ],
            labels: []
        },
        options: {
            responsive: true,
            legend: {
                position: 'right'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;
        Promise.all([
            loadScript(this, Chartjs)
        ]).then(() => {
            const ctx = this.template.querySelector('canvas.donut')
                .getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
        })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading ChartJS',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
    updateChart(count, label) {
        //isData = true;
        this.chart.data.labels.push(label);
        this.chart.data.datasets.forEach((dataset) => {
            dataset.data.push(count);
        });
        this.chart.update();
    }
}