zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-11 03:59:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

test changes

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

35
src/registrar/assets/js/get-gov-reports.js
View file

@ -59,6 +59,8 @@
/** An IIFE to initialize the analytics page /** An IIFE to initialize the analytics page
*/ */
(function () { (function () {
// Store chart instances globally within this IIFE
const chartInstances = new Map();
function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) { function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) {
var canvas = document.getElementById(canvasId); var canvas = document.getElementById(canvasId);
if (!canvas) { if (!canvas) {
@ -80,17 +82,16 @@
borderWidth: 1, borderWidth: 1,
data: listOne, data: listOne,
backgroundColor: [ backgroundColor: [
pattern.draw('zigzag-vertical', '#1f77b4'), pattern.draw("zigzag-vertical", "#1f77b4"),
] ]
}, },
{ {
label: labelTwo, label: labelTwo,
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)", borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1, borderWidth: 1,
data: listTwo, data: listTwo,
backgroundColor: [ backgroundColor: [
pattern.draw('diagonal', '#1f77b4'), pattern.draw("diagonal", "#1f77b4"),
] ]
}, },
], ],
@ -98,7 +99,6 @@
var options = { var options = {
responsive: true, responsive: true,
maintainAspectRatio: false,
plugins: { plugins: {
legend: { legend: {
position: 'top', 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", type: "bar",
data: data, data: data,
options: options, 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() { function initComparativeColumnCharts() {
@ -130,6 +153,8 @@
createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date"); createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date");
createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date"); createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date");
createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date"); createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date");
//window.addEventListener("resize", handleResize);
}); });
}; };

15
src/registrar/assets/src/sass/_theme/_admin.scss
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 { .analytics-dashboard-charts {
// Desktop layout - charts in top row, details in bottom row // Desktop layout - charts in top row, details in bottom row
display: grid; display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-areas: grid-template-areas:
"chart1 chart2" "chart1 chart2"
@ -945,16 +945,17 @@ ul.add-list-reset {
"details5 details6"; "details5 details6";
.chart-1 { grid-area: chart1; } .chart-1 { grid-area: chart1; }
.details-1 { grid-area: details1; }
.chart-2 { grid-area: chart2; } .chart-2 { grid-area: chart2; }
.details-2 { grid-area: details2; }
.chart-3 { grid-area: chart3; } .chart-3 { grid-area: chart3; }
.details-3 { grid-area: details3; }
.chart-4 { grid-area: chart4; } .chart-4 { grid-area: chart4; }
.details-4 { grid-area: details4; }
.chart-5 { grid-area: chart5; } .chart-5 { grid-area: chart5; }
.details-5 { grid-area: details5; }
.chart-6 { grid-area: chart6; } .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; } .details-6 { grid-area: details6; }
} }
} }

36
src/registrar/templates/admin/analytics.html
View file

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