1 files changed, 41 insertions, 10 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 6b564b0c9..da79df476 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -1,7 +1,6 @@
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-// import d3
 import * as d3 from 'd3';
 import { Doc, DocListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
@@ -20,7 +19,7 @@ export interface DataPoint {
     x: number;
     y: number;
 }
-interface SelectedDataPoint extends DataPoint {
+export interface SelectedDataPoint extends DataPoint {
     elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
 }
 export interface LineChartProps {
@@ -54,12 +53,18 @@ export class LineChart extends React.Component<LineChartProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
+    @computed get graphTitle(){
+        return this.props.axes[1] + " vs. " + this.props.axes[0] + " Line Chart";
+    }  
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-            .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+            .filter(link => {
+                return link.link_anchor_1 == this.props.rootDoc.draggedFrom}) // get links where this chart doc is the target of the link
             .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
     }
     @computed get incomingSelected() {
+        // return selected x and y axes
+        // otherwise, use the selection of whatever is linked to us
         return this.incomingLinks // all links that are pointing to this node
             .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
             .filter(dvb => dvb)
@@ -219,7 +224,7 @@ export class LineChart extends React.Component<LineChartProps> {
     }
 
     // TODO: nda - can use d3.create() to create html element instead of appending
-    drawChart = (dataSet: DataPoint[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
+    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();
@@ -238,6 +243,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
+            .attr("class", "graph")
             .attr('width', `${width + margin.left + margin.right}`)
             .attr('height', `${height + margin.top + margin.bottom}`)
             .append('g')
@@ -249,13 +255,20 @@ export class LineChart extends React.Component<LineChartProps> {
         xAxisCreator(svg.append('g'), height, xScale);
         yAxisCreator(svg.append('g'), width, yScale);
 
-        // draw the plot line
+        // get valid data points
         const data = dataSet[0];
         const lineGen = createLineGenerator(xScale, yScale);
-        drawLine(svg.append('path'), data, lineGen);
-
+        var validData = data.filter((d => {
+            var valid = true;
+            Object.keys(data[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        }))
+        // draw the plot line
+        drawLine(svg.append('path'), validData, lineGen);
         // draw the datapoint circle
-        this.drawDataPoints(data, 0, xScale, yScale);
+        this.drawDataPoints(validData, 0, xScale, yScale);
 
         const higlightFocusPt = svg.append('g').style('display', 'none');
         higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
@@ -293,6 +306,20 @@ export class LineChart extends React.Component<LineChartProps> {
             .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
             .on('mousemove', mousemove)
             .on('click', onPointClick);
+
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(this.props.axes[0]);
+        svg.append("text")
+            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .attr("height", 20)
+            .attr("width", 20)
+            .style("text-anchor", "middle")
+            .text(this.props.axes[1]);
     };
 
     private updateTooltip(
@@ -314,9 +341,13 @@ export class LineChart extends React.Component<LineChartProps> {
     render() {
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
-            <div ref={this._lineChartRef} className="chart-container">
-                <span> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
+            this.props.axes.length >= 2 ? (
+            <div className="chart-container" >
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                <div ref={this._lineChartRef} />
             </div>
+            ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span>
         );
     }
 }