fix(Graph): Multiple regression lines (#1175)

WISE-Community · Apr 12, 2023 · d5eb85b · d5eb85b
1 parent 7d6de50
commit d5eb85b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/assets/wise5/components/graph/graph-student/graph-student.component.spec.ts b/src/assets/wise5/components/graph/graph-student/graph-student.component.spec.ts
@@ -1887,7 +1887,8 @@ function setYAxisLabelsWhenMultipleYAxes() {
       }
     ];
     const studentData = {
-      dataExplorerYAxisLabels: ['Count', 'Price']
+      dataExplorerYAxisLabels: ['Count', 'Price'],
+      dataExplorerSeries: [{ yAxis: 0 }, { yAxis: 1 }]
     };
     component.setYAxisLabels(studentData);
     expect(component.yAxis[0].title.text).toEqual('Count');

diff --git a/src/assets/wise5/components/graph/graph-student/graph-student.component.ts b/src/assets/wise5/components/graph/graph-student/graph-student.component.ts
@@ -337,6 +337,7 @@ export class GraphStudent extends ComponentStudent {
     this.setYAxisLabels(studentData);
     this.setXAxisLabels(studentData);
 
+    const allRegressionSeries = [];
     for (let seriesIndex = 0; seriesIndex < dataExplorerSeries.length; seriesIndex++) {
       const xColumn = dataExplorerSeries[seriesIndex].xColumn;
       const yColumn = dataExplorerSeries[seriesIndex].yColumn;
@@ -359,16 +360,24 @@ export class GraphStudent extends ComponentStudent {
         }
         this.activeTrial.series.push(series);
         if (graphType === 'scatter' && studentData.isDataExplorerScatterPlotRegressionLineEnabled) {
-          const regressionSeries = this.generateDataExplorerRegressionSeries(
+          const singleRegressionSeries = this.generateDataExplorerRegressionSeries(
             studentData.tableData,
             xColumn,
             yColumn,
-            color
+            color,
+            yAxis
           );
-          this.activeTrial.series.push(regressionSeries);
+          allRegressionSeries.push(singleRegressionSeries);
         }
       }
     }
+
+    // Add all the regression series after all the data series so that all the data series are
+    // located at the expected index within the active trial. We need to do this because we expect
+    // the series index to match up with the axis index like in GraphService.getAxisTitle().
+    for (const singleRegressionSeries of allRegressionSeries) {
+      this.activeTrial.series.push(singleRegressionSeries);
+    }
   }
 
   private handleConnectedComponentData(studentData: any, connectedComponent: any): void {
@@ -408,8 +417,9 @@ export class GraphStudent extends ComponentStudent {
     } else if (studentData.dataExplorerYAxisLabels != null) {
       for (let [index, yAxis] of Object.entries(this.yAxis)) {
         (yAxis as any).title.text = studentData.dataExplorerYAxisLabels[index];
-        (yAxis as any).title.style.color = this.dataExplorerColors[index];
-        (yAxis as any).labels.style.color = this.dataExplorerColors[index];
+        const yAxisIndex = studentData.dataExplorerSeries[index].yAxis;
+        (yAxis as any).title.style.color = this.dataExplorerColors[yAxisIndex];
+        (yAxis as any).labels.style.color = this.dataExplorerColors[yAxisIndex];
       }
     }
   }
@@ -494,13 +504,21 @@ export class GraphStudent extends ComponentStudent {
     return series;
   }
 
-  generateDataExplorerRegressionSeries(tableData, xColumn, yColumn, color) {
+  private generateDataExplorerRegressionSeries(
+    tableData: any[],
+    xColumn: number,
+    yColumn: number,
+    color: string,
+    yAxis: number
+  ): any {
     const regressionLineData = this.calculateRegressionLineData(tableData, xColumn, yColumn);
     return {
       type: 'line',
       name: 'Regression Line',
       color: color,
-      data: regressionLineData
+      data: regressionLineData,
+      yAxis: yAxis,
+      enableMouseTracking: false
     };
   }
 

diff --git a/src/assets/wise5/components/graph/graphService.ts b/src/assets/wise5/components/graph/graphService.ts
@@ -412,10 +412,13 @@ export class GraphService extends ComponentService {
 
   getAxisTitle(series: any, axisObj: any): string {
     if (Array.isArray(axisObj)) {
-      if (axisObj[series.index].title.text == null || axisObj[series.index].title.text === '') {
-        return series.name;
-      } else {
-        return axisObj[series.index].title.text;
+      const axisIndex = series.options.yAxis == null ? series.index : series.options.yAxis;
+      if (axisObj[axisIndex] != null) {
+        if (axisObj[axisIndex].title.text == null || axisObj[axisIndex].title.text === '') {
+          return series.name;
+        } else {
+          return axisObj[axisIndex].title.text;
+        }
       }
     } else if (axisObj.title.text == null || axisObj.title.text === '') {
       return series.name;