1 files changed, 144 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
new file mode 100644
index 000000000..c229e5471
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -0,0 +1,144 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc } from '../../../../fields/Doc';
+import { action, computed, observable } from 'mobx';
+import { NumCast, StrCast } from '../../../../fields/Types';
+import { LineChart } from './components/LineChart';
+import { Chart, ChartData } from './ChartInterface';
+
+export interface ChartBoxProps {
+    rootDoc: Doc;
+    dataDoc: Doc;
+    pairs: { x: number; y: number }[];
+    setChartBox: (chartBox: ChartBox) => void;
+    getAnchor: () => Doc;
+}
+
+export interface DataPoint {
+    x: number;
+    y: number;
+}
+
+@observer
+export class ChartBox extends React.Component<ChartBoxProps> {
+    @observable private _chartData: ChartData | undefined = undefined;
+    private currChart: Chart | undefined;
+
+    @computed get currView() {
+        if (this.props.rootDoc._dataVizView) {
+            return StrCast(this.props.rootDoc._currChartView);
+        } else {
+            return 'table';
+        }
+    }
+
+    constructor(props: any) {
+        super(props);
+        if (!this.props.rootDoc._currChartView) {
+            this.props.rootDoc._currChartView = 'bar';
+        }
+    }
+
+    setCurrChart = (chart: Chart) => {
+        this.currChart = chart;
+    };
+
+    @action
+    generateChartData() {
+        if (this.props.rootDoc._chartData) {
+            this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData));
+            return;
+        }
+
+        const data: ChartData = {
+            xLabel: '',
+            yLabel: '',
+            data: [[]],
+        };
+
+        if (this.props.pairs && this.props.pairs.length > 0) {
+            data.xLabel = 'x';
+            data.yLabel = 'y';
+            this.props.pairs.forEach(pair => {
+                // TODO: nda - add actual support for multiple sets of data
+                data.data[0].push({ x: pair.x, y: pair.y });
+            });
+        }
+
+        this._chartData = data;
+        this.props.rootDoc._chartData = JSON.stringify(data);
+    }
+
+    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
+    onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log(e.currentTarget.value);
+        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
+
+        // 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();
+    }
+
+    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>;
+        }
+    }
+}