From 7858d9c63fdc368841cdd9d499f647e7efe9ef5c Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Wed, 20 Sep 2023 23:07:18 -0400
Subject: [PATCH] instance details table

---
 public/app.js     | 10 ++++++++++
 public/index.html | 27 +++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/public/app.js b/public/app.js
index 1afd5e7..f12a35b 100644
--- a/public/app.js
+++ b/public/app.js
@@ -32,6 +32,16 @@ const renderPoints = () => {
 			return datum.highlighted
 		})
 
+	d3.selectAll('circle').on('click', (event, datum) => {
+		d3.select('tbody td:nth-child(1)').html(datum.instance_id);
+		d3.select('tbody td:nth-child(2)').html(datum.course);
+		d3.select('tbody td:nth-child(3)').html(datum.graduation_date);
+		d3.select('tbody td:nth-child(4)').html(datum.total_students);
+		d3.select('tbody td:nth-child(5)').html(`${datum.dropped} (${Math.floor(datum.dropped/datum.total_students*100)}%)`);
+		d3.select('tbody td:nth-child(6)').html(datum.graduates);
+		d3.select('tbody td:nth-child(7)').html(`${datum.ninety_day_outcomes} (${Math.floor(datum.ninety_day_outcomes/datum.graduates*100)}%)`);
+	});
+
 }
 
 const setupGraph = ()=>{
diff --git a/public/index.html b/public/index.html
index c477458..e24f52b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,5 +35,32 @@
 			<h2>Highlighted Instances</h2>
 			<ul></ul>
 		</section>
+		<section>
+			<h2>Instance Details</h2>
+			<table>
+				<thead>
+					<tr>
+						<td>Instance ID</td>
+						<td>Course</td>
+						<td>Graduation Date</td>
+						<td>Total Students</td>
+						<td>Dropped</td>
+						<td>Graduates</td>
+						<td>Outcomes After 90 Days</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+						<td></td>
+					</tr>
+				</tbody>
+			</table>
+		</section>
 	</body>
 </html>