Project graph revamp

[DinneK]

Problem(s):

• Homepage did not have overview paragraph
• Graph logic is not conducive to dynamically generating graphs and styling
• Graphs do not have concise explanations for what each graph represents
• Menu does not work properly

Solution(s):

• Add overview
• Graph logic changed to dynamically generate project and org graphs with unique class names
• Add modals to all graphs
• Add language to modals
• Fix nav menu

Next Steps:

• Add Year End Review
• Add responsiveness for all screen sizes
• Package

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 31 to 37 in 2900e66

	modalCloseButtons.forEach((button) => {
	button.addEventListener("click", (e) => {
	e.stopPropagation();
	const modal = button.closest(".usa-modal");
	closeModal(modal);
	});
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 39 to 44 in 2900e66

	document.addEventListener("click", (e) => {
	const activeModal = document.querySelector(".usa-modal.usa-modal--active");
	if(activeModal && !activeModal.contains(e.target)) {
	closeModal(activeModal);
	}
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 46 to 51 in 2900e66

	document.addEventListener("keydown", (e) => {
	if(e.key === "Escape") {
	const activeModal = document.querySelector(".usa-modal.usa-modal--active");
	closeModal(activeModal)
	}
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Line 54 in 2900e66

document.addEventListener("DOMContentLoaded", operateModal)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 507 in 2900e66

})