Finishes #183092367. Adds ui and graphs to show grade level disaggregations

app/javascript/controllers/analyze_controller.js

@@ -10,10 +10,16 @@ export default class extends Controller {
       base_url +
       "&academic_years=" +
       this.selected_years().join(",") +
+      "&group=" +
+      this.selected_group() +
+      "&slice=" +
+      this.selected_slice() +
       "&graph=" +
       this.selected_graph() +
       "&races=" +
-      this.selected_races().join(",");
+      this.selected_races().join(",") +
+      "&grades=" +
+      this.selected_grades().join(",");
 
     this.go_to(url);
   }
@@ -36,9 +42,22 @@ export default class extends Controller {
     return years;
   }
 
-  selected_graph() {
-    let graphs = [...document.getElementsByName("graph")];
-    let selected_graph = graphs
+  selected_group() {
+    let groups = [...document.getElementsByName("group-option")];
+    let selected_group = groups
+      .filter((item) => {
+        return item.selected;
+      })
+      .map((item) => {
+        return item.id;
+      });
+
+    return selected_group[0];
+  }
+
+  selected_slice() {
+    let slices = [...document.getElementsByName("slice")];
+    let selected_slice = slices
       .filter((item) => {
         return item.checked;
       })
@@ -46,7 +65,27 @@ export default class extends Controller {
         return item.id;
       });
 
-    return selected_graph[0];
+    return selected_slice[0];
+  }
+
+  selected_graph() {
+    let graphs = [...document.getElementsByName("slice")];
+    let selected_graph = graphs
+      .filter((item) => {
+        return item.checked;
+      })
+      .map((item) => {
+        return item.id;
+      })[0];
+    if (selected_graph === 'students-and-teachers') {
+      return selected_graph;
+    }
+
+    if (this.selected_group() === 'race') {
+      return 'students-by-race'
+    } else {
+      return 'students-by-grade'
+    }
   }
 
   selected_races() {
@@ -61,4 +100,17 @@ export default class extends Controller {
 
     return races;
   }
+
+  selected_grades() {
+    let grade_checkboxes = [...document.getElementsByName("grade-checkbox")]
+    let grades = grade_checkboxes
+      .filter((item) => {
+        return item.checked;
+      })
+      .map((item) => {
+        return item.id.replace('grade-', '');
+      });
+
+    return grades;
+  }
 }