From 0ae9be249f78ce87301cb833ca7997f5d23ae19c Mon Sep 17 00:00:00 2001
From: Naafiyan Ahmed <naafiyan@gmail.com>
Date: Thu, 14 Jul 2022 17:11:18 -0400
Subject: got basic numerical line chart working

---
 src/client/views/nodes/DataVizBox/utils/D3Utils.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/utils')

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));
 };
 
-- 
cgit v1.2.3-70-g09d2