1 files changed, 9 insertions, 53 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index c229e5471..ee577b9fd 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -5,10 +5,12 @@ import { action, computed, observable } from 'mobx';
 import { NumCast, StrCast } from '../../../../fields/Types';
 import { LineChart } from './components/LineChart';
 import { Chart, ChartData } from './ChartInterface';
+import { PinProps } from '../trails';
 
 export interface ChartBoxProps {
     rootDoc: Doc;
     dataDoc: Doc;
+    height: number;
     pairs: { x: number; y: number }[];
     setChartBox: (chartBox: ChartBox) => void;
     getAnchor: () => Doc;
@@ -71,11 +73,7 @@ export class ChartBox extends React.Component<ChartBoxProps> {
 
     componentDidMount = () => {
         this.generateChartData();
-        // setting timeout to allow rerender cycle of the actual chart tof inish
-        // setTimeout(() => {
         this.props.setChartBox(this);
-        // });
-        // this.props.setChartBox(this);
     };
 
     @action
@@ -86,59 +84,17 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
     };
 
-    scrollFocus(doc: Doc, smooth: boolean): number | undefined {
-        // if x and y exist on this
-        // then highlight/focus the x and y position (datapoint)
-        // highlight for a few seconds and then remove (set a timer to unhighlight after a period of time,
-        //  to be consistent, use 5 seconds and highlight color is orange)
-        // if x and y don't exist => link to whole doc => dash will take care of focusing on the entire doc
-        // return value is how long this action takes
-        //  undefined => immediately, 0 => introduces a timeout
-        //  number in ms => won't do any of the focus or call the automated highlighting thing until this timeout expires
-        //      in this case probably number in ms doesn't matter
+    getAnchor = (pinProps?: PinProps) => this.currChart?._getAnchor(pinProps);
 
-        // for now could just update the currSelected in linechart to be what doc.x and doc.y
-
-        if (this.currChart && doc.x && doc.y) {
-            // update curr selected
-            this.currChart.setCurrSelected(Number(doc.x), Number(doc.y));
-        }
-        return 0;
-    }
-
-    _getAnchor() {
-        return this.currChart?._getAnchor();
-    }
+    restoreView = (data: Doc) => this.currChart?.restoreView(data);
 
     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);
-            const margin = { top: 50, right: 50, bottom: 50, left: 50 };
-            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.reLineChart} */}
-                        <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
-                    </button>
-                    <button onClick={e => this.onClickChangeChart(e)} value="bar">
-                        Bar
-                    </button>
-                </div>
-            );
-        } else {
-            return <div></div>;
+            const width = NumCast(this.props.rootDoc._width) * 0.9;
+            const height = this.props.height * 0.9;
+            const margin = { top: 10, right: 50, bottom: 50, left: 50 };
+            return <LineChart margin={margin} width={width} height={height} chartData={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />;
         }
+        return <div />;
     }
 }