From 4a0f77ae19934273a34e3a57541e7e8c4172b469 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 31 Jan 2024 17:56:11 -0500
Subject: 2 lines on line charts

---
 .../nodes/DataVizBox/components/LineChart.tsx      | 47 +++++++++++++---------
 1 file changed, 27 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 8d6671e65..dd6a6b007 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -236,21 +236,16 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         }
     }
 
-    // TODO: nda - can use d3.create() to create html element instead of appending
     drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
         // clearing tooltip and the current chart
         d3.select(this._lineChartRef.current).select('svg').remove();
         d3.select(this._lineChartRef.current).select('.tooltip').remove();
 
-        const { xMin, xMax, yMin, yMax } = rangeVals;
+        var { xMin, xMax, yMin, yMax } = rangeVals;
         if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) {
             return;
         }
 
-        // creating the x and y scales
-        const xScale = scaleCreatorNumerical(xMin, xMax, 0, width);
-        const yScale = scaleCreatorNumerical(0, yMax, height, 0);
-
         // adding svg
         const margin = this._props.margin;
         const svg = (this._lineChartSvg = d3
@@ -262,15 +257,40 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .append('g')
             .attr('transform', `translate(${margin.left}, ${margin.top})`));
 
+        var validSecondData;
+        if (this._props.axes.length>2){ // for when there are 2 lines on the chart
+            var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
+            validSecondData = next.filter(d => {
+                if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) return false;
+                return true;
+            });
+            var secondDataRange = minMaxRange([validSecondData]);
+            if (secondDataRange.xMax!>xMax) xMax = secondDataRange.xMax;
+            if (secondDataRange.yMax!>yMax) yMax = secondDataRange.yMax;
+            if (secondDataRange.xMin!<xMin) xMin = secondDataRange.xMin;
+            if (secondDataRange.yMin!<yMin) yMin = secondDataRange.yMin;
+            // drawLine(svg.append('path'), validNext, lineGen);
+            // this.drawDataPoints(validNext, 0, xScale, yScale);
+        }
+
+        // creating the x and y scales
+        const xScale = scaleCreatorNumerical(xMin!, xMax!, 0, width);
+        const yScale = scaleCreatorNumerical(0, yMax!, height, 0);
+        const lineGen = createLineGenerator(xScale, yScale);
+
         // create x and y grids
         xGrid(svg.append('g'), height, xScale);
         yGrid(svg.append('g'), width, yScale);
         xAxisCreator(svg.append('g'), height, xScale);
         yAxisCreator(svg.append('g'), width, yScale);
 
+        if (validSecondData) {
+            drawLine(svg.append('path'), validSecondData, lineGen);
+            this.drawDataPoints(validSecondData, 0, xScale, yScale);
+        }
+
         // get valid data points
         const data = dataSet[0];
-        const lineGen = createLineGenerator(xScale, yScale);
         var validData = data.filter(d => {
             Object.keys(data[0]).map(key => {
                 if (!d[key] || Number.isNaN(d[key])) return false;
@@ -278,19 +298,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             return true;
         });
 
-        if (this._props.axes.length>2){
-            var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
-            var validNext = next.filter(d => {
-                // Object.keys(next[0]).map(key => {
-                //     if (!d[key] || Number.isNaN(d[key])) return false;
-                // });
-                if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) valid = false;
-                return true;
-            });
-            drawLine(svg.append('path'), validNext, lineGen);
-            this.drawDataPoints(validNext, 0, xScale, yScale);
-        }
-
         // draw the plot line
         drawLine(svg.append('path'), validData, lineGen);
         // draw the datapoint circle
-- 
cgit v1.2.3-70-g09d2