zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-16 14:34:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3492 from cisagov/za/3148-accessible-bar-graph

Browse source 
#3148: Accessible bar graph - [LITTERBOX]
This commit is contained in:
zandercymatics 2025-02-18 12:34:27 -07:00 • committed by GitHub
commit 4d374b2878
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 426 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,179 +0,0 @@
/** An IIFE for admin in DjangoAdmin to listen to clicks on the growth report export button,
* attach the seleted start and end dates to a url that'll trigger the view, and finally
* redirect to that url.
*
* This function also sets the start and end dates to match the url params if they exist
*/
(function () {
// Function to get URL parameter value by name
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// Get the current date in the format YYYY-MM-DD
let currentDate = new Date().toISOString().split('T')[0];
// Default the value of the start date input field to the current date
let startDateInput = document.getElementById('start');
// Default the value of the end date input field to the current date
let endDateInput = document.getElementById('end');
let exportButtons = document.querySelectorAll('.exportLink');
if (exportButtons.length > 0) {
// Check if start and end dates are present in the URL
let urlStartDate = getParameterByName('start_date');
let urlEndDate = getParameterByName('end_date');
// Set input values based on URL parameters or current date
startDateInput.value = urlStartDate || currentDate;
endDateInput.value = urlEndDate || currentDate;
exportButtons.forEach((btn) => {
btn.addEventListener('click', function () {
// Get the selected start and end dates
let startDate = startDateInput.value;
let endDate = endDateInput.value;
let exportUrl = btn.dataset.exportUrl;
// Build the URL with parameters
exportUrl += "?start_date=" + startDate + "&end_date=" + endDate;
// Redirect to the export URL
window.location.href = exportUrl;
});
});
}
})();
/** An IIFE to initialize the analytics page
*/
(function () {
/**
* Creates a diagonal stripe pattern for chart.js
* Inspired by https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
* and https://github.com/ashiguruma/patternomaly
* @param {string} backgroundColor - Background color of the pattern
* @param {string} [lineColor="white"] - Color of the diagonal lines
* @param {boolean} [rightToLeft=false] - Direction of the diagonal lines
* @param {number} [lineGap=1] - Gap between lines
* @returns {CanvasPattern} A canvas pattern object for use with backgroundColor
*/
function createDiagonalPattern(backgroundColor, lineColor, rightToLeft=false, lineGap=1) {
// Define the canvas and the 2d context so we can draw on it
let shape = document.createElement("canvas");
shape.width = 20;
shape.height = 20;
let context = shape.getContext("2d");
// Fill with specified background color
context.fillStyle = backgroundColor;
context.fillRect(0, 0, shape.width, shape.height);
// Set stroke properties
context.strokeStyle = lineColor;
context.lineWidth = 2;
// Rotate canvas for a right-to-left pattern
if (rightToLeft) {
context.translate(shape.width, 0);
context.rotate(90 * Math.PI / 180);
};
// First diagonal line
let halfSize = shape.width / 2;
context.moveTo(halfSize - lineGap, -lineGap);
context.lineTo(shape.width + lineGap, halfSize + lineGap);
// Second diagonal line (x,y are swapped)
context.moveTo(-lineGap, halfSize - lineGap);
context.lineTo(halfSize + lineGap, shape.width + lineGap);
context.stroke();
return context.createPattern(shape, "repeat");
}
function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) {
var canvas = document.getElementById(canvasId);
if (!canvas) {
return
}
var ctx = canvas.getContext("2d");
var listOne = JSON.parse(canvas.getAttribute('data-list-one'));
var listTwo = JSON.parse(canvas.getAttribute('data-list-two'));
var data = {
labels: ["Total", "Federal", "Interstate", "State/Territory", "Tribal", "County", "City", "Special District", "School District", "Election Board"],
datasets: [
{
label: labelOne,
backgroundColor: "rgba(255, 99, 132, 0.3)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
data: listOne,
// Set this line style to be rightToLeft for visual distinction
backgroundColor: createDiagonalPattern('rgba(255, 99, 132, 0.3)', 'white', true)
},
{
label: labelTwo,
backgroundColor: "rgba(75, 192, 192, 0.3)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
data: listTwo,
backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)', 'white')
},
],
};
var options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: title
}
},
scales: {
y: {
beginAtZero: true,
},
},
};
new Chart(ctx, {
type: "bar",
data: data,
options: options,
});
}
function initComparativeColumnCharts() {
document.addEventListener("DOMContentLoaded", function () {
createComparativeColumnChart("myChart1", "Managed domains", "Start Date", "End Date");
createComparativeColumnChart("myChart2", "Unmanaged domains", "Start Date", "End Date");
createComparativeColumnChart("myChart3", "Deleted domains", "Start Date", "End Date");
createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date");
createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date");
createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date");
});
};
initComparativeColumnCharts();
})();

