From 3022e1f02670f8336f457078532f98c50f77496e Mon Sep 17 00:00:00 2001 From: Joe Ferrer Date: Wed, 1 Mar 2023 00:45:20 +1100 Subject: [PATCH 1/2] Move python files to datafeed dir --- requirements.txt => datafeed/requirements.txt | 0 server.py => datafeed/server3.py | 0 datafeed/test.csv | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename requirements.txt => datafeed/requirements.txt (100%) rename server.py => datafeed/server3.py (100%) create mode 100644 datafeed/test.csv diff --git a/requirements.txt b/datafeed/requirements.txt similarity index 100% rename from requirements.txt rename to datafeed/requirements.txt diff --git a/server.py b/datafeed/server3.py similarity index 100% rename from server.py rename to datafeed/server3.py diff --git a/datafeed/test.csv b/datafeed/test.csv new file mode 100644 index 00000000000..e69de29bb2d From 3ec4e1c51e24dcc3e6d9471346c2bf7ee2d3470c Mon Sep 17 00:00:00 2001 From: Lakshya Kumar Singh <64345392+Lakshya-249@users.noreply.github.com> Date: Wed, 3 Jul 2024 02:32:36 +0530 Subject: [PATCH 2/2] commit --- 0001-Move-python-files-to-datafeed-dir.patch | 28 +++++++++ src/App.tsx | 54 +++++++++++------ src/Graph.tsx | 64 +++++++++++++------- 3 files changed, 104 insertions(+), 42 deletions(-) create mode 100644 0001-Move-python-files-to-datafeed-dir.patch diff --git a/0001-Move-python-files-to-datafeed-dir.patch b/0001-Move-python-files-to-datafeed-dir.patch new file mode 100644 index 00000000000..b4debff05a9 --- /dev/null +++ b/0001-Move-python-files-to-datafeed-dir.patch @@ -0,0 +1,28 @@ +From 3022e1f02670f8336f457078532f98c50f77496e Mon Sep 17 00:00:00 2001 +From: Joe Ferrer +Date: Wed, 1 Mar 2023 00:45:20 +1100 +Subject: [PATCH] Move python files to datafeed dir + +--- + requirements.txt => datafeed/requirements.txt | 0 + server.py => datafeed/server3.py | 0 + datafeed/test.csv | 0 + 3 files changed, 0 insertions(+), 0 deletions(-) + rename requirements.txt => datafeed/requirements.txt (100%) + rename server.py => datafeed/server3.py (100%) + create mode 100644 datafeed/test.csv + +diff --git a/requirements.txt b/datafeed/requirements.txt +similarity index 100% +rename from requirements.txt +rename to datafeed/requirements.txt +diff --git a/server.py b/datafeed/server3.py +similarity index 100% +rename from server.py +rename to datafeed/server3.py +diff --git a/datafeed/test.csv b/datafeed/test.csv +new file mode 100644 +index 0000000..e69de29 +-- +2.43.0.windows.1 + diff --git a/src/App.tsx b/src/App.tsx index 0728518c0d8..13a52d1e412 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,14 @@ -import React, { Component } from 'react'; -import DataStreamer, { ServerRespond } from './DataStreamer'; -import Graph from './Graph'; -import './App.css'; +import React, { Component } from "react"; +import DataStreamer, { ServerRespond } from "./DataStreamer"; +import Graph from "./Graph"; +import "./App.css"; /** * State declaration for */ interface IState { - data: ServerRespond[], + data: ServerRespond[]; + showGraph: boolean; } /** @@ -22,6 +23,7 @@ class App extends Component<{}, IState> { // data saves the server responds. // We use this state to parse data down to the child element (Graph) as element property data: [], + showGraph: false, }; } @@ -29,18 +31,30 @@ class App extends Component<{}, IState> { * Render Graph react component with state.data parse as property data */ renderGraph() { - return () + if (this.state.showGraph) { + return ; + } } /** * Get new data from server and update the state with the new data */ getDataFromServer() { - DataStreamer.getData((serverResponds: ServerRespond[]) => { - // Update the state by creating a new array of data that consists of - // Previous data in the state and the new data from server - this.setState({ data: [...this.state.data, ...serverResponds] }); - }); + let x = 0; + const interval = setInterval(() => { + DataStreamer.getData((serverResponds: ServerRespond[]) => { + // Update the state by creating a new array of data that consists of + // Previous data in the state and the new data from server + this.setState({ + data: [...this.state.data, ...serverResponds], + showGraph: true, + }); + }); + x++; + if (x > 1000) { + clearInterval(interval); + } + }, 100); } /** @@ -49,25 +63,25 @@ class App extends Component<{}, IState> { render() { return (
-
- Bank & Merge Co Task 2 -
+
Bank & Merge Co Task 2
- -
- {this.renderGraph()} -
+
{this.renderGraph()}
- ) + ); } } diff --git a/src/Graph.tsx b/src/Graph.tsx index 3b2a7da1a38..e02635d0aaa 100644 --- a/src/Graph.tsx +++ b/src/Graph.tsx @@ -1,21 +1,21 @@ -import React, { Component } from 'react'; -import { Table } from '@finos/perspective'; -import { ServerRespond } from './DataStreamer'; -import './Graph.css'; +import React, { Component } from "react"; +import { Table } from "@finos/perspective"; +import { ServerRespond } from "./DataStreamer"; +import "./Graph.css"; /** * Props declaration for */ interface IProps { - data: ServerRespond[], + data: ServerRespond[]; } /** * Perspective library adds load to HTMLElement prototype. * This interface acts as a wrapper for Typescript compiler. */ -interface PerspectiveViewerElement { - load: (table: Table) => void, +interface PerspectiveViewerElement extends HTMLElement { + load: (table: Table) => void; } /** @@ -27,20 +27,38 @@ class Graph extends Component { table: Table | undefined; render() { - return React.createElement('perspective-viewer'); + return React.createElement("perspective-viewer"); } componentDidMount() { // Get element to attach the table from the DOM. - const elem: PerspectiveViewerElement = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement; + const elem: PerspectiveViewerElement = (document.getElementsByTagName( + "perspective-viewer" + )[0] as unknown) as PerspectiveViewerElement; const schema = { - stock: 'string', - top_ask_price: 'float', - top_bid_price: 'float', - timestamp: 'date', + stock: "string", + top_ask_price: "float", + top_bid_price: "float", + timestamp: "date", }; + elem.setAttribute("view", "y_line"); + elem.setAttribute("column-pivots", '["stock"]'); + elem.setAttribute("row-pivots", '["timestamp"]'); + elem.setAttribute("columns", '["top_ask_price"]'); + elem.setAttribute( + "aggregates", + ` + { + "stock":"distinct count", + "top_ask_price":"avg", + "top_bid_price":"avg", + "timestamp":"distinct count" + } + ` + ); + if (window.perspective && window.perspective.worker()) { this.table = window.perspective.worker().table(schema); } @@ -57,15 +75,17 @@ class Graph extends Component { if (this.table) { // As part of the task, you need to fix the way we update the data props to // avoid inserting duplicated entries into Perspective table again. - this.table.update(this.props.data.map((el: any) => { - // Format the data from ServerRespond to the schema - return { - stock: el.stock, - top_ask_price: el.top_ask && el.top_ask.price || 0, - top_bid_price: el.top_bid && el.top_bid.price || 0, - timestamp: el.timestamp, - }; - })); + this.table.update( + this.props.data.map((el: any) => { + // Format the data from ServerRespond to the schema + return { + stock: el.stock, + top_ask_price: (el.top_ask && el.top_ask.price) || 0, + top_bid_price: (el.top_bid && el.top_bid.price) || 0, + timestamp: el.timestamp, + }; + }) + ); } } }