got basic numerical line chart working

2 files changed, 19 insertions, 10 deletions

diff --git a/src/client/views/nodes/DataVizBox/LineChart.tsx b/src/client/views/nodes/DataVizBox/LineChart.tsx
index 8a757866e..42e9da3d7 100644
--- a/src/client/views/nodes/DataVizBox/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/LineChart.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ChartData, DataPoint } from './ChartBox';
 // import d3
 import * as d3 from 'd3';
-import { minMaxRange, createLineGenerator, xGrid, yGrid, drawLine, scaleCreator } from './utils/D3Utils';
+import { minMaxRange, createLineGenerator, xGrid, yGrid, drawLine, xAxisCreator, yAxisCreator, scaleCreatorNumerical, scaleCreatorCategorical } from './utils/D3Utils';
 
 interface LineChartProps {
     data: ChartData;
@@ -45,8 +45,8 @@ export class LineChart extends React.Component<LineChartProps> {
 
     drawChart() {
         // clearing tooltip
-        d3.select('#chart-container').select('svg').remove();
-        d3.select('#chart-container').select('.tooltip').remove();
+        d3.select(this._chartRef.current).select('svg').remove();
+        d3.select(this._chartRef.current).select('.tooltip').remove();
 
         const margin = { top: 50, right: 50, bottom: 50, left: 50 };
         const { data } = this.props;
@@ -63,9 +63,9 @@ export class LineChart extends React.Component<LineChartProps> {
             // TODO: nda - error handle
             return;
         }
+        const xScale = scaleCreatorNumerical(xMin, xMax, 0, this.props.width);
         // adding x axis
-        const xScale = scaleCreator(xMin, xMax, 0, this.props.width);
-        const yScale = scaleCreator(0, yMax, this.props.height, 0);
+        const yScale = scaleCreatorNumerical(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
@@ -74,6 +74,8 @@ export class LineChart extends React.Component<LineChartProps> {
         // create x and y grids
         xGrid(svg.append('g'), this.props.height, xScale);
         yGrid(svg.append('g'), this.props.width, yScale);
+        xAxisCreator(svg.append('g'), this.props.height, xScale);
+        yAxisCreator(svg.append('g'), this.props.width, yScale);
 
         // draw the line
         drawLine(svg.append('path'), data.data, lineGen);
@@ -94,7 +96,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const focus = svg.append('g').attr('class', 'focus').style('display', 'none');
         focus.append('circle').attr('r', 5).attr('class', 'circle');
         const tooltip = d3
-            .select('#chart-container')
+            .select(this._chartRef.current)
             .append('div')
             .attr('class', 'tooltip')
             .style('opacity', 0)
diff --git a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
index 285298472..90ec35f5c 100644
--- a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
+++ b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
@@ -1,4 +1,4 @@
-import d3 from 'd3';
+import * as d3 from 'd3';
 import { DataPoint } from '../ChartBox';
 
 // TODO: nda - implement function that can handle range for strings
@@ -13,7 +13,13 @@ export const minMaxRange = (dataPts: DataPoint[]) => {
     return { xMin, xMax, yMin, yMax };
 };
 
-export const scaleCreator = (domA: number, domB: number, rangeA: number, rangeB: number) => {
+export const scaleCreatorCategorical = (labels: string[], range: number[]) => {
+    const scale = d3.scaleBand().domain(labels).range(range);
+
+    return scale;
+};
+
+export const scaleCreatorNumerical = (domA: number, domB: number, rangeA: number, rangeB: number) => {
     return d3.scaleLinear().domain([domA, domB]).range([rangeA, rangeB]);
 };
 
@@ -26,11 +32,12 @@ export const createLineGenerator = (xScale: d3.ScaleLinear<number, number, never
         .curve(d3.curveMonotoneX);
 };
 
-export const xAxisCreator = (g: d3.Selection<SVGGElement, unknown, HTMLElement, any>, height: number, xScale: d3.ScaleLinear<number, number, never>) => {
+export const xAxisCreator = (g: d3.Selection<SVGGElement, unknown, null, undefined>, height: number, xScale: d3.ScaleLinear<number, number, never>) => {
+    console.log('x axis creator being called');
     g.attr('class', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickSize(15));
 };
 
-export const yAxisCreator = (g: d3.Selection<SVGGElement, unknown, HTMLElement, any>, width: number, yScale: d3.ScaleLinear<number, number, never>) => {
+export const yAxisCreator = (g: d3.Selection<SVGGElement, unknown, null, undefined>, width: number, yScale: d3.ScaleLinear<number, number, never>) => {
     g.attr('class', 'y-axis').call(d3.axisLeft(yScale));
 };