1 files changed, 27 insertions, 32 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index a03aaae31..92ad76e61 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -1,18 +1,18 @@
 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 { Doc, HeightSym } from '../../../../fields/Doc';
 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 { Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
 import { LineChart } from './LineChart';
 
 export interface ChartBoxProps {
     rootDoc: Doc;
+    dataDoc: Doc;
     pairs: { x: number; y: number }[];
+    setChartBox: (chartBox: ChartBox) => void;
+    getAnchor: () => Doc;
 }
 
 const primaryColor = 'rgba(53, 162, 235, 0.5)';
@@ -38,6 +38,7 @@ export interface ChartData {
 @observer
 export class ChartBox extends React.Component<ChartBoxProps> {
     @observable private _chartData: ChartData | undefined = undefined;
+    @observable private currChart: LineChart | undefined;
 
     @computed get currView() {
         if (this.props.rootDoc._dataVizView) {
@@ -54,6 +55,10 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         }
     }
 
+    setCurrChart(chart: LineChart | undefined) {
+        // this.currChart = chart;
+    }
+
     @action
     generateChartData() {
         if (this.props.rootDoc._chartData) {
@@ -107,6 +112,11 @@ export class ChartBox extends React.Component<ChartBoxProps> {
     componentDidMount() {
         // this.generateChartJsData();
         this.generateChartData();
+        // setting timeout to allow rerender cycle of the actual chart tof inish
+        setTimeout(() => {
+            this.props.setChartBox(this);
+        });
+        // this.props.setChartBox(this);
     }
 
     @action
@@ -117,32 +127,6 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
     };
 
-    // @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);
 
@@ -158,10 +142,16 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         // }
     };
 
+    scrollFocus(doc: Doc, smooth: boolean) {}
+
     handleDotClick = (e: any) => {
         console.log(e);
     };
 
+    _getAnchor() {
+        return this.currChart?._getAnchor();
+    }
+
     // handleTextClick = (e: any) => {
     //     console.log(e);
     // }
@@ -195,6 +185,11 @@ export class ChartBox extends React.Component<ChartBoxProps> {
 
     render() {
         if (this.props.pairs && this._chartData) {
+            let width = NumCast(this.props.rootDoc._width);
+            width = width * 0.7;
+            let height = NumCast(this.props.rootDoc._height);
+            height = height * 0.7;
+            console.log(width, height);
             return (
                 <div>
                     <div>
@@ -204,7 +199,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 width={500} height={300} data={this._chartData} />
+                        <LineChart width={width} height={height} data={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