add instances to highlight

2 years ago · 932a0f6f87
parent e06e55d556
commit 932a0f6f87
2 changed files with 39 additions and 10 deletions
--- a/public/app.js
+++ b/public/app.js
@ -2,6 +2,7 @@ const WIDTH = 800;
 const HEIGHT = 600;

 let instances;
+const selectedInstances = [];
 let xScale, yScale;
 const parseTime = d3.timeParse("%B %e, %Y");
 const formatTime = d3.timeFormat("%B %e, %Y");
@ -63,9 +64,23 @@ const createAxes = () => {
 		.call(leftAxis);
 }

+const createFormSubmissionHandler = () => {
+	d3.select('form').on('submit', (event)=>{
+		event.preventDefault();
+		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
+		selectedInstances.push(instanceID);
+		const list = d3.select('ul');
+		list.html('');
+		for(instance of selectedInstances){
+			list.append('li').html(instance)
+		}
+	});
+}
+
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
 	setupGraph();
 	createAxes();
 	renderPoints();
+	createFormSubmissionHandler();
 }
--- a/public/index.html
+++ b/public/index.html
@ -10,6 +10,8 @@
 	<body>
 		<h1>Outcomes Tracker</h1>
 		<p>See how instances did in comparisson to others</p>
+		<section>
+			<h2>The Graph</h2>
 			<dl>
 				<dt>X-Axis:</dt>
 				<dd>Graduation Date</dd>
@ -21,5 +23,17 @@
 					<g id="points"></g>
 				</svg>
 			</svg>
+		</section>
+		<section>
+			<h2>Choose Instances To Highlight</h2>
+			<form>
+				<input type="text" placeholder="Insance ID"/>
+				<input type="submit"/>
+			</form>
+		</section>
+		<section>
+			<h2>Highlighted Instances</h2>
+			<ul></ul>
+		</section>
 	</body>
 </html>