Updated Forage Task 2

package.json

@@ -13,9 +13,9 @@
     "@types/react-dom": "^16.0.11",
     "bootstrap": "^4.2.1",
     "puppeteer": "^1.19.0",
-    "react": "^16.9.0",
+    "react": "^16.14.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "2.1.3"
+    "react-scripts": "^3.0.1"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",

src/App.tsx

@@ -8,6 +8,7 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  showGraph:boolean
 }
 
 /**
@@ -22,26 +23,37 @@ class App extends Component<{}, IState> {
       // data saves the server responds.
       // We use this state to parse data down to the child element (Graph) as element property
       data: [],
+      showGraph:false
     };
   }
 
   /**
    * Render Graph react component with state.data parse as property data
    */
   renderGraph() {
-    return (<Graph data={this.state.data}/>)
-  }
+    if(this.state.showGraph){
+      return (<Graph data={this.state.data}/>)
+    }
+}
 
   /**
    * Get new data from server and update the state with the new data
    */
   getDataFromServer() {
-    DataStreamer.getData((serverResponds: ServerRespond[]) => {
-      // Update the state by creating a new array of data that consists of
-      // Previous data in the state and the new data from server
-      this.setState({ data: [...this.state.data, ...serverResponds] });
-    });
-  }
+    let x = 0;
+        const interval = setInterval(() => {
+            DataStreamer.getData((serverResponds: ServerRespond[]) => {
+                this.setState({
+                    data: serverResponds,
+                    showGraph: true
+                });
+            });
+            x++;
+            if (x > 1000) {
+                clearInterval(interval);
+            }
+        }, 100);
+}
 
   /**
    * Render the App react component

src/Graph.tsx

@@ -14,7 +14,7 @@ interface IProps {
  * Perspective library adds load to HTMLElement prototype.
  * This interface acts as a wrapper for Typescript compiler.
  */
-interface PerspectiveViewerElement {
+interface PerspectiveViewerElement extends HTMLElement {
   load: (table: Table) => void,
 }
 
@@ -23,6 +23,7 @@ interface PerspectiveViewerElement {
  * parsed from its parent through data property.
  */
 class Graph extends Component<IProps, {}> {
+  [x: string]: any;
   // Perspective table
   table: Table | undefined;
 
@@ -32,7 +33,7 @@ class Graph extends Component<IProps, {}> {
 
   componentDidMount() {
     // Get element to attach the table from the DOM.
-    const elem: PerspectiveViewerElement = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
+    const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
 
     const schema = {
       stock: 'string',
@@ -46,6 +47,17 @@ class Graph extends Component<IProps, {}> {
     }
     if (this.table) {
       // Load the `table` in the `<perspective-viewer>` DOM reference.
+      elem.setAttribute('view','y_line');
+      elem.setAttribute('column_pivots','["stock"]');
+      elem.setAttribute('row_pivots','["timestamp"]');
+      elem.setAttribute('columns','["top_ask_price"]');
+      elem.setAttribute('aggregates',`
+      {
+        "stock": "distinct count",
+        "top_ask_price": "avg",
+        "top_bid_price": "avg",
+        "timestamp": "distinct count",
+      }`);
 
       // Add more Perspective configurations here.
       elem.load(this.table);