mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-30 06:26:34 +02:00
test changes
This commit is contained in:
parent
f154e9b870
commit
d684fea8ed
3 changed files with 56 additions and 30 deletions
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue