multi_commit.patch

From 3022e1f02670f8336f457078532f98c50f77496e Mon Sep 17 00:00:00 2001
From: Joe Ferrer <joe@theforage.com>
Date: Wed, 1 Mar 2023 00:45:20 +1100
Subject: [PATCH 1/2] 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


From 1f185171e39223a02b337207a0214650f72e81d8 Mon Sep 17 00:00:00 2001
From: Cicero Vieira <calmeidavieira@gmail.com>
Date: Tue, 23 Jan 2024 22:02:43 -0500
Subject: [PATCH 2/2] Task 2: Use JPMorgan Chase & Co. frameworks and tools

---
 src/App.tsx   | 33 +++++++++++++++++++++++----------
 src/Graph.tsx | 13 ++++++++++---
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0728518..7ab2a7d 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  showGraph: boolean,
 }
 
 /**
@@ -22,6 +23,7 @@ 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,
     };
   }
 
@@ -29,26 +31,37 @@ class App extends Component<{}, IState> {
    * 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: serverResponds,
+          showGraph: true,
+        });
+      });
+      x++
+      if (x > 1000) {
+        clearInterval(interval);
+      }
+    }, 100);
   }
-
   /**
    * Render the App react component
    */
   render() {
     return (
-      <div className="App">
+      <div className="App" >
         <header className="App-header">
           Bank & Merge Co Task 2
         </header>
@@ -59,14 +72,14 @@ class App extends Component<{}, IState> {
             // 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>
-      </div>
+      </div >
     )
   }
 }
diff --git a/src/Graph.tsx b/src/Graph.tsx
index 3b2a7da..ad6f041 100644
--- a/src/Graph.tsx
+++ b/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,8 +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',
       top_ask_price: 'float',
@@ -49,6 +48,14 @@ 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', '["top_ask_price"]');
+      elem.setAttribute('aggregates', `
+      {"stock":"distinct count",
+        "top_ask":"avg",
+        "top_bid_price":"avg",
+        "timestamp":"distinct count"}`);
     }
   }
 
-- 
2.43.0.windows.1