1 files changed, 90 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
new file mode 100644
index 000000000..592723ee9
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -0,0 +1,90 @@
+import { action, computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { StrCast } from "../../../../fields/Types";
+import { ViewBoxBaseComponent } from "../../DocComponent";
+import { FieldViewProps, FieldView } from "../FieldView";
+import "./DataVizBox.scss";
+import { HistogramBox } from "./HistogramBox";
+import { TableBox } from "./TableBox";
+
+enum DataVizView {
+    TABLE = "table",
+    HISTOGRAM= "histogram"
+}
+
+
+@observer
+export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
+    @observable private pairs: {x: number, y:number}[] = [{x: 1, y:2}];
+
+    // TODO: nda - make this use enum values instead
+    // @observable private currView: DataVizView = DataVizView.TABLE;
+    @computed get currView() {
+        if (this.rootDoc._dataVizView) {
+            return StrCast(this.rootDoc._dataVizView);
+        } else {
+            return "table";
+        }
+    }
+
+    constructor(props: any) {
+        super(props);
+        if (!this.rootDoc._dataVizView) {
+            // TODO: nda - this might not always want to default to "table"
+            this.rootDoc._dataVizView = "table";
+        }
+    }
+
+    public static LayoutString(fieldKey: string) {  return FieldView.LayoutString(DataVizBox, fieldKey);  }
+
+    @action
+    private createPairs() {
+        const xVals: number[] = [0, 1, 2, 3, 4, 5];
+        // const yVals: number[] = [10, 20, 30, 40, 50, 60];
+        const yVals: number[] = [1, 2, 3, 4, 5, 6];
+        let pairs: {
+            x: number,
+            y:number
+        }[] = [];
+        if (xVals.length != yVals.length) return pairs;
+        for (let i = 0; i < xVals.length; i++) {
+            pairs.push({x: xVals[i], y: yVals[i]});
+        }
+        this.pairs = pairs;
+        return pairs;
+    }
+
+    @computed get selectView() {
+        switch(this.currView) {
+            case "table":
+                return (<TableBox pairs={this.pairs} />)
+            case "histogram":
+                return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)                
+        }
+    }
+
+    @computed get pairVals() {
+        return this.createPairs();
+    }
+
+    componentDidMount() {
+        this.createPairs();
+    }
+
+    // handle changing the view using a button
+    @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.rootDoc._dataVizView = this.currView == "table" ? "histogram" : "table";
+    }
+
+    render() {
+        return (
+            <div className="dataViz">
+                <button onClick={(e) => this.changeViewHandler(e)}>Change View</button>
+                {this.selectView}
+            </div>
+        );
+    }
+}
+\ No newline at end of file