177
src/registrar/assets/src/js/getgov-admin/analytics.js Normal file
View file

@ -0,0 +1,177 @@
import { debounce } from '../getgov/helpers.js';
import { getParameterByName } from './helpers-admin.js';
/** This function also sets the start and end dates to match the url params if they exist
*/
function initAnalyticsExportButtons() {
// Get the current date in the format YYYY-MM-DD
let currentDate = new Date().toISOString().split('T')[0];
// Default the value of the start date input field to the current date
let startDateInput = document.getElementById('start');
// Default the value of the end date input field to the current date
let endDateInput = document.getElementById('end');
let exportButtons = document.querySelectorAll('.exportLink');
if (exportButtons.length > 0) {
// Check if start and end dates are present in the URL
let urlStartDate = getParameterByName('start_date');
let urlEndDate = getParameterByName('end_date');
// Set input values based on URL parameters or current date
startDateInput.value = urlStartDate || currentDate;
endDateInput.value = urlEndDate || currentDate;
exportButtons.forEach((btn) => {
btn.addEventListener('click', function () {
// Get the selected start and end dates
let startDate = startDateInput.value;
let endDate = endDateInput.value;
let exportUrl = btn.dataset.exportUrl;
// Build the URL with parameters
exportUrl += "?start_date=" + startDate + "&end_date=" + endDate;
// Redirect to the export URL
window.location.href = exportUrl;
});
});
}
};
/**
* Creates a diagonal stripe pattern for chart.js
* Inspired by https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
* and https://github.com/ashiguruma/patternomaly
* @param {string} backgroundColor - Background color of the pattern
* @param {string} [lineColor="white"] - Color of the diagonal lines
* @param {boolean} [rightToLeft=false] - Direction of the diagonal lines
* @param {number} [lineGap=1] - Gap between lines
* @returns {CanvasPattern} A canvas pattern object for use with backgroundColor
*/
function createDiagonalPattern(backgroundColor, lineColor, rightToLeft=false, lineGap=1) {
// Define the canvas and the 2d context so we can draw on it
let shape = document.createElement("canvas");
shape.width = 20;
shape.height = 20;
let context = shape.getContext("2d");
// Fill with specified background color
context.fillStyle = backgroundColor;
context.fillRect(0, 0, shape.width, shape.height);
// Set stroke properties
context.strokeStyle = lineColor;
context.lineWidth = 2;
// Rotate canvas for a right-to-left pattern
if (rightToLeft) {
context.translate(shape.width, 0);
context.rotate(90 * Math.PI / 180);
};
// First diagonal line
let halfSize = shape.width / 2;
context.moveTo(halfSize - lineGap, -lineGap);
context.lineTo(shape.width + lineGap, halfSize + lineGap);
// Second diagonal line (x,y are swapped)
context.moveTo(-lineGap, halfSize - lineGap);
context.lineTo(halfSize + lineGap, shape.width + lineGap);
context.stroke();
return context.createPattern(shape, "repeat");
}
function createComparativeColumnChart(id, title, labelOne, labelTwo) {
var canvas = document.getElementById(id);
if (!canvas) {
return
}
var ctx = canvas.getContext("2d");
var listOne = JSON.parse(canvas.getAttribute('data-list-one'));
var listTwo = JSON.parse(canvas.getAttribute('data-list-two'));
var data = {
labels: ["Total", "Federal", "Interstate", "State/Territory", "Tribal", "County", "City", "Special District", "School District", "Election Board"],
datasets: [
{
label: labelOne,
backgroundColor: "rgba(255, 99, 132, 0.3)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
data: listOne,
// Set this line style to be rightToLeft for visual distinction
backgroundColor: createDiagonalPattern('rgba(255, 99, 132, 0.3)', 'white', true)
},
{
label: labelTwo,
backgroundColor: "rgba(75, 192, 192, 0.3)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
data: listTwo,
backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)', 'white')
},
],
};
var options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: title
}
},
scales: {
y: {
beginAtZero: true,
},
},
};
return new Chart(ctx, {
type: "bar",
data: data,
options: options,
});
}
/** An IIFE to initialize the analytics page
*/
export function initAnalyticsDashboard() {
const analyticsPageContainer = document.querySelector('.analytics-dashboard-charts');
if (analyticsPageContainer) {
document.addEventListener("DOMContentLoaded", function () {
initAnalyticsExportButtons();
// Create charts and store each instance of it
const chartInstances = new Map();
const charts = [
{ id: "managed-domains-chart", title: "Managed domains" },
{ id: "unmanaged-domains-chart", title: "Unmanaged domains" },
{ id: "deleted-domains-chart", title: "Deleted domains" },
{ id: "ready-domains-chart", title: "Ready domains" },
{ id: "submitted-requests-chart", title: "Submitted requests" },
{ id: "all-requests-chart", title: "All requests" }
];
charts.forEach(chart => {
if (chartInstances.has(chart.id)) chartInstances.get(chart.id).destroy();
chartInstances.set(chart.id, createComparativeColumnChart(chart.id, chart.title, "Start Date", "End Date"));
});
// Add resize listener to each chart
window.addEventListener("resize", debounce(() => {
chartInstances.forEach((chart) => {
if (chart?.canvas) chart.resize();
});
}, 200));
});
}
};

