2 lines on line chart have a legend

2 files changed, 30 insertions, 8 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index dd6a6b007..8268d22b6 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -269,8 +269,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             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
@@ -285,8 +283,32 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         yAxisCreator(svg.append('g'), width, yScale);
 
         if (validSecondData) {
-            drawLine(svg.append('path'), validSecondData, lineGen);
+            drawLine(svg.append('path'), validSecondData, lineGen, true);
             this.drawDataPoints(validSecondData, 0, xScale, yScale);
+            svg.append('path').attr("stroke", "red");
+
+            // legend
+            var color = d3.scaleOrdinal()
+                .range(["black", "blue"])
+                .domain([this._props.axes[1], this._props.axes[2]])
+            svg.selectAll("mydots")
+                .data([this._props.axes[1], this._props.axes[2]])
+                .enter()
+                .append("circle")
+                    .attr("cx", 5)
+                    .attr("cy", function(d,i){ return -30 + i*15})
+                    .attr("r", 7)
+                    .style("fill", function(d){ return color(d)})
+            svg.selectAll("mylabels")
+                .data([this._props.axes[1], this._props.axes[2]])
+                .enter()
+                .append("text")
+                    .attr("x", 25)
+                    .attr("y", function(d,i){ return -30 + i*15})
+                    .style("fill", function(d){ return color(d)})
+                    .text(function(d){ return d})
+                    .attr("text-anchor", "left")
+                    .style("alignment-baseline", "middle")
         }
 
         // get valid data points
@@ -299,7 +321,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         });
 
         // draw the plot line
-        drawLine(svg.append('path'), validData, lineGen);
+        drawLine(svg.append('path'), validData, lineGen, false);
         // draw the datapoint circle
         this.drawDataPoints(validData, 0, xScale, yScale);
 
@@ -312,7 +334,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             const xPos = d3.pointer(e)[0];
             const x0 = Math.min(data.length - 1, bisect(data, xScale.invert(xPos - 5))); // shift x by -5 so that you can reach points on the left-side axis
             const d0 = data[x0];
-            if (!d0) return;
+            if (d0) this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
 
             this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
         });
@@ -348,7 +370,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         svg.append('text')
             .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')')
             .attr('x', -(height / 2))
-            .attr('y', -20)
+            .attr('y', -30)
             .attr('height', 20)
             .attr('width', 20)
             .style('text-anchor', 'middle')
diff --git a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
index 10bfb0c64..336935d23 100644
--- a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
+++ b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
@@ -61,6 +61,6 @@ export const yGrid = (g: d3.Selection<SVGGElement, unknown, null, undefined>, wi
     );
 };
 
-export const drawLine = (p: d3.Selection<SVGPathElement, unknown, null, undefined>, dataPts: DataPoint[], lineGen: d3.Line<DataPoint>) => {
-    p.datum(dataPts).attr('fill', 'none').attr('stroke', 'rgba(53, 162, 235, 0.5)').attr('stroke-width', 2).attr('class', 'line').attr('d', lineGen);
+export const drawLine = (p: d3.Selection<SVGPathElement, unknown, null, undefined>, dataPts: DataPoint[], lineGen: d3.Line<DataPoint>, extra: boolean) => {
+    p.datum(dataPts).attr('fill', 'none').attr('stroke', 'rgba(53, 162, 235, 0.5)').attr('stroke-width', 2).attr('stroke', extra? 'blue' : 'black').attr('class', 'line').attr('d', lineGen);
 };