1 files changed, 18 insertions, 43 deletions

diff --git a/src/client/views/nodes/DataVizBox/LineChart.tsx b/src/client/views/nodes/DataVizBox/LineChart.tsx
index 5ad8f0846..8a757866e 100644
--- a/src/client/views/nodes/DataVizBox/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/LineChart.tsx
@@ -1,9 +1,10 @@
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { ChartData, DataPoints } from './ChartBox';
+import { ChartData, DataPoint } from './ChartBox';
 // import d3
 import * as d3 from 'd3';
+import { minMaxRange, createLineGenerator, xGrid, yGrid, drawLine, scaleCreator } from './utils/D3Utils';
 
 interface LineChartProps {
     data: ChartData;
@@ -23,6 +24,8 @@ export class LineChart extends React.Component<LineChartProps> {
     @observable private _x: number = 0;
     @observable private _y: number = 0;
     @observable private _currSelected: SelectedDataPoint | undefined = undefined;
+    // create ref for the div
+    private _chartRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     componentDidMount() {
         console.log('Getting to line chart');
@@ -36,7 +39,7 @@ export class LineChart extends React.Component<LineChartProps> {
         }
     }
 
-    tooltipContent(data: DataPoints) {
+    tooltipContent(data: DataPoint) {
         return `<b>x: ${data.x} y: ${data.y}</b>`;
     }
 
@@ -48,16 +51,10 @@ export class LineChart extends React.Component<LineChartProps> {
         const margin = { top: 50, right: 50, bottom: 50, left: 50 };
         const { data } = this.props;
 
-        const yMin = d3.min(data.data, d => d.y);
-        const yMax = d3.max(data.data, d => d.y);
-
-        // TODO: nda - modify data.x to support strings
-
-        const xMin = d3.min(data.data, d => d.x);
-        const xMax = d3.max(data.data, d => d.x);
+        const { xMin, xMax, yMin, yMax } = minMaxRange(data.data);
 
         // adding svg
-        const svg = d3.select('#chart-container').append('svg').attr('width', '100%').attr('height', '100%').append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
+        const svg = d3.select(this._chartRef.current).append('svg').attr('width', '100%').attr('height', '100%').append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
 
         // adding tooltip
         // const tooltip = d3.select('#chart-container').append('div').attr('class', 'tooltip');
@@ -67,41 +64,19 @@ export class LineChart extends React.Component<LineChartProps> {
             return;
         }
         // adding x axis
-        const xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, this.props.width]);
-
-        const yScale = d3.scaleLinear().domain([0, yMax]).range([this.props.height, 0]);
+        const xScale = scaleCreator(xMin, xMax, 0, this.props.width);
+        const yScale = scaleCreator(0, yMax, this.props.height, 0);
 
         // create a line function that takes in the data.data.x and data.data.y
         // TODO: nda - fix the types for the d here
-        const lineGen = d3
-            .line<DataPoints>()
-            .x(d => xScale(d.x))
-            .y(d => yScale(d.y))
-            .curve(d3.curveMonotoneX);
-
-        // adding the line to the svg
-        svg.append('g')
-            .attr('class', 'grid')
-            .attr('transform', `translate(0,${this.props.height})`)
-            .call(
-                d3
-                    .axisBottom(xScale)
-                    .tickSize(-this.props.height)
-                    .tickFormat((a, b) => '')
-            );
-        svg.append('g')
-            .attr('class', 'grid')
-            .call(
-                d3
-                    .axisLeft(yScale)
-                    .tickSize(-this.props.width)
-                    .tickFormat((a, b) => '')
-            );
-        svg.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${this.props.height})`).call(d3.axisBottom(xScale).tickSize(15));
-        svg.append('g').attr('class', 'y-axis').call(d3.axisLeft(yScale));
+        const lineGen = createLineGenerator(xScale, yScale);
+
+        // create x and y grids
+        xGrid(svg.append('g'), this.props.height, xScale);
+        yGrid(svg.append('g'), this.props.width, yScale);
 
         // draw the line
-        svg.append('path').datum(data.data).attr('fill', 'none').attr('stroke', 'rgba(53, 162, 235, 0.5)').attr('stroke-width', 2).attr('class', 'line').attr('d', lineGen);
+        drawLine(svg.append('path'), data.data, lineGen);
 
         // draw the datapoint circles
         svg.selectAll('.circle-d1')
@@ -132,7 +107,7 @@ export class LineChart extends React.Component<LineChartProps> {
         // add all the tooltipContent to the tooltip
         // @action
         const mousemove = action((e: any) => {
-            const bisect = d3.bisector((d: DataPoints) => d.x).left;
+            const bisect = d3.bisector((d: DataPoint) => d.x).left;
             const xPos = d3.pointer(e)[0];
             const x0 = bisect(data.data, xScale.invert(xPos));
             const d0 = data.data[x0];
@@ -145,7 +120,7 @@ export class LineChart extends React.Component<LineChartProps> {
         });
 
         const onPointClick = action((e: any) => {
-            const bisect = d3.bisector((d: DataPoints) => d.x).left;
+            const bisect = d3.bisector((d: DataPoint) => d.x).left;
             const xPos = d3.pointer(e)[0];
             const x0 = bisect(data.data, xScale.invert(xPos));
             const d0 = data.data[x0];
@@ -175,7 +150,7 @@ export class LineChart extends React.Component<LineChartProps> {
 
     render() {
         return (
-            <div id="chart-container">
+            <div ref={this._chartRef} className="chart-container">
                 <span>
                     x: {this._x} y: {this._y}
                     Curr Selected: {this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none'}