From a052a72da4064781d19e89d375fd9034ca30e249 Mon Sep 17 00:00:00 2001 From: Akash23JPC <129078706+Akash23JPC@users.noreply.github.com> Date: Mon, 27 Mar 2023 15:46:34 +0100 Subject: [PATCH 1/3] Update Graph.tsx --- src/Graph.tsx | 90 +++++++++++++++++++++++++++------------------------ 1 file changed, 48 insertions(+), 42 deletions(-) diff --git a/src/Graph.tsx b/src/Graph.tsx index 277797d933..02964a518b 100644 --- a/src/Graph.tsx +++ b/src/Graph.tsx @@ -1,60 +1,66 @@ -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 './DataStreamer'; +import {DataManipulator} from './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 { - 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 `` 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) { + // Load the `table` in the `` 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), - ); + componentDidUpdate() { + if (this.table) { + this.table.update([ + DataManipulator.generateRow(this.props.data), + ] as unknown as TableData); + } } - } } export default Graph; From 16f979cd2e4ea079a4eec824e9c9aba02745c295 Mon Sep 17 00:00:00 2001 From: Akash23JPC <129078706+Akash23JPC@users.noreply.github.com> Date: Mon, 27 Mar 2023 15:47:45 +0100 Subject: [PATCH 2/3] Update Graph.tsx From 96f7f1558bd6d9201868c5524f76ed5aaeb1838c Mon Sep 17 00:00:00 2001 From: Akash23JPC <129078706+Akash23JPC@users.noreply.github.com> Date: Mon, 27 Mar 2023 15:48:32 +0100 Subject: [PATCH 3/3] Update DataManipulator.ts --- src/DataManipulator.ts | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/DataManipulator.ts b/src/DataManipulator.ts index 7f622955cc..b0c2c78053 100644 --- a/src/DataManipulator.ts +++ b/src/DataManipulator.ts @@ -1,20 +1,32 @@ -import { ServerRespond } from './DataStreamer'; +import {ServerRespond} from './DataStreamer'; export interface Row { - stock: string, - top_ask_price: number, - timestamp: Date, + 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, + }; + } }