From 2b843b76a790f786654bf34952d50993c504c419 Mon Sep 17 00:00:00 2001
From: Thien Le <97468266+thienle210303@users.noreply.github.com>
Date: Fri, 3 Feb 2023 17:33:01 -0500
Subject: [PATCH] Add files via upload

---
 DataManipulator.ts | 34 ++++++++++++++++++++++++
 Graph.tsx          | 65 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 DataManipulator.ts
 create mode 100644 Graph.tsx

diff --git a/DataManipulator.ts b/DataManipulator.ts
new file mode 100644
index 0000000000..85eb41ac10
--- /dev/null
+++ b/DataManipulator.ts
@@ -0,0 +1,34 @@
+import { ServerRespond } from './DataStreamer';
+
+export interface Row {
+  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[]): Row {
+    const priceABC = (serverResponds[0].top_ask.price + serverResponds[0].top_bid.price) / 2;
+    const priceDEF = (serverResponds[1].top_ask.price + serverResponds[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: serverResponds[0].timestamp > serverResponds[1].timestamp ?
+          serverResponds[0].timestamp : serverResponds[1].timestamp,
+        upper_bound: upperBound,
+        lower_bound: lowerBound,
+        trigger_alert: (ratio > upperBound || ratio < lowerBound) ? ratio : undefined, 
+
+      };
+    }
+  }
+
diff --git a/Graph.tsx b/Graph.tsx
new file mode 100644
index 0000000000..6e0523d59e
--- /dev/null
+++ b/Graph.tsx
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Table } from '@finos/perspective';
+import { ServerRespond } from './DataStreamer';
+import { DataManipulator } from './DataManipulator';
+import './Graph.css';
+
+interface IProps {
+  data: ServerRespond[],
+}
+
+interface PerspectiveViewerElement extends HTMLElement {
+  load: (table: Table) => void,
+}
+class Graph extends Component<IProps, {}> {
+  table: Table | undefined;
+
+  render() {
+    return React.createElement('perspective-viewer');
+  }
+
+  componentDidMount() {
+    // Get element from the DOM.
+    const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
+
+    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('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),
+      ] as unknown as TableData);
+    }
+  }
+}
+
+export default Graph;