10
src/registrar/assets/src/js/getgov-admin/helpers-admin.js
View file

@ -22,3 +22,13 @@ export function addOrRemoveSessionBoolean(name, add){
sessionStorage.removeItem(name); sessionStorage.removeItem(name);
} }
} }
export function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

4
src/registrar/assets/src/js/getgov-admin/main.js
View file

@ -15,6 +15,7 @@ import { initDomainFormTargetBlankButtons } from './domain-form.js';
import { initDynamicPortfolioFields } from './portfolio-form.js'; import { initDynamicPortfolioFields } from './portfolio-form.js';
import { initDynamicDomainInformationFields } from './domain-information-form.js'; import { initDynamicDomainInformationFields } from './domain-information-form.js';
import { initDynamicDomainFields } from './domain-form.js'; import { initDynamicDomainFields } from './domain-form.js';
import { initAnalyticsDashboard } from './analytics.js';
// General // General
initModals(); initModals();
@ -41,3 +42,6 @@ initDynamicPortfolioFields();
// Domain information // Domain information
initDynamicDomainInformationFields(); initDynamicDomainInformationFields();
// Analytics dashboard
initAnalyticsDashboard();

40
src/registrar/assets/src/sass/_theme/_admin.scss
View file

@ -558,13 +558,18 @@ details.dja-detail-table {
background-color: transparent; background-color: transparent;
} }
thead tr {
background-color: var(--darkened-bg);
}
td, th { td, th {
padding-left: 12px; padding-left: 12px;
border: none border: none;
background-color: var(--darkened-bg);
color: var(--body-quiet-color);
} }
thead > tr > th { thead > tr > th {
border-radius: 4px;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
} }
@ -946,3 +951,34 @@ ul.add-list-reset {
background-color: transparent !important; background-color: transparent !important;
} }
} }
@media (min-width: 1080px) {
.analytics-dashboard-charts {
// Desktop layout - charts in top row, details in bottom row
display: grid;
gap: 2rem;
// Equal columns each gets 1/2 of the space
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"chart1 chart2"
"details1 details2"
"chart3 chart4"
"details3 details4"
"chart5 chart6"
"details5 details6";
.chart-1 { grid-area: chart1; }
.chart-2 { grid-area: chart2; }
.chart-3 { grid-area: chart3; }
.chart-4 { grid-area: chart4; }
.chart-5 { grid-area: chart5; }
.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; }
}
}

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

