modified: src/App.tsx&Graph.tsx

src/App.tsx

@@ -8,6 +8,7 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  showGraph : boolean,
 }
 
 /**
@@ -22,25 +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() {
+    if (this.state.showGraph){
     return (<Graph data={this.state.data}/>)
+    }
   }
 
+
   /**
    * Get new data from server and update the state with the new data
    */
   getDataFromServer() {
+    let x = 0;
+    const interval = setInterval(() => {
     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] });
+      this.setState({
+        data: serverResponds,
+        showGraph: true,
+      });
     });
+    x++;
+    if (x > 1000) {
+      clearInterval(interval);
+    }
+    },100);
   }
 
   /**

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,
 }
 
@@ -32,7 +32,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',
@@ -49,6 +49,13 @@ class Graph extends Component<IProps, {}> {
 
       // Add more Perspective configurations here.
       elem.load(this.table);
+      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"}');
+       }
     }
   }
 
@@ -71,3 +78,7 @@ class Graph extends Component<IProps, {}> {
 }
 
 export default Graph;
+function componentDidUpdate() {
+  throw new Error('Function not implemented.');
+}
+