132 lines
		
	
	
		
			4.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			132 lines
		
	
	
		
			4.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
document.addEventListener("DOMContentLoaded", () => {
 | 
						|
    fetch("/admin/data")
 | 
						|
        .then((resp) => resp.json())
 | 
						|
        .then((data) => {
 | 
						|
            document.querySelector("#backlog").textContent = data.backlog;
 | 
						|
            document.querySelector("#reminders").textContent = data.count.reminders;
 | 
						|
            document.querySelector("#intervals").textContent = data.count.intervals;
 | 
						|
 | 
						|
            let historySent = data.historyLong.sent.reduce(
 | 
						|
                (iv, frame) => iv + frame.count,
 | 
						|
                0
 | 
						|
            );
 | 
						|
            let historyFailed = data.historyLong.failed.reduce(
 | 
						|
                (iv, frame) => iv + frame.count,
 | 
						|
                0
 | 
						|
            );
 | 
						|
            let rate = historyFailed / (historySent + historyFailed);
 | 
						|
            let formatted = Math.round(rate * 10000) / 100;
 | 
						|
 | 
						|
            document.querySelector("#historySent").textContent = historySent;
 | 
						|
            document.querySelector("#historyFailed").textContent = historyFailed;
 | 
						|
            document.querySelector("#failRate").textContent = `${formatted}%`;
 | 
						|
 | 
						|
            new Chart(document.getElementById("schedule"), {
 | 
						|
                type: "bar",
 | 
						|
                data: {
 | 
						|
                    labels: [
 | 
						|
                        ...data.scheduleShort.once,
 | 
						|
                        ...data.scheduleShort.interval,
 | 
						|
                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
 | 
						|
                    datasets: [
 | 
						|
                        {
 | 
						|
                            label: "Reminders",
 | 
						|
                            data: data.scheduleShort.once.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                        {
 | 
						|
                            label: "Intervals",
 | 
						|
                            data: data.scheduleShort.interval.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                    ],
 | 
						|
                },
 | 
						|
                options: {
 | 
						|
                    responsive: true,
 | 
						|
                    maintainAspectRatio: false,
 | 
						|
                    scales: {
 | 
						|
                        x: {
 | 
						|
                            stacked: true,
 | 
						|
                            type: "time",
 | 
						|
                            time: {
 | 
						|
                                unit: "minute",
 | 
						|
                            },
 | 
						|
                        },
 | 
						|
                        y: {
 | 
						|
                            stacked: true,
 | 
						|
                        },
 | 
						|
                    },
 | 
						|
                },
 | 
						|
            });
 | 
						|
 | 
						|
            new Chart(document.getElementById("scheduleLong"), {
 | 
						|
                type: "bar",
 | 
						|
                data: {
 | 
						|
                    labels: [
 | 
						|
                        ...data.scheduleLong.once,
 | 
						|
                        ...data.scheduleLong.interval,
 | 
						|
                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
 | 
						|
                    datasets: [
 | 
						|
                        {
 | 
						|
                            label: "Reminders",
 | 
						|
                            data: data.scheduleLong.once.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                        {
 | 
						|
                            label: "Intervals",
 | 
						|
                            data: data.scheduleLong.interval.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                    ],
 | 
						|
                },
 | 
						|
                options: {
 | 
						|
                    responsive: true,
 | 
						|
                    maintainAspectRatio: false,
 | 
						|
                    scales: {
 | 
						|
                        x: {
 | 
						|
                            stacked: true,
 | 
						|
                            type: "time",
 | 
						|
                            time: {
 | 
						|
                                unit: "day",
 | 
						|
                            },
 | 
						|
                        },
 | 
						|
                        y: {
 | 
						|
                            stacked: true,
 | 
						|
                        },
 | 
						|
                    },
 | 
						|
                },
 | 
						|
            });
 | 
						|
 | 
						|
            new Chart(document.getElementById("historyLong"), {
 | 
						|
                type: "bar",
 | 
						|
                data: {
 | 
						|
                    labels: [...data.historyLong.sent, ...data.historyLong.failed].map(
 | 
						|
                        (row) => luxon.DateTime.fromISO(row.time_key)
 | 
						|
                    ),
 | 
						|
                    datasets: [
 | 
						|
                        {
 | 
						|
                            label: "Success",
 | 
						|
                            data: data.historyLong.sent.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                        {
 | 
						|
                            label: "Fail",
 | 
						|
                            data: data.historyLong.failed.map((row) => row.count),
 | 
						|
                        },
 | 
						|
                    ],
 | 
						|
                },
 | 
						|
                options: {
 | 
						|
                    responsive: true,
 | 
						|
                    maintainAspectRatio: false,
 | 
						|
                    scales: {
 | 
						|
                        x: {
 | 
						|
                            stacked: true,
 | 
						|
                            type: "time",
 | 
						|
                            time: {
 | 
						|
                                unit: "day",
 | 
						|
                            },
 | 
						|
                        },
 | 
						|
                        y: {
 | 
						|
                            stacked: true,
 | 
						|
                        },
 | 
						|
                    },
 | 
						|
                },
 | 
						|
            });
 | 
						|
        });
 | 
						|
});
 |