/*<![CDATA[*/
const renderChart = ({ canvasId, type, data, labels, colours }) => {
    const ctx = document.getElementById(canvasId);
    if (!ctx) return;

    new Chart(ctx, {
        type,
        data: {
            labels,
            datasets: [{
                data,
                backgroundColor: colours,
                borderWidth: 1
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
};

renderChart({
    canvasId: 'incomeDoughnut',
    type: /*[[${incomeChartType}]]*/ 'doughnut',
    data: /*[[${incomeDoughnutdata}]]*/[],
    labels: /*[[${incomeDoughnutLabels}]]*/[],
    colours: /*[[${incomeDoughnutColours}]]*/[]
});

renderChart({
    canvasId: 'expenditureDoughnut',
    type: /*[[${expenseChartType}]]*/ 'doughnut',
    data: /*[[${expenseDoughnutdata}]]*/[],
    labels: /*[[${expenseDoughnutLabels}]]*/[],
    colours: /*[[${expenseDoughnutColours}]]*/[]
});

new Chart(document.getElementById('categoryBarChart'), {
    type: 'line',
    data: {
        labels: /*[[${labels}]]*/[],
        datasets: [
            {
                label: 'Money In',
                data: /*[[${moneyIn}]]*/[],
                borderColor: '#2E7D32',
                backgroundColor: 'rgba(46,125,50,0.15)',
                borderWidth: 2,
                fill: true,
                pointRadius: 4,
                tension: 0.3
            },
            {
                label: 'Money Out',
                data: /*[[${moneyOut}]]*/[],
                borderColor: '#C62828',
                backgroundColor: 'rgba(198,40,40,0.15)',
                borderWidth: 2,
                fill: true,
                pointRadius: 4,
                tension: 0.3
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: v => `$${v.toLocaleString()}`
                }
            }
        }
    }
});
/*]]>*/
