notifications-admin/app/assets/javascripts/dataVisualization.js

(function (window) {

    // Dummy data (replace with API data)
    const data = {
        messageStats: {
            totalMessages: 1000,
            delivered: 520,
            pending: 280,
            failed: 100
        },
        dailyUsage: {
            dailyUsage: 20,
            dailyUsageLimit: 100
        },
        yearlyUsage: {
            yearlyUsage: 2000,
            yearlyUsageLimit: 250000
        }
    };

     // Update total messages progress bar percentages
    const messageStats = data.messageStats;

    const messageBars = ["delivered", "pending", "failed"];
        for (const bar of messageBars) {
        const percentage = messageStats[bar] / messageStats.totalMessages * 100;
        const elementId = `${bar}-bar`;
        const element = document.getElementById(elementId);
        element.style.width = `${parseFloat(percentage)}%`;
    }

    // Update total messages progress bar percentages
    const dailyUsage = data.dailyUsage;
    // const dailyUsageLimit = dailyUsage.dailyUsageLimit;
    const yearlyUsage = data.yearlyUsage;
    // const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;

    function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
        // Ensure element exists
        if (!elementId || !document.getElementById(elementId)) {
            console.error(`Element with ID "${elementId}" not found`);
            return;
        }

        // Calculate percentage
        const percentage = dailyUsage / dailyUsageLimit * 100;

        // Update bar width
        const element = document.getElementById(elementId);
        element.style.width = `${parseFloat(percentage)}%`;
    }

    // Update usage bars
    // updateUsageBar("dailyUsage-bar", dailyUsage.dailyUsage, dailyUsageLimit);
    // updateUsageBar("dailyUsageRemaining-bar", dailyUsageLimit - dailyUsage.dailyUsage, dailyUsageLimit);
    // updateUsageBar("yearlyUsage-bar", yearlyUsage.yearlyUsage, yearlyUsageLimit);
    // updateUsageBar("yearlyUsageRemaining-bar", yearlyUsageLimit - yearlyUsage.yearlyUsage, yearlyUsageLimit);

    // Update total messages legend values
    document.getElementById("total-value").innerText = `Total: ${messageStats.totalMessages} messages`;
    document.getElementById("delivered-value").innerText = `Delivered: ${messageStats.delivered}`;
    document.getElementById("pending-value").innerText = `Pending: ${messageStats.pending}`;
    document.getElementById("failed-value").innerText = `Failed: ${messageStats.failed}`;

    // Update usage legend values
    // document.getElementById("daily-usage-value").innerText = `Daily usage: ${dailyUsage.dailyUsage}`;
    // document.getElementById("daily-remaining-value").innerText = `Remaining messages: ${dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage}`;
    // document.getElementById("yearly-usage-value").innerText = `Yearly usage: ${yearlyUsage.yearlyUsage}`;
    // document.getElementById("yearly-remaining-value").innerText = `Remaining messages: ${yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage}`;

})(window);