feat(Milestone Report Graph): Specify location for graph

Milestone Report Graph displays data from all the locations in the Milestone. Each component is displayed as a separate data series.

Allow authors to specify one or more specific locations for each graph via a "locations" input parameter. If no locations are specified, show data series for all locations (like we currently do).

Closes #377.

src/assets/wise5/directives/milestoneReportGraph/milestoneReportGraph.js

@@ -83,7 +83,7 @@ class MilestoneReportGraphController {
     const color = this.barColor ? this.barColor : this.defaultColor;
     const step = 100 / this.data.length / 100;
     let opacity = 0;
-    for (const componentData of this.data) {
+    for (const componentData of this.getDataToGraph(this.data, this.locations)) {
       opacity += step;
       const singleSeries = {
         name: this.UtilService.trimToLength(componentData.stepTitle, 26),
@@ -95,6 +95,20 @@ class MilestoneReportGraphController {
     this.series = series;
   }
 
+  getDataToGraph(data, locations) {
+    if (locations == null) {
+      return data;
+    } else {
+      return this.getDataFromLocations(data, locations);
+    }
+  }
+
+  getDataFromLocations(data, locations) {
+    const dataFromLocations = [];
+    locations.forEach((location) => { dataFromLocations.push(data[location - 1]) });
+    return dataFromLocations;
+  }
+
   getComponentSeriesData(componentData) {
     const seriesData = [];
     const scoreKeys = Object.keys(componentData.counts);
@@ -120,6 +134,7 @@ MilestoneReportGraphController.$inject = ['$filter', 'UtilService'];
 const MilestoneReportGraph = {
   bindings: {
     id: '@',
+    locations: '<',
     name: '@',
     titleColor: '@',
     barColor: '@',