import('bootstrap');
import $ from 'jquery';
import Chart from 'chart.js/auto';

$(function () {
    const unused_space: number = $('#unused_space').val() as number
    const used_space: number = $('#used_space').val() as number
    const used_space_formatted: number = $('#used_space_formatted').val() as number
    const unused_space_formatted: number = $('#unused_space_formatted').val() as number


    const used_space_other: number = $('#used_space_other').val() as number
    const used_space_storage: number = $('#used_space_storage').val() as number
    const used_space_storage_formatted: number = $('#used_space_storage_formatted').val() as number
    const used_space_other_formatted: number = $('#used_space_other_formatted').val() as number
    let pieChart: any;
    pieChart = document.getElementById('pie-chart');
    new Chart(pieChart,
        {
            type: 'pie',
            data: {
                labels: ["frei: " + unused_space_formatted, "System: " + used_space_other_formatted, "Storage: " + used_space_storage_formatted],
                datasets: [{
                    label: "Festplattennutzung",
                    backgroundColor: ["#fcfcfd", "#003f6a", "#3f81b6"],
                    data: [
                        unused_space, used_space_other, used_space_storage,
                    ]
                }]
            },
        })

    let pieChartStorage: any;
    pieChartStorage = document.getElementById('pie-chart-storage');
    new Chart(pieChartStorage,
        {
            type: 'pie',
            data: {
                labels: ["System: " + used_space_other_formatted, "Storage: " + used_space_storage_formatted],
                datasets: [{
                    label: "Verhältnis System / Storage",
                    backgroundColor: ["#003f6a", "#3f81b6"],
                    data: [
                        used_space_other, used_space_storage,
                    ]
                }]
            },
        })
})