From 66932a11c1f38c7d3351f79ce571dc8efb5a2266 Mon Sep 17 00:00:00 2001 From: Abijot Gupta Date: Fri, 16 Aug 2024 21:35:33 +0530 Subject: [PATCH] feat: task 3 --- changes.patch | 107 +++++++++++++++++++++++++++++++++++++++++ src/DataManipulator.ts | 34 ++++++++----- src/Graph.tsx | 26 ++++++---- 3 files changed, 146 insertions(+), 21 deletions(-) create mode 100644 changes.patch diff --git a/changes.patch b/changes.patch new file mode 100644 index 0000000000..6c67f4f5f1 --- /dev/null +++ b/changes.patch @@ -0,0 +1,107 @@ +diff --git a/src/DataManipulator.ts b/src/DataManipulator.ts +index 7f62295..e41b99c 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, +- 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, + }; +- }) +- } ++ } + } +diff --git a/src/Graph.tsx b/src/Graph.tsx +index 277797d..c118b4f 100644 +--- a/src/Graph.tsx ++++ b/src/Graph.tsx +@@ -1,5 +1,5 @@ + import React, { Component } from 'react'; +-import { Table } from '@finos/perspective'; ++import { Table, TableData } from '@finos/perspective'; + import { ServerRespond } from './DataStreamer'; + import { DataManipulator } from './DataManipulator'; + import './Graph.css'; +@@ -23,10 +23,13 @@ class Graph extends Component { + const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement; + + const schema = { +- stock: 'string', +- top_ask_price: 'float', +- top_bid_price: 'float', ++ 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()) { +@@ -38,21 +41,24 @@ class Graph extends Component { + elem.setAttribute('view', 'y_line'); + elem.setAttribute('column-pivots', '["stock"]'); + elem.setAttribute('row-pivots', '["timestamp"]'); +- elem.setAttribute('columns', '["top_ask_price"]'); ++ elem.setAttribute('columns', '["ratio", "lower_bound", "upper_bound", "trigger_alert"]'); + 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( ++ this.table.update([ + DataManipulator.generateRow(this.props.data), +- ); ++ ] as unknown as TableData); + } + } + } diff --git a/src/DataManipulator.ts b/src/DataManipulator.ts index 7f622955cc..e41b99c518 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, - 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, }; - }) - } + } } diff --git a/src/Graph.tsx b/src/Graph.tsx index 277797d933..c118b4fc41 100644 --- a/src/Graph.tsx +++ b/src/Graph.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Table } from '@finos/perspective'; +import { Table, TableData } from '@finos/perspective'; import { ServerRespond } from './DataStreamer'; import { DataManipulator } from './DataManipulator'; import './Graph.css'; @@ -23,10 +23,13 @@ class Graph extends Component { const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement; const schema = { - stock: 'string', - top_ask_price: 'float', - top_bid_price: 'float', + 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()) { @@ -38,21 +41,24 @@ class Graph extends Component { elem.setAttribute('view', 'y_line'); elem.setAttribute('column-pivots', '["stock"]'); elem.setAttribute('row-pivots', '["timestamp"]'); - elem.setAttribute('columns', '["top_ask_price"]'); + elem.setAttribute('columns', '["ratio", "lower_bound", "upper_bound", "trigger_alert"]'); 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( + this.table.update([ DataManipulator.generateRow(this.props.data), - ); + ] as unknown as TableData); } } }