1 files changed, 47 insertions, 20 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 592723ee9..0c1063e0c 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,9 +1,12 @@
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { StrCast } from "../../../../fields/Types";
+import { Cast, StrCast } from "../../../../fields/Types";
+import { CsvField } from "../../../../fields/URLField";
+import { Utils } from "../../../../Utils";
 import { ViewBoxBaseComponent } from "../../DocComponent";
 import { FieldViewProps, FieldView } from "../FieldView";
+import { ChartBox } from "./ChartBox";
 import "./DataVizBox.scss";
 import { HistogramBox } from "./HistogramBox";
 import { TableBox } from "./TableBox";
@@ -16,7 +19,7 @@ enum DataVizView {
 
 @observer
 export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    @observable private pairs: {x: number, y:number}[] = [{x: 1, y:2}];
+    @observable private pairs: {x: number, y:number}[] = [];
 
     // TODO: nda - make this use enum values instead
     // @observable private currView: DataVizView = DataVizView.TABLE;
@@ -39,39 +42,63 @@ export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
     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;
+    private async 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;
+        // this.pairs = await this.fetchData();
     }
 
     @computed get selectView() {
         switch(this.currView) {
             case "table":
-                return (<TableBox pairs={this.pairs} />)
+                return (<TableBox pairs={this.pairs} />);
             case "histogram":
-                return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)                
+                return (<ChartBox rootDoc={this.rootDoc} pairs={this.pairs}/>);
+            // case "histogram":
+            //     return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)                
         }
     }
 
     @computed get pairVals() {
-        return this.createPairs();
+        return fetch("/csvData?uri=" + this.dataUrl?.url.href).then(res => res.json());
     }
 
+    @computed get dataUrl() { return Cast(this.dataDoc[this.fieldKey], CsvField) }
+
     componentDidMount() {
-        this.createPairs();
+        // this.createPairs();
+        this.fetchData();
     }
 
+    // async fetchData() {
+    //     console.log(Cast(this.dataDoc[this.fieldKey], CsvField));
+    //     const uri = this.dataUrl?.url.href;
+    //     console.log(uri);
+    //     const res = await fetch("/csvData?uri=" + uri);
+    //     return await res.json();
+    // }
+    
+    fetchData() {
+        const uri = this.dataUrl?.url.href;
+        fetch("/csvData?uri=" + uri).then(
+            res => res.json().then(
+                action(res => {
+                    this.pairs = res;
+                })
+            ))        
+    }
+
+
     // handle changing the view using a button
     @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
         e.preventDefault();