@model CostMakeUpForVehicle
@if (Model.CollisionRecordSum + Model.ServiceRecordSum + Model.GasRecordSum + Model.TaxRecordSum + Model.UpgradeRecordSum > 0)
{
    <canvas id="pie-chart"></canvas>
    <script>
        renderChart();
        function renderChart() {
            var useDarkMode = getGlobalConfig().useDarkMode;
            new Chart($("#pie-chart"), {
                type: 'pie',
                data: {
                    labels: ["Service Records", "Repairs", "Upgrades", "Tax", "Fuel"],
                    datasets: [
                        {
                            label: "Expenses by Type",
                            backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"],
                            data: [
                                globalParseFloat('@Model.ServiceRecordSum'),
                                globalParseFloat('@Model.CollisionRecordSum'),
                                globalParseFloat('@Model.UpgradeRecordSum'),
                                globalParseFloat('@Model.TaxRecordSum'),
                                globalParseFloat('@Model.GasRecordSum')
                                        ]
                        }
                    ]
                },
                options: {
                    plugins: {
                        legend: {
                            position: "bottom",
                            labels: {
                                color: useDarkMode ? "#fff" : "#000"
                            }
                        },
                        title: {
                            display: true,
                            text: "Expenses by Type",
                            color: useDarkMode ? "#fff" : "#000"
                        },
                    }
                }
            });
        }
    </script>
}
else
{
    <div class="text-center">
        <h4>No data found or all records have zero sums, insert records with non-zero sums to see visualizations here.</h4>
    </div>
}