@ -18,7 +18,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
{% block content %} {% block content %}
<div id="content-main" class="custom-admin-template"> <div id="content-main" class="custom-admin-template analytics-dashboard">
<div class="grid-row grid-gap-2"> <div class="grid-row grid-gap-2">
<div class="tablet:grid-col-6 margin-top-2"> <div class="tablet:grid-col-6 margin-top-2">
@ -95,7 +95,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
<input type="date" id="end" name="end" value="2023-12-01" min="2023-12-01" /> <input type="date" id="end" name="end" value="2023-12-01" min="2023-12-01" />
</div> </div>
</div> </div>
<ul class="usa-button-group"> <ul class="usa-button-group flex-wrap">
<li class="usa-button-group__item"> <li class="usa-button-group__item">
<button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_domains_growth' %}" type="button"> <button class="usa-button usa-button--dja exportLink" data-export-url="{% url 'export_domains_growth' %}" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
@ -133,80 +133,127 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
</li> </li>
</ul> </ul>
<div class="grid-row grid-gap-2 margin-y-2"> <div class="analytics-dashboard-charts margin-top-2">
<div class="grid-col"> {% comment %} Managed/Unmanaged domains {% endcomment %}
<canvas id="myChart1" width="400" height="200" <div class="chart-1 grid-col">
aria-label="Chart: {{ data.managed_domains_sliced_at_end_date.0 }} managed domains for {{ data.end_date }}" <canvas id="managed-domains-chart" width="400" height="200"
role="img" aria-label="Chart: {{ data.managed_domains.end_date_count.0 }} managed domains for {{ data.end_date }}"
data-list-one="{{data.managed_domains_sliced_at_start_date}}" role="img"
data-list-two="{{data.managed_domains_sliced_at_end_date}}" data-list-one="{{ data.managed_domains.start_date_count }}"
> data-list-two="{{ data.managed_domains.end_date_count }}"
<h2>Chart: Managed domains</h2> >
<p>{{ data.managed_domains_sliced_at_end_date.0 }} managed domains for {{ data.end_date }}</p> <h2>Chart: Managed domains</h2>
</canvas> <p>{{ data.managed_domains.end_date_count.0 }} managed domains for {{ data.end_date }}</p>
</div> </canvas>
<div class="grid-col"> </div>
<canvas id="myChart2" width="400" height="200" <div class="details-1 grid-col margin-bottom-2">
aria-label="Chart: {{ data.unmanaged_domains_sliced_at_end_date.0 }} unmanaged domains for {{ data.end_date }}" <details class="dja-detail-table" aria-role="button" closed>
role="img" <summary class="dja-details-summary">Details for managed domains</summary>
data-list-one="{{data.unmanaged_domains_sliced_at_start_date}}" <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
data-list-two="{{data.unmanaged_domains_sliced_at_end_date}}" {% include "admin/analytics_graph_table.html" with data=data property_name="managed_domains" %}
> </div>
<h2>Chart: Unmanaged domains</h2> </details>
<p>{{ data.unmanaged_domains_sliced_at_end_date.0 }} unmanaged domains for {{ data.end_date }}</p> </div>
</canvas> <div class="chart-2 grid-col">
</div> <canvas id="unmanaged-domains-chart" width="400" height="200"
</div> aria-label="Chart: {{ data.unmanaged_domains.end_date_count.0 }} unmanaged domains for {{ data.end_date }}"
role="img"
data-list-one="{{ data.unmanaged_domains.start_date_count }}"
data-list-two="{{ data.unmanaged_domains.end_date_count }}"
>
<h2>Chart: Unmanaged domains</h2>
<p>{{ data.unmanaged_domains.end_date_count.0 }} unmanaged domains for {{ data.end_date }}</p>
</canvas>
</div>
<div class="details-2 grid-col margin-bottom-2">
<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>
</details>
</div>
<div class="grid-row grid-gap-2 margin-y-2"> {% comment %} Deleted/Ready domains {% endcomment %}
<div class="grid-col"> <div class="chart-3 grid-col">
<canvas id="myChart3" width="400" height="200" <canvas id="deleted-domains-chart" width="400" height="200"
aria-label="Chart: {{ data.deleted_domains_sliced_at_end_date.0 }} deleted domains for {{ data.end_date }}" aria-label="Chart: {{ data.deleted_domains.end_date_count.0 }} deleted domains for {{ data.end_date }}"
role="img" role="img"
data-list-one="{{data.deleted_domains_sliced_at_start_date}}" data-list-one="{{ data.deleted_domains.start_date_count }}"
data-list-two="{{data.deleted_domains_sliced_at_end_date}}" data-list-two="{{ data.deleted_domains.end_date_count }}"
> >
<h2>Chart: Deleted domains</h2> <h2>Chart: Deleted domains</h2>
<p>{{ data.deleted_domains_sliced_at_end_date.0 }} deleted domains for {{ data.end_date }}</p> <p>{{ data.deleted_domains.end_date_count.0 }} deleted domains for {{ data.end_date }}</p>
</canvas> </canvas>
</div> </div>
<div class="grid-col"> <div class="details-3 grid-col margin-bottom-2">
<canvas id="myChart4" width="400" height="200" <details class="dja-detail-table" aria-role="button" closed>
aria-label="Chart: {{ data.ready_domains_sliced_at_end_date.0 }} ready domains for {{ data.end_date }}" <summary class="dja-details-summary">Details for deleted domains</summary>
role="img" <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
data-list-one="{{data.ready_domains_sliced_at_start_date}}" {% include "admin/analytics_graph_table.html" with data=data property_name="deleted_domains" %}
data-list-two="{{data.ready_domains_sliced_at_end_date}}" </div>
> </details>
<h2>Chart: Ready domains</h2> </div>
<p>{{ data.ready_domains_sliced_at_end_date.0 }} ready domains for {{ data.end_date }}</p> <div class="chart-4 grid-col">
</canvas> <canvas id="ready-domains-chart" width="400" height="200"
</div> aria-label="Chart: {{ data.ready_domains.end_date_count.0 }} ready domains for {{ data.end_date }}"
</div> role="img"
data-list-one="{{ data.ready_domains.start_date_count }}"
data-list-two="{{ data.ready_domains.end_date_count }}"
>
<h2>Chart: Ready domains</h2>
<p>{{ data.ready_domains.end_date_count.0 }} ready domains for {{ data.end_date }}</p>
</canvas>
</div>
<div class="details-4 grid-col margin-bottom-2">
<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>
</details>
</div>
<div class="grid-row grid-gap-2 margin-y-2"> {% comment %} Requests {% endcomment %}
<div class="grid-col"> <div class="chart-5 grid-col">
<canvas id="myChart5" width="400" height="200" <canvas id="submitted-requests-chart" width="400" height="200"
aria-label="Chart: {{ data.submitted_requests_sliced_at_end_date.0 }} submitted requests for {{ data.end_date }}" aria-label="Chart: {{ data.submitted_requests.end_date_count.0 }} submitted requests for {{ data.end_date }}"
role="img" role="img"
data-list-one="{{data.submitted_requests_sliced_at_start_date}}" data-list-one="{{ data.submitted_requests.start_date_count }}"
data-list-two="{{data.submitted_requests_sliced_at_end_date}}" data-list-two="{{ data.submitted_requests.end_date_count }}"
> >
<h2>Chart: Submitted requests</h2> <h2>Chart: Submitted requests</h2>
<p>{{ data.submitted_requests_sliced_at_end_date.0 }} submitted requests for {{ data.end_date }}</p> <p>{{ data.submitted_requests.end_date_count.0 }} submitted requests for {{ data.end_date }}</p>
</canvas> </canvas>
</div> </div>
<div class="grid-col"> <div class="details-5 grid-col margin-bottom-2">
<canvas id="myChart6" width="400" height="200" <details class="dja-detail-table" aria-role="button" closed>
aria-label="Chart: {{ data.requests_sliced_at_end_date.0 }} requests for {{ data.end_date }}" <summary class="dja-details-summary">Details for submitted requests</summary>
role="img" <div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
data-list-one="{{data.requests_sliced_at_start_date}}" {% include "admin/analytics_graph_table.html" with data=data property_name="submitted_requests" %}
data-list-two="{{data.requests_sliced_at_end_date}}" </div>
> </details>
<h2>Chart: All requests</h2> </div>
<p>{{ data.requests_sliced_at_end_date.0 }} requests for {{ data.end_date }}</p> <div class="chart-6 grid-col">
</canvas> <canvas id="all-requests-chart" width="400" height="200"
</div> aria-label="Chart: {{ data.requests.end_date_count.0 }} requests for {{ data.end_date }}"
</div> role="img"
data-list-one="{{ data.requests.start_date_count }}"
data-list-two="{{ data.requests.end_date_count }}"
>
<h2>Chart: All requests</h2>
<p>{{ data.requests.end_date_count.0 }} requests for {{ data.end_date }}</p>
</canvas>
</div>
<div class="details-6 grid-col margin-bottom-2">
<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>
</details>
</div>
</div>
</div> </div>
</div> </div>

