1 files changed, 28 insertions, 6 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')