cleaned up code and moved files around

1 files changed, 7 insertions, 94 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index f2450bc7c..a2e4fd73c 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -1,11 +1,10 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, HeightSym } from '../../../../fields/Doc';
-import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';
 import { action, computed, observable } from 'mobx';
 import { Cast, NumCast, StrCast } from '../../../../fields/Types';
-import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
-import { LineChart } from './LineChart';
+import { LineChart } from './components/LineChart';
+import { Chart, ChartData } from './ChartInterface';
 
 export interface ChartBoxProps {
     rootDoc: Doc;
@@ -15,26 +14,11 @@ export interface ChartBoxProps {
     getAnchor: () => Doc;
 }
 
-const primaryColor = 'rgba(53, 162, 235, 0.5)';
-const selectedColor = 'rgba(255, 99, 132, 0.5)';
-
-export interface RechartData {
-    name: string | number;
-    y: number;
-}
-
 export interface DataPoint {
     x: number;
     y: number;
 }
 
-export interface ChartData {
-    xLabel: string;
-    yLabel: string;
-    data: DataPoint[];
-    tooltipContent: (data: DataPoint) => string;
-}
-
 @observer
 export class ChartBox extends React.Component<ChartBoxProps> {
     @observable private _chartData: ChartData | undefined = undefined;
@@ -55,7 +39,7 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         }
     }
 
-    setCurrChart(chart: LineChart | undefined) {
+    setCurrChart(chart: Chart | undefined) {
         // this.currChart = chart;
     }
 
@@ -69,17 +53,15 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         const data: ChartData = {
             xLabel: '',
             yLabel: '',
-            data: [],
-            tooltipContent: (data: DataPoint) => {
-                return `<b>x: ${data.x} y: ${data.y}</b>`;
-            },
+            data: [[]],
         };
 
         if (this.props.pairs && this.props.pairs.length > 0) {
             data.xLabel = 'x';
             data.yLabel = 'y';
             this.props.pairs.forEach(pair => {
-                data.data.push({ x: pair.x, y: pair.y });
+                // TODO: nda - add actual support for multiple sets of data
+                data.data[0].push({ x: pair.x, y: pair.y });
             });
         }
 
@@ -87,30 +69,7 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._chartData = JSON.stringify(data);
     }
 
-    // @action
-    // generateChartJsData() {
-    //     if (this.props.rootDoc._chartData) {
-    //         // parse the string into a json object
-    //         this._chartJsData = JSON.parse(StrCast(this.props.rootDoc._chartData));
-    //         this._prevColor = StrCast(this.props.rootDoc._prevColor);
-    //         this._prevIndex = JSON.parse(StrCast(this.props.rootDoc._prevIndex));
-    //         return;
-    //     }
-    //     const labels = this.props.pairs.map(p => p.x);
-    //     const dataset = {
-    //         label: 'Dataset 1',
-    //         data: this.props.pairs.map(p => p.y),
-    //         backgroundColor: this.props.pairs.map(p => primaryColor),
-    //     };
-    //     const data = {
-    //         labels,
-    //         datasets: [dataset],
-    //     };
-    //     this._chartJsData = data;
-    // }
-
     componentDidMount() {
-        // this.generateChartJsData();
         this.generateChartData();
         // setting timeout to allow rerender cycle of the actual chart tof inish
         setTimeout(() => {
@@ -127,21 +86,6 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
     };
 
-    onMouseMove = (e: CategoricalChartState) => {
-        console.log(e);
-
-        // pops up at 526 when it should be at 263
-        // at 100%scale it pops up at 526 but mouse shows 263 at 50% scale
-        if (e.chartX && e.chartY) {
-            e.chartX += 263;
-            e.chartY += 263;
-        }
-        // if (e.chartX && e.chartY) {
-        //     e.chartX -= 200;
-        //     e.chartY -= 200;
-        // }
-    };
-
     scrollFocus(doc: Doc, smooth: boolean) {}
 
     handleDotClick = (e: any) => {
@@ -152,37 +96,6 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         return this.currChart?._getAnchor();
     }
 
-    // handleTextClick = (e: any) => {
-    //     console.log(e);
-    // }
-
-    // @computed get reLineChart() {
-    //     return (
-    //         // <ResponsiveContainer width="80%" height="80%">
-    //         <LineChart
-    //             width={500}
-    //             height={300}
-    //             data={this._chartData}
-    //             margin={{
-    //                 top: 5,
-    //                 right: 30,
-    //                 left: 20,
-    //                 bottom: 5,
-    //             }}
-    //             onMouseDown={e => console.log(e)}
-    //             onMouseMove={e => this.onMouseMove(e)}>
-    //             <CartesianGrid strokeDasharray="3 3" />
-    //             <XAxis dataKey="name" onMouseDown={e => console.log(e)} />
-    //             <YAxis />
-    //             <Tooltip />
-    //             <Legend />
-    //             <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} />
-    //             {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
-    //         </LineChart>
-    //         // </ResponsiveContainer>
-    //     );
-    // }
-
     render() {
         if (this.props.pairs && this._chartData) {
             let width = NumCast(this.props.rootDoc._width);
@@ -200,7 +113,7 @@ export class ChartBox extends React.Component<ChartBoxProps> {
                             <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
                         )} */}
                         {/* {this.reLineChart} */}
-                        <LineChart margin={margin} width={width} height={height} data={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />
+                        <LineChart margin={margin} width={width} height={height} chartData={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />
                     </div>
                     <button onClick={e => this.onClickChangeChart(e)} value="line">
                         Line