26
src/registrar/templates/admin/analytics_graph_table.html Normal file
View file

@ -0,0 +1,26 @@
<table class="usa-table usa-table--borderless">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Start date {{ data.start_date }}</th>
<th scope="col">End date {{ data.end_date }} </th>
<tr>
</thead>
<tbody>
{% comment %}
This ugly notation is equivalent to data.property_name.start_date_count.index.
Or represented in the pure python way: data[property_name]["start_date_count"][index]
{% endcomment %}
{% with start_counts=data|get_item:property_name|get_item:"start_date_count" end_counts=data|get_item:property_name|get_item:"end_date_count" %}
{% for org_count_type in data.org_count_types %}
{% with index=forloop.counter %}
<tr>
<th class="padding-left-1" scope="row">{{ org_count_type }}</th>
<td class="padding-left-1">{{ start_counts|slice:index|last }}</td>
<td class="padding-left-1">{{ end_counts|slice:index|last }}</td>
</tr>
{% endwith %}
{% endfor %}
{% endwith %}
</tbody>
</table>

1
src/registrar/templates/admin/base_site.html
View file

@ -22,7 +22,6 @@
<script src="{% static 'js/uswds.min.js' %}" defer></script> <script src="{% static 'js/uswds.min.js' %}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="application/javascript" src="{% static 'js/getgov-admin.min.js' %}" defer></script> <script type="application/javascript" src="{% static 'js/getgov-admin.min.js' %}" defer></script>
<script type="application/javascript" src="{% static 'js/get-gov-reports.js' %}" defer></script>
<script type="application/javascript" src="{% static 'js/dja-collapse.js' %}" defer></script> <script type="application/javascript" src="{% static 'js/dja-collapse.js' %}" defer></script>
{% endblock %} {% endblock %}

