diff --git a/src/DataManipulator.ts b/src/DataManipulator.ts
index 7f622955cc..60fb53ff63 100644
--- a/src/DataManipulator.ts
+++ b/src/DataManipulator.ts
@@ -1,20 +1,32 @@
 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 upperBound= 1+ 0.05;
+    const lowerBound= 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,
+    };
   }
-}
+}
\ No newline at end of file
diff --git a/src/Graph.tsx b/src/Graph.tsx
index 277797d933..de6e8a734f 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -1,60 +1,65 @@
-import React, { Component } from 'react';
-import { Table } from '@finos/perspective';
-import { ServerRespond } from './DataStreamer';
-import { DataManipulator } from './DataManipulator';
+import React, {Component} from 'react';
+import {Table, TableData} from '@finos/perspective';
+import {ServerRespond} from '../../../forage-jpmc-swe-task-3-main/src/DataStreamer';
+import {DataManipulator} from '../../../forage-jpmc-swe-task-3-main/src/DataManipulator';
 import './Graph.css';
 
 interface IProps {
-  data: ServerRespond[],
+    data: ServerRespond[],
 }
 
 interface PerspectiveViewerElement extends HTMLElement {
-  load: (table: Table) => void,
+    load: (table: Table) => void,
 }
+
 class Graph extends Component<IProps, {}> {
-  table: Table | undefined;
+    table: Table | undefined;
 
-  render() {
-    return React.createElement('perspective-viewer');
-  }
+    render() {
+        return React.createElement('perspective-viewer');
+    }
 
-  componentDidMount() {
-    // Get element from the DOM.
-    const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
+    componentDidMount() {
+        // Get element from the DOM.
+        const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
 
-    const schema = {
-      stock: 'string',
-      top_ask_price: 'float',
-      top_bid_price: 'float',
-      timestamp: 'date',
-    };
+        const schema = {
+            price_abc: 'float',
+            price_def: 'float',
+            ratio: 'float',
+            timestamp: 'date',
+            upper_bound: 'float',
+            lower_bound: 'float',
+            trigger_alert: 'float'
+        };
 
-    if (window.perspective && window.perspective.worker()) {
-      this.table = window.perspective.worker().table(schema);
-    }
-    if (this.table) {
-      // 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',
-        timestamp: 'distinct count',
-      }));
+        if (window.perspective && window.perspective.worker()) {
+            this.table = window.perspective.worker().table(schema);
+        }
+        if (this.table) {
+            elem.load(this.table);
+            elem.setAttribute('view', 'y_line');
+            elem.setAttribute('row-pivots', '["timestamp"]');
+            elem.setAttribute('columns', '["ratio", "lower_bound", "upper_bound", "trigger_alert"]');
+            elem.setAttribute('aggregates', JSON.stringify({
+                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),
-      );
+    componentDidUpdate() {
+        if (this.table) {
+            this.table.update([
+                DataManipulator.generateRow(this.props.data),
+            ] as unknown as TableData);
+        }
     }
-  }
 }
 
-export default Graph;
+export default Graph;
\ No newline at end of file