modified: src/DataManipulator.ts

src/DataManipulator.ts

@@ -1,20 +1,33 @@
 import { ServerRespond } from './DataStreamer';
 
 export interface Row {
-  stock: string,
-  top_ask_price: number,
+  price_abc: number,
+  price_def: number,
+  ratio: number,
   timestamp: Date,
+  upper_bound: number,
+  lower_bound: number,
+  trigger_alert: number | undefined,
 }
 
 
 export class DataManipulator {
-  static generateRow(serverResponds: ServerRespond[]) {
-    return serverResponds.map((el: any) => {
-      return {
-        stock: el.stock,
-        top_ask_price: el.top_ask && el.top_ask.price || 0,
-        timestamp: el.timestamp,
-      };
-    })
+  static generateRow(serverRespond: ServerRespond[]): Row {
+    const priceABC = (serverRespond[0].top_ask.price + serverRespond[0].top_bid.price) / 2;
+    const priceDEF = (serverRespond[1].top_ask.price + serverRespond[1].top_bid.price) / 2;
+    const ratio = priceABC / priceDEF;
+    const upper_bound = 1+0.05;
+    const lower_bound = 1-0.05;
+    return {
+      price_abc : priceABC,
+      price_def : priceDEF,
+      ratio,
+      timestamp: serverRespond[0].timestamp > serverRespond[1].timestamp ?
+        serverRespond[0].timestamp : serverRespond[1].timestamp,
+      upper_bound: upperBound,
+      lower_bound: lowerBound,
+      trigger_alert : (ratio > upperBound || ratio < lowerBound) ? ratio : undefined,
+    };
   }
 }
+

src/Graph.tsx

@@ -36,23 +36,25 @@ class Graph extends Component<IProps, {}> {
       // Load the `table` in the `<perspective-viewer>` DOM reference.
       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', JSON.stringify({
-        stock: 'distinctcount',
-        top_ask_price: 'avg',
-        top_bid_price: 'avg',
+        price_abc: 'avg',
+        price_def: 'avg',
+        ratio:'avg',
         timestamp: 'distinct count',
+        upper_bound:'avg',
+        lower_bound:'avg',
+        trigger_alert:'avg',
       }));
     }
   }
 
   componentDidUpdate() {
-    if (this.table) {
-      this.table.update(
-        DataManipulator.generateRow(this.props.data),
-      );
+    if (this.table)
+        this.table.update([
+            DataManipulator.generateRow(this.props.data),
+      ] as unknown TableData );
     }
   }
 }