2
src/registrar/tests/test_reports.py
View file

@ -1,4 +1,5 @@
import io import io
from unittest import skip
from django.test import Client, RequestFactory from django.test import Client, RequestFactory
from io import StringIO from io import StringIO
from registrar.models import ( from registrar.models import (
@ -819,6 +820,7 @@ class MemberExportTest(MockDbForIndividualTests, MockEppLib):
super().setUp() super().setUp()
self.factory = RequestFactory() self.factory = RequestFactory()
@skip("flaky test that needs to be refactored")
@override_flag("organization_feature", active=True) @override_flag("organization_feature", active=True)
@override_flag("organization_members", active=True) @override_flag("organization_members", active=True)
@less_console_noise_decorator @less_console_noise_decorator

70
src/registrar/views/report_views.py
View file

@ -126,28 +126,54 @@ class AnalyticsView(View):
# include it in the larger context dictionary so it's available in the template rendering context. # include it in the larger context dictionary so it's available in the template rendering context.
# This ensures that the admin interface styling and behavior are consistent with other admin pages. # This ensures that the admin interface styling and behavior are consistent with other admin pages.
**admin.site.each_context(request), **admin.site.each_context(request),
data=dict( data={
user_count=models.User.objects.all().count(), # Tracks what kind of orgs we are keeping count of.
domain_count=models.Domain.objects.all().count(), # Used for the details table beneath the graph.
ready_domain_count=models.Domain.objects.filter(state=models.Domain.State.READY).count(), "org_count_types": [
last_30_days_applications=last_30_days_applications.count(), "Total",
last_30_days_approved_applications=last_30_days_approved_applications.count(), "Federal",
average_application_approval_time_last_30_days=avg_approval_time_display, "Interstate",
managed_domains_sliced_at_start_date=managed_domains_sliced_at_start_date, "State/Territory",
unmanaged_domains_sliced_at_start_date=unmanaged_domains_sliced_at_start_date, "Tribal",
managed_domains_sliced_at_end_date=managed_domains_sliced_at_end_date, "County",
unmanaged_domains_sliced_at_end_date=unmanaged_domains_sliced_at_end_date, "City",
ready_domains_sliced_at_start_date=ready_domains_sliced_at_start_date, "Special District",
deleted_domains_sliced_at_start_date=deleted_domains_sliced_at_start_date, "School District",
ready_domains_sliced_at_end_date=ready_domains_sliced_at_end_date, "Election Board",
deleted_domains_sliced_at_end_date=deleted_domains_sliced_at_end_date, ],
requests_sliced_at_start_date=requests_sliced_at_start_date, "user_count": models.User.objects.all().count(),
submitted_requests_sliced_at_start_date=submitted_requests_sliced_at_start_date, "domain_count": models.Domain.objects.all().count(),
requests_sliced_at_end_date=requests_sliced_at_end_date, "ready_domain_count": models.Domain.objects.filter(state=models.Domain.State.READY).count(),
submitted_requests_sliced_at_end_date=submitted_requests_sliced_at_end_date, "last_30_days_applications": last_30_days_applications.count(),
start_date=start_date, "last_30_days_approved_applications": last_30_days_approved_applications.count(),
end_date=end_date, "average_application_approval_time_last_30_days": avg_approval_time_display,
), "managed_domains": {
"start_date_count": managed_domains_sliced_at_start_date,
"end_date_count": managed_domains_sliced_at_end_date,
},
"unmanaged_domains": {
"start_date_count": unmanaged_domains_sliced_at_start_date,
"end_date_count": unmanaged_domains_sliced_at_end_date,
},
"ready_domains": {
"start_date_count": ready_domains_sliced_at_start_date,
"end_date_count": ready_domains_sliced_at_end_date,
},
"deleted_domains": {
"start_date_count": deleted_domains_sliced_at_start_date,
"end_date_count": deleted_domains_sliced_at_end_date,
},
"requests": {
"start_date_count": requests_sliced_at_start_date,
"end_date_count": requests_sliced_at_end_date,
},
"submitted_requests": {
"start_date_count": submitted_requests_sliced_at_start_date,
"end_date_count": submitted_requests_sliced_at_end_date,
},
"start_date": start_date,
"end_date": end_date,
},
) )
return render(request, "admin/analytics.html", context) return render(request, "admin/analytics.html", context)