Source: diagram.js

import Chart from 'chart.js/auto';

/**
 * Funktioner för diagram
 * @module diagram
 */

/**
 * Hämtar JSON från extern källa
 * @returns {Array} lista med utbildningar
 */
async function getData() {
    let response = await fetch("https://mallarmiun.github.io/Frontend-baserad-webbutveckling/Moment%205%20-%20Dynamiska%20webbplatser/statistik_sokande_ht25.json");
    let data = await response.json();
    return data;
}

/**
 * Returnerar 6 mest sökta kurser
 * @param {Array} allData
 * @returns {Array} lista med kurser
 */
function topCourses(allData) {
    return allData.filter(item => item.type === "Kurs").sort((a, b) => b.applicantsTotal - a.applicantsTotal).slice(0, 6);
}

/**
 * Returnerar 5 mest sökta program
 * @param {Array} allData
 * @returns {Array} lista med program
 */
function topPrograms(allData) {
    return allData.filter(item => item.type === "Program").sort((a, b) => b.applicantsTotal - a.applicantsTotal).slice(0, 5);
}


/**
 * Skapar stapeldiagram för kurser
 * @param {Array} courses
 */
function courseChart(courses) {

    let labels = courses.map(c => c.name);
    let values = courses.map(c => c.applicantsTotal);

    new Chart(document.getElementById("chart1"), {

        type: "bar",

        data: {
            labels: labels,
            datasets: [{
                label: "Antal sökande",
                data: values,
                backgroundColor: "rgba(10, 50, 138, 0.6)"
            }]
        }

    });
}

/**
 * Skapar cirkeldiagram för program
 * @param {Array} programs
 */
function programChart(programs) {

    let labels = programs.map(p => p.name);
    let values = programs.map(p => p.applicantsTotal);

    new Chart(document.getElementById("chart2"), {

        type: "pie",

        data: {
            labels: labels,
            datasets: [{
                data: values,
                backgroundColor: [
                    "#d13557",
                    "#2a79ad",
                    "#dab75f",
                    "#229134",
                    "#693fbe"
                ]
            }]
        }

    });
}


/**
 * Kör allt för att skapa diagrammen
 */
async function init() {

    let data = await getData();

    let courses = topCourses(data);
    let programs = topPrograms(data);

    courseChart(courses);
    programChart(programs);
}

init();