Task2 completed

0001-Move-python-files-to-datafeed-dir.patch

@@ -0,0 +1,28 @@
+From 3022e1f02670f8336f457078532f98c50f77496e Mon Sep 17 00:00:00 2001
+From: Joe Ferrer <[email protected]>
+Date: Wed, 1 Mar 2023 00:45:20 +1100
+Subject: [PATCH] Move python files to datafeed dir
+
+---
+ requirements.txt => datafeed/requirements.txt | 0
+ server.py => datafeed/server3.py              | 0
+ datafeed/test.csv                             | 0
+ 3 files changed, 0 insertions(+), 0 deletions(-)
+ rename requirements.txt => datafeed/requirements.txt (100%)
+ rename server.py => datafeed/server3.py (100%)
+ create mode 100644 datafeed/test.csv
+
+diff --git a/requirements.txt b/datafeed/requirements.txt
+similarity index 100%
+rename from requirements.txt
+rename to datafeed/requirements.txt
+diff --git a/server.py b/datafeed/server3.py
+similarity index 100%
+rename from server.py
+rename to datafeed/server3.py
+diff --git a/datafeed/test.csv b/datafeed/test.csv
+new file mode 100644
+index 0000000..e69de29
+-- 
+2.43.0.windows.1
+

src/App.tsx

@@ -1,13 +1,14 @@
-import React, { Component } from 'react';
-import DataStreamer, { ServerRespond } from './DataStreamer';
-import Graph from './Graph';
-import './App.css';
+import React, { Component } from "react";
+import DataStreamer, { ServerRespond } from "./DataStreamer";
+import Graph from "./Graph";
+import "./App.css";
 
 /**
  * State declaration for <App />
  */
 interface IState {
-  data: ServerRespond[],
+  data: ServerRespond[];
+  showGraph: boolean;
 }
 
 /**
@@ -22,25 +23,38 @@ 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[]) => {
+        // 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],
+          showGraph: true,
+        });
+      });
+      x++;
+      if (x > 1000) {
+        clearInterval(interval);
+      }
+    }, 100);
   }
 
   /**
@@ -49,25 +63,25 @@ class App extends Component<{}, IState> {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          Bank & Merge Co Task 2
-        </header>
+        <header className="App-header">Bank & Merge Co Task 2</header>
         <div className="App-content">
-          <button className="btn btn-primary Stream-button"
+          <button
+            className="btn btn-primary Stream-button"
             // when button is click, our react app tries to request
             // new data from the server.
             // As part of your task, update the getDataFromServer() function
             // to keep requesting the data every 100ms until the app is closed
             // or the server does not return anymore data.
-            onClick={() => {this.getDataFromServer()}}>
+            onClick={() => {
+              this.getDataFromServer();
+            }}
+          >
             Start Streaming Data
           </button>
-          <div className="Graph">
-            {this.renderGraph()}
-          </div>
+          <div className="Graph">{this.renderGraph()}</div>
         </div>
       </div>
-    )
+    );
   }
 }
 

src/Graph.tsx

@@ -1,21 +1,21 @@
-import React, { Component } from 'react';
-import { Table } from '@finos/perspective';
-import { ServerRespond } from './DataStreamer';
-import './Graph.css';
+import React, { Component } from "react";
+import { Table } from "@finos/perspective";
+import { ServerRespond } from "./DataStreamer";
+import "./Graph.css";
 
 /**
  * Props declaration for <Graph />
  */
 interface IProps {
-  data: ServerRespond[],
+  data: ServerRespond[];
 }
 
 /**
  * Perspective library adds load to HTMLElement prototype.
  * This interface acts as a wrapper for Typescript compiler.
  */
-interface PerspectiveViewerElement {
-  load: (table: Table) => void,
+interface PerspectiveViewerElement extends HTMLElement {
+  load: (table: Table) => void;
 }
 
 /**
@@ -27,20 +27,38 @@ class Graph extends Component<IProps, {}> {
   table: Table | undefined;
 
   render() {
-    return React.createElement('perspective-viewer');
+    return React.createElement("perspective-viewer");
   }
 
   componentDidMount() {
     // Get element to attach the table from the DOM.
-    const elem: PerspectiveViewerElement = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
+    const elem: PerspectiveViewerElement = (document.getElementsByTagName(
+      "perspective-viewer"
+    )[0] as unknown) as PerspectiveViewerElement;
 
     const schema = {
-      stock: 'string',
-      top_ask_price: 'float',
-      top_bid_price: 'float',
-      timestamp: 'date',
+      stock: "string",
+      top_ask_price: "float",
+      top_bid_price: "float",
+      timestamp: "date",
     };
 
+    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"
+      }
+      `
+    );
+
     if (window.perspective && window.perspective.worker()) {
       this.table = window.perspective.worker().table(schema);
     }
@@ -57,15 +75,17 @@ class Graph extends Component<IProps, {}> {
     if (this.table) {
       // As part of the task, you need to fix the way we update the data props to
       // avoid inserting duplicated entries into Perspective table again.
-      this.table.update(this.props.data.map((el: any) => {
-        // Format the data from ServerRespond to the schema
-        return {
-          stock: el.stock,
-          top_ask_price: el.top_ask && el.top_ask.price || 0,
-          top_bid_price: el.top_bid && el.top_bid.price || 0,
-          timestamp: el.timestamp,
-        };
-      }));
+      this.table.update(
+        this.props.data.map((el: any) => {
+          // Format the data from ServerRespond to the schema
+          return {
+            stock: el.stock,
+            top_ask_price: (el.top_ask && el.top_ask.price) || 0,
+            top_bid_price: (el.top_bid && el.top_bid.price) || 0,
+            timestamp: el.timestamp,
+          };
+        })
+      );
     }
   }
 }