0001-create-patch-file.patch

From 834ef3a59593224ad4d40f90096bddffa0156a86 Mon Sep 17 00:00:00 2001
From: brahmateja <manepallibrahmateja6@gmail.com>
Date: Mon, 12 Sep 2022 22:56:41 +0530
Subject: [PATCH] create patch file

---
 .vscode/settings.json | 11 +++++++++++
 src/App.tsx           | 30 +++++++++++++++++++++++-------
 src/Graph.tsx         | 17 ++++++++++++++---
 3 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f979773
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+    "python.testing.unittestArgs": [
+        "-v",
+        "-s",
+        "./datafeed",
+        "-p",
+        "*test.py"
+    ],
+    "python.testing.pytestEnabled": false,
+    "python.testing.unittestEnabled": true
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0728518..99c52a0 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,10 @@ import './App.css';
 /**
  * State declaration for <App />
  */
+//it validates data and graph property
 interface IState {
   data: ServerRespond[],
+  showGraph: boolean,
 }
 
 /**
@@ -21,7 +23,9 @@ class App extends Component<{}, IState> {
     this.state = {
       // data saves the server responds.
       // We use this state to parse data down to the child element (Graph) as element property
+      //when user clicks streaming data it shows graph
       data: [],
+      showGraph: false,
     };
   }
 
@@ -29,18 +33,29 @@ 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
    */
+  //get data automatically from server
   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);
   }
 
   /**
@@ -59,10 +74,11 @@ 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.
+            // graph component
             onClick={() => {this.getDataFromServer()}}>
             Start Streaming Data
           </button>
-          <div className="Graph">
+          <div className="Graph"> 
             {this.renderGraph()}
           </div>
         </div>
diff --git a/src/Graph.tsx b/src/Graph.tsx
index ec1430e..218cc44 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -14,7 +14,8 @@ interface IProps {
  * Perspective library adds load to HTMLElement prototype.
  * This interface acts as a wrapper for Typescript compiler.
  */
-interface PerspectiveViewerElement {
+// its modifies to html element
+interface PerspectiveViewerElement extends HTMLElement {
   load: (table: Table) => void,
 }
 
@@ -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',
@@ -47,8 +48,18 @@ class Graph extends Component<IProps, {}> {
     if (this.table) {
       // Load the `table` in the `<perspective-viewer>` DOM reference.
 
-      // Add more Perspective configurations here.
+      // Add more Perspective configurations here,row,column,pivot,y-line view
       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('aggregrates',`
+        {"stock":"distinct count",
+        "top_ask_price":"avg",
+        "top_bid_price":"avg",
+        "timestamp":"distinct count"}`);
+    
     }
   }
 
-- 
2.37.1.windows.1