public with sharing class lwcLifetimeSpendingController {


@AuraEnabled (cacheable=true)
public static List<AggregateResult> getAccountLifetimeSpending(){
    return [SELECT SUM(Service_Amount__c) Service, SUM(Subscription_Booking__c) Subscription SUM(Renewal_Amount_Xactly__c) Renewal  FROM Opportunity WHERE AccountId = '0018000001G9dZUAAZ' and isClosed=true and isWon=true];
}

@wire(getAccountLifetimeSpending) lifetimeAggregateResult({error,data}) {
    if (data) {
        this.lifetimeAggResult = data;
        console.log('this.lifetimeAggResult: ' + this.lifetimeAggResult[0].Service);
        this.serviceAmount = this.lifetimeAggResult[0].Service;
        this.subcriptionAmount = this.lifetimeAggResult[0].Subscription;
        this.error = undefined;
    } else if (error) {
        this.lifetimeAggResult = undefined;
        this.error = error;
        console.log('Error: ' + this.error);
    }
}
chart;
chartjsInitialized = false;

config = {
    //type: 'doughnut',
    type: 'bar',
    data: {
        datasets: [
            {
                data: [
                    this.serviceAmount,
                    this.subcriptionAmount
                ],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)'
                ],
                label: 'Dataset 1'
            }
        ],
        labels: ['Service', 'Subscription', 'Private Training', 'Public Training', 'Renewal']
    },
    options: {
        responsive: true,
        legend: {
            position: 'right'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

renderedCallback() {
    if (this.chartjsInitialized) {
        return;
    }
    this.chartjsInitialized = true;

    loadScript(this, chartjs)
        .then(() => {
            const ctx = this.template
                .querySelector('canvas.donut')
                .getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
        })
        .catch(error => {
            this.error = error;
        });
}