test changes

This commit is contained in:
zandercymatics 2025-02-10 09:16:42 -07:00
parent f154e9b870
commit d684fea8ed
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 56 additions and 30 deletions

View file

@ -59,6 +59,8 @@
/** An IIFE to initialize the analytics page
*/
(function () {
// Store chart instances globally within this IIFE
const chartInstances = new Map();
function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) {
var canvas = document.getElementById(canvasId);
if (!canvas) {
@ -80,17 +82,16 @@
borderWidth: 1,
data: listOne,
backgroundColor: [
pattern.draw('zigzag-vertical', '#1f77b4'),
pattern.draw("zigzag-vertical", "#1f77b4"),
]
},
{
label: labelTwo,
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
data: listTwo,
backgroundColor: [
pattern.draw('diagonal', '#1f77b4'),
pattern.draw("diagonal", "#1f77b4"),
]
},
],
@ -98,7 +99,6 @@
var options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
@ -115,11 +115,34 @@
},
};
new Chart(ctx, {
// Destroy existing chart instance if it exists
if (chartInstances.has(canvasId)) {
chartInstances.get(canvasId).destroy();
}
// Create and store new chart instance
const chart = new Chart(ctx, {
type: "bar",
data: data,
options: options,
});
chartInstances.set(canvasId, chart);
}
function handleResize() {
// Debounce the resize handler
if (handleResize.timeout) {
clearTimeout(handleResize.timeout);
}
handleResize.timeout = setTimeout(() => {
chartInstances.forEach((chart, canvasId) => {
if (chart && chart.canvas) {
chart.resize();
}
});
}, 100);
}
function initComparativeColumnCharts() {
@ -130,6 +153,8 @@
createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date");
createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date");
createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date");
//window.addEventListener("resize", handleResize);
});
};

View file

@ -930,11 +930,11 @@ ul.add-list-reset {
}
}
@media (min-width: 1024px) {
// Break at tablet view
@media (min-width: 768px) {
.analytics-dashboard-charts {
// Desktop layout - charts in top row, details in bottom row
display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"chart1 chart2"
@ -945,16 +945,17 @@ ul.add-list-reset {
"details5 details6";
.chart-1 { grid-area: chart1; }
.details-1 { grid-area: details1; }
.chart-2 { grid-area: chart2; }
.details-2 { grid-area: details2; }
.chart-3 { grid-area: chart3; }
.details-3 { grid-area: details3; }
.chart-4 { grid-area: chart4; }
.details-4 { grid-area: details4; }
.chart-5 { grid-area: chart5; }
.details-5 { grid-area: details5; }
.chart-6 { grid-area: chart6; }
.details-1 { grid-area: details1; }
.details-2 { grid-area: details2; }
.details-3 { grid-area: details3; }
.details-4 { grid-area: details4; }
.details-5 { grid-area: details5; }
.details-6 { grid-area: details6; }
}
}

View file

@ -140,10 +140,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-1">
<div class="margin-bottom-2 analytics-item details-1">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for managed domains</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for managed domains</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="managed_domains" %}
</div>
@ -163,10 +163,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-2">
<div class="margin-bottom-2 analytics-item details-2">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for unmanaged domains</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for unmanaged domains</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="unmanaged_domains" %}
</div>
@ -188,10 +188,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-3">
<div class="margin-bottom-2 analytics-item details-3">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for deleted domains</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for deleted domains</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="deleted_domains" %}
</div>
@ -211,10 +211,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-4">
<div class="margin-bottom-2 analytics-item details-4">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for ready domains</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for ready domains</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="ready_domains" %}
</div>
@ -236,10 +236,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-5">
<div class="margin-bottom-2 analytics-item details-5">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for submitted requests</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for submitted requests</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="submitted_requests" %}
</div>
@ -259,10 +259,10 @@
</canvas>
</div>
</div>
<div class="analytics-item details-6">
<div class="margin-bottom-2 analytics-item details-6">
<div class="grid-col">
<details class="margin-top-1 dja-detail-table" aria-role="button" closed>
<summary class="padding-1 padding-left-0 dja-details-summary">Details for all requests</summary>
<details class="dja-detail-table" aria-role="button" closed>
<summary class="dja-details-summary">Details for all requests</summary>
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
{% include "admin/analytics_graph_table.html" with data=data property_name="requests" %}
</div>