stuck on linking

2 files changed, 194 insertions, 122 deletions

diff --git a/src/client/views/nodes/DataViz.tsx b/src/client/views/nodes/DataViz.tsx
deleted file mode 100644
index df4c8f937..000000000
--- a/src/client/views/nodes/DataViz.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { ViewBoxBaseComponent } from '../DocComponent';
-import './DataViz.scss';
-import { FieldView, FieldViewProps } from './FieldView';
-
-@observer
-export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(DataVizBox, fieldKey);
-    }
-
-    render() {
-        return (
-            <div>
-                <div>Hi</div>
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index 07f754637..42bd8a7f6 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -1,27 +1,17 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Doc } from "../../../../fields/Doc";
-import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Title,
-    Tooltip,
-    Legend,
-    InteractionItem,
-    PointElement,
-    LineElement,
-  } from 'chart.js';
-  import { Bar, getDatasetAtEvent, getElementAtEvent, Line } from 'react-chartjs-2';
-import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
-import { action, computed, observable } from "mobx";
-import { Cast, StrCast } from "../../../../fields/Types";
-
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc } from '../../../../fields/Doc';
+// import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, InteractionItem, PointElement, LineElement } from 'chart.js';
+// import { Bar, getDatasetAtEvent, getElementAtEvent, Line } from 'react-chartjs-2';
+import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';
+import { action, computed, observable } from 'mobx';
+import { Cast, StrCast } from '../../../../fields/Types';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
 
 export interface ChartBoxProps {
     rootDoc: Doc;
-    pairs: {x: number, y:number}[];
+    pairs: { x: number; y: number }[];
 }
 
 export interface ChartJsData {
@@ -30,85 +20,127 @@ export interface ChartJsData {
         label: string;
         data: number[];
         backgroundColor: string[];
-    }[] 
+    }[];
 }
 
-ChartJS.register(
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Title,
-    Tooltip,
-    Legend,
-    PointElement,
-    LineElement
-  );
-  
+// ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement, LineElement);
+
 const primaryColor = 'rgba(53, 162, 235, 0.5)';
 const selectedColor = 'rgba(255, 99, 132, 0.5)';
 
+const data = [
+    {
+        name: 'Page A',
+        uv: 4000,
+        pv: 2400,
+        amt: 2400,
+    },
+    {
+        name: 'Page B',
+        uv: 3000,
+        pv: 1398,
+        amt: 2210,
+    },
+    {
+        name: 'Page C',
+        uv: 2000,
+        pv: 9800,
+        amt: 2290,
+    },
+    {
+        name: 'Page D',
+        uv: 2780,
+        pv: 3908,
+        amt: 2000,
+    },
+    {
+        name: 'Page E',
+        uv: 1890,
+        pv: 4800,
+        amt: 2181,
+    },
+    {
+        name: 'Page F',
+        uv: 2390,
+        pv: 3800,
+        amt: 2500,
+    },
+    {
+        name: 'Page G',
+        uv: 3490,
+        pv: 4300,
+        amt: 2100,
+    },
+];
+
+export interface RechartData {
+    name: string | number;
+    y: number;
+}
+
 @observer
 export class ChartBox extends React.Component<ChartBoxProps> {
-    private _chartRef: any = React.createRef<ChartJSOrUndefined<"bar", number[], string>>();
-
-    @observable private _prevColor: string | undefined= undefined;
-    @observable private _prevIndex: { dIndex: number, index: number} | undefined = undefined;
-    @observable private _chartJsData: ChartJsData | undefined= undefined;
+    @observable private _chartData: RechartData[] = [];
 
     @computed get currView() {
         if (this.props.rootDoc._dataVizView) {
             return StrCast(this.props.rootDoc._currChartView);
         } else {
-            return "table";
+            return 'table';
         }
     }
 
     constructor(props: any) {
         super(props);
         if (!this.props.rootDoc._currChartView) {
-            this.props.rootDoc._currChartView = "bar";
-        }
-    }
-
-    @computed get options() {
-        return {
-            responsive: true,
-            plugins: {
-                legend: {
-                        position: 'top' as const,
-                    },
-                    title: {
-                        display: true,
-                        text: 'Bar Chart',
-                    },
-            },
+            this.props.rootDoc._currChartView = 'bar';
         }
     }
 
     @action
-    generateChartJsData() {
+    generateChartData() {
         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));
+            this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData));
             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;
+
+        // generate the chart data according to the RechartData type from the pairs prop
+        const chartData: RechartData[] = [];
+        this.props.pairs.forEach(pair => {
+            chartData.push({
+                name: pair.x,
+                y: pair.y,
+            });
+        });
+
+        this._chartData = chartData;
     }
-    
+
+    // @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.generateChartJsData();
+        this.generateChartData();
     }
 
     @action
@@ -117,46 +149,106 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         e.stopPropagation();
         console.log(e.currentTarget.value);
         this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
-    }
+    };
 
-    @action
-    onClick = (e: any) => {
-        e.preventDefault();
-        if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
-        if (!this._chartJsData) return;
-        if (this._prevIndex && this._prevColor) {
-            this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
+    // @action
+    // onClick = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
+    //     e.preventDefault();
+    //     console.log(e);
+
+    //     if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
+    //     if (!this._chartJsData) return;
+    //     if (this._prevIndex && this._prevColor) {
+    //         this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
+    //     }
+
+    //     const currSelected = getElementAtEvent(this._chartRef.current, e);
+    //     // TODO - nda: the currSelected might not have the updated color variables so look into that
+    //     this._currSelected = currSelected;
+    //     const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
+    //     this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
+    //     this._prevColor = this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index];
+    //     this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
+    //     this._chartRef.current.update();
+    //     // stringify this._chartJsData
+    //     const strData = JSON.stringify(this._chartJsData);
+    //     this.props.rootDoc._chartData = strData;
+    //     this.props.rootDoc._prevColor = this._prevColor;
+    //     this.props.rootDoc._prevIndex = JSON.stringify(this._prevIndex);
+    // };
+
+    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;
+        // }
+    };
 
-        const currSelected = getElementAtEvent(this._chartRef.current, e);
-        const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
-        this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
-        this._prevColor = this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index];
-        this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
-        this._chartRef.current.update();
-        // stringify this._chartJsData
-        const strData = JSON.stringify(this._chartJsData);
-        this.props.rootDoc._chartData = strData;
-        this.props.rootDoc._prevColor = this._prevColor;
-        this.props.rootDoc._prevIndex = JSON.stringify(this._prevIndex);
+    handleDotClick = (e: any) => {
+        console.log(e);
+    };
+
+    // 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._chartJsData) {
+        if (this.props.pairs && this._chartData.length > 0) {
             return (
                 <div>
                     <div>
-                        {this.props.rootDoc._currChartView == "line" ? 
-                            (<Line ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />) : 
-                            (<Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />)
-                        }
+                        {/*{this.props.rootDoc._currChartView == 'line' ? (
+                            <Line ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
+                        ) : (
+                            <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
+                        )} */}
+                        {this.reLineChart}
                     </div>
-                    <button onClick={(e) => this.onClickChangeChart(e)} value="line">Line</button>
-                    <button onClick={(e) => this.onClickChangeChart(e)} value="bar">Bar</button>
+                    <button onClick={e => this.onClickChangeChart(e)} value="line">
+                        Line
+                    </button>
+                    <button onClick={e => this.onClickChangeChart(e)} value="bar">
+                        Bar
+                    </button>
                 </div>
-            )
+            );
         } else {
-            return <div></div>
+            return <div></div>;
         }
     }
-}
\ No newline at end of file
+}