insidesherpa / jpmc-tech-task-3-py3

Task Overview | Installation Instructions | Link to Module 3

Introduction

Experience Technology at JP Morgan Chase

Try out what real work is like in the technology team at JP Morgan Chase & Co. Fast track to the tech team with your work.

Module 3 Task Overview

Display data visually for traders. Use Perspective to create the chart for the trader’s dashboard.

Aim: Use Perspective to generate a chart that displays the data feed in a clear and visually appealing manner for traders to monitor this trading strategy. Basically, you have to modify the existing live chart to be able to (1) track and display the ratio between the two stock prices (2) show the historical upper and lower bounds of the stocks' ratio (3) and finally, show 'alerts' whenever these bounds are crossed by the ratio.

1. Please clone this repository to start the task
2. From the existing live graph, update it to track the ratio between two stocks over time and NOT the two stocks’ top_ask_price over time.
3. Update the graph to also track the historical upper and lower bounds of the stocks' ratio
4. Trigger 'alerts' (i.e. draw red lines) on the graph whenever the bounds are crossed by the calculated ratio in a specific time period
5. Upload a git patch file as the submission to this task
6. Upload a video detailing your process and work

Setup / Installation

In order to get the server and client application code working on your machine, follow the setup here

Note:This is the version of the JPM 3 exercise that uses Python 3. The Python 2.7 version is in this other repo

How to Run

Similar to Task 2, start the data feed server by running the python server

Make sure your terminal / command line is in the repository first before doing any of this.

If you are using Windows, make sure to run your terminal/command prompt as administrator.

python datafeed/server3.py

If you encounter an issue with datautil.parser, run this command:

pip install python-dateutil

If you don't have pip, you can install it from: https://pip.pypa.io/en/stable/installing/

Run npm install && npm start to start the React application.

It's okay to have audit warnings when installing/running the app.

If you don't have npm (although you should if you followed the set up / installation part), you can install the recommended version alongside NodeJS from: https://nodejs.org/en/

The recommended version are node v11.0.0 and npm v6.4.1

Open http://localhost:3000 to view the app in the browser. The page will reload if you make edits.

Known Issues

Some users seem to be having trouble with the unzipped version of the node_modules back up for windows. This is the alternative unzipped version: https://drive.google.com/drive/folders/1wzIlt-OeiK6nYEHidsOGlpJ_KmeoPVXz

Note: You may need to (hard) refresh the link to the public gdrive to see all of the files/folders e.g. @jpmorganchase/perspective as it takes gdrive a bit to load them for you.

How to fix the code to meet the objectives

To make the changes necessary to complete the objectives of this task, follow this guide.

How to submit your work

A patch file is what is required from you to submit. To create a patch file, follow this guide. Then submit the patch file in the JPM Module 3 Page.

jpmc-tech-task-3-py3's Issues

Failed to Compile Type error ( error in price_abc: price ABC)

Can anyone point out where i may have made a mistake thankyou in advance

'react-scripts' is not recognized as an internal or external command, operable program or batch file.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!
C:\Users\AppData\Roaming\npm-cache_logs\2020-06-22T23_17_23_719Z-debug.log

Problem with npm start

I downloaded node_modules and pasted it in my directory. But when I try to run npm start I get the following error

Operator '+' cannot be applied to types 'Number' and 'Number'. TS2365

I have written this code on VSCode:

`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(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,
}
}
}`

But the error comes out and saying this on the chrome browser:

Type error: Operator '+' cannot be applied to types 'Number' and 'Number'. TS2365

` 13 | export class DataManipulator {
14 | static generateRow(serverRespond: ServerRespond[]): Row {

15 | const priceABC = (serverRespond[0].top_ask.price + serverRespond[0].top_bid.price) / 2;
| ^
16 | const priceDEF = (serverRespond[1].top_ask.price + serverRespond[1].top_bid.price) / 2;
17 | const ratio = priceABC / priceDEF;
18 | const upperBound = 1 + 0.05;`

JPMC-tech-task-3-PY3/src/DataManipulator.ts Type error: Type 'number' is not assignable to type '"number"'. TS2322 22 | 23 | return { > 24 | price_abc: priceABC, | ^ 25 | price_def: priceDEF, 26 | ratio, 27 | timestamp: serverResponds[0].timestamp > serverResponds[1].timestamp ?

'Object literal may only specify known properties'

Hello,

I am currently getting the error:

"Type '{ price_abc: number; price_def: number; ratio: number; timestamp: Date; upper_bound: number; lower_bound: number; trigger_alert: number | undefined; }' is not assignable to type 'Row[]'.
Object literal may only specify known properties, and 'price_abc' does not exist in type 'Row[]'.ts(2322)"

in my generateRow() function.

I am not sure as to what could be causing this; my code is exactly the same as the code shown in the supplied pdf:

import { ServerRespond } from './DataStreamer';

export interface Row { // Match new schema
  price_abc: number,
  price_def: number,
  ratio: number,
  timestamp: Date,
  upper_bound: number,
  lower_bound: number,
  trigger_alert: number | undefined,
}


export class DataManipulator { // Process raw data; define necessary return information
  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.1;
    const lowerBound = 1 - 0.1;
    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,
      };
  }
}

Error when doing 'npm install' ... any ideas?

npm WARN tar ENOENT: no such file or directory, lstat '/home/andrew/Projects/JPMC-tech-task-3-PY3/node_modules/.staging/chalk-e3bf26b7/types'
npm WARN tar ENOENT: no such file or directory, open '/home/andrew/Projects/JPMC-tech-task-3-PY3/node_modules/.staging/postcss-18e8c038/lib/postcss.d.ts'
npm ERR! path /home/andrew/Projects/JPMC-tech-task-3-PY3/node_modules/.staging/supports-color-e4630f0b
npm ERR! code ENOSPC
npm ERR! errno -28
npm ERR! syscall mkdir
npm ERR! nospc ENOSPC: no space left on device, mkdir '/home/andrew/Projects/JPMC-tech-task-3-PY3/node_modules/.staging/supports-color-e4630f0b'
npm ERR! nospc There appears to be insufficient space on your system to finish.
npm ERR! nospc Clear up some disk space and try again.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrew/.npm/_logs/2020-07-04T06_00_36_071Z-debug.log

Sounds like a disk space problem but I am running a virtual machine (Xubuntu on Oracle VM VirtualBox) and have hardly any disk space used up.

SERVER DID NOT START after datafeed/server3.py + npm errror

client app failing to start in task 3

I have node v11.0.0 and npm v6.4.1.
when I tried to launch client app I am getting the following errors. I have also attached the log file

**'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\fatim\AppData\Roaming\npm-cache_logs\2019-11-05T18_01_07_085Z-debug.log
2019-11-05T18_01_07_085Z-debug.log
**

Problem with graph.tsx

---

I was getting this error , then i changed Row[] to Row
as suggested in the issues of this task

Type '{ price_abc: number; price_def: number; ratio: number; timestamp: Date; upper_bound: number; lower_bound: number; trigger_alert: number | undefined; }' is not assignable to type 'Row[]'.
Object literal may only specify known properties, and 'price_abc' does not exist in type 'Row[]'. TS2322

21 |
22 |     return {

23 | price_abc:priceABC,
| ^
24 | price_def:priceDEF,
25 | ratio,
26 | timestamp:serverResponds[0].timestamp>serverResponds[1].timestamp ?

---

After changing I got this error...........

Type error: Argument of type 'Row' is not assignable to parameter of type 'TableData'.
Type 'Row' is not assignable to type '{ [key: string]: string; }'.
Index signature is missing in type 'Row'. TS2345

57 |     if (this.table) {
58 |       this.table.update(

59 | DataManipulator.generateRow(this.props.data),
| ^
60 | );
61 | }
62 | }

Type error: Cannot find module '@finos/perspective'. TS2307

C:/Users/Vaisakh/JPMC-tech-task-3-PY3/src/App.tsx
Type error: Cannot find module '@finos/perspective'. TS2307

What should I do to solve this issue ?

error: 'top_ask_price' does not exist on type 'ServerRespond'

Type Error : 'price_abc' does not exist in type 'Row[]'

error after clicking button

Hi, would anyone be able to offer any advice? I've closed and restarted the server multiple times, and am not getting any compiling errors. This occurs after I click on the "start streaming data" button.

Clicking 'Start Streaming Data' shows no ratio data

NPM issue

getting this type of error
what to do??

Start streaming shows no data after making changes

Patch Size

I keep getting told my patch file is too large, but I only have what was asked of us. Does anyone have a solution?

XMLhttpRequesfailed ERROR

How to remove the timestamp line and from Y-axis.

How to remove the timestamp line and from Y-axis.

Originally posted by @pooja2005 in #48 (comment)

Type error: Cannot find name 'DataManipulator'. TS2304

Type error: Cannot find name 'DataManipulator'. TS2304

76 |     if (this.table) {
77 |       this.table.update([

78 | DataManipulator.generateRow(this.props.data),
| ^
79 | ]);
80 | }
81 | }
Can anyone help with this issue?
I really appreciate it!

Anyone SuccessFul getting an Trigger Alert ?

Hello Guys,

Can anyone confirm with me that they have got a triggered alert on data ? I tried, it also depends on incoming data, but if anyone successful, can help me with it ?

Many thanks,
Mihir

Error on the web page: A cross origin error was thrown

1590957053529.pdf

It is showing error in the files that I've not even touch

Issue on Server(graph not getting plotted)

**I have attached the screenshots for the problem faced by me. The date on the X-Axis is showing invlaid date. **

TS2322

Type error: Type '{ price_abc: number; price_def: number; ratio: number; timestamp: Date; upper_bound: number; lower_bound: number; trigger_alert: number | undefined; }' is not assignable to type 'Row[]'.
Object literal may only specify known properties, and 'price_abc' does not exist in type 'Row[]'. TS2322

Type error: Property 'top_ask_price' does not exist on type 'ServerRespond'.

Anyone else getting this error? I thought that we were to remove any references to top_ask_price in Graph.tsx.

Patch file size exceeds the permissible limit

Problem in submitting the final patch file.
All the help is appreciated :)

browser page unresponsive

Error while starting npm

[email protected] start C:\Abhi\JPMC-tech-task-3-PY3
react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Abhishek Singh\AppData\Roaming\npm-cache_logs\2020-04-26T04_23_54_120Z-debug.log

Module not found: Can't resolve 'react' in 'C:\Users\*****\JPMC-tech-task-3-PY3\src'

when I write npm start command

C:/Users/Admin/JPMC-tech-task-3/src/Graph.tsx
Type error: Cannot find module '@jpmorganchase/perspective'. TS2307

1 | import React, { Component } from 'react';

2 | import { Table } from '@jpmorganchase/perspective';
| ^
3 | import { ServerRespond } from './DataStreamer';
4 | import { DataManipulator } from './DataManipulator';
5 | import './Graph.css';


Try adding this folder to -

Originally posted by @RavinderSokhal7 in #14 (comment)

npm not module not found

the npm is not getting installed .even checked for npm -v it also throws an error and the other commands-npm install and npm start also throw error.

Error in DataMaipulator.ts

After running the Node application after making all the changes this is the error I get:

./src/DataManipulator.ts
Attempted import error: 'ServerRespond' is not exported from './DataStreamer'.

Issues with Row[]

During the compilation of my program, I was presented with the following error code,
**Type error: Type '{ price_abc: number; price_def: number; ratio: number; timestamp: Date; upper_bound: number; lower_bound: number; trigger_alert: number | undefined; }' is not assignable to type 'Row[]'.
Object literal may only specify known properties, and 'price_abc' does not exist in type 'Row[]'. TS2322

20 |     const lowerBound = 1 - 0.05;
21 |     return {

22 | price_abc: priceABC,
| ^
23 | price_def: priceDEF,
24 | ratio,
25 | timestamp: serverResponds[0].timestamp > serverResponds[1].timestamp ?

**
Through previous issue posts, I realised this was due to having square brackets after row, and so once they were removed, I ran into another issue within Graph.tsx:
**Type error: Argument of type 'Row' is not assignable to parameter of type 'TableData'.
Type 'Row' is not assignable to type '{ [key: string]: string; }'.
Index signature is missing in type 'Row'. TS2345

52 |     if (this.table) {
53 |       this.table.update(

54 | DataManipulator.generateRow(this.props.data),
| ^
55 | );
56 | }
57 | }**
I am unable to figure out how to fix this error, any help would be appreciated

ts 2322

C:/Users/GLOBAL/JPMC-tech-task-3-PY3/src/DataManipulator.ts
Type error: Type 'number | undefined' is not assignable to type 'number'.
Type 'undefined' is not assignable to type 'number'. TS2322

27 |       upper_bound: upperBound,
28 |       lower_bound: lowerBound,

29 | trigger_alert: (ratio > upperBound || ratio < lowerBound) ? ratio : undefined,
| ^
30 | };
31 | }
32 | }

failed to compile : 'ServerRespond' is not exported from './DataStreamer'

Compiled Successful, but browser displays "The site can't be reached".

This is Task 3 of the JP Chase Virtual Internship. I have completed the tasks on my Windows OS. The command prompt window shows "Compiled Successfully" but the Chrome Browser display "The site can't be reached". Please help me out.

Server Misfunction

When I click Start Streaming Data, nothing shoes.
The server just keeps returning continuous queries even when I just started without clicking Start Streaming

I am facing netwrok error , what does this means?

Wrong Graph

I am getting this wrong graph after making all the required changes.
Please help

Upload patch file size error

315 mb patch size giving error as only 250 mb is allowed . I downloaded the npm zip file externally and replaced in repo .
how to upload?

Failed to compile. Type error: Cannot find module '@jpmorganchase/perspective'. TS2307

I get ratio in form of red line and no trigger occurs

This is what i get as output even if i had replicated the same code as provided in manual. Could you help me solve this.

getting wrong output on webpage

Any help on how should I fix this output?

Code for Graph.tsx
`import React, { Component } from 'react';
import { Table } from '@jpmorganchase/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('column-pivots', '["stock"]');
  elem.setAttribute('row-pivots', '["timestamp"]');
  elem.setAttribute('columns', '["top_ask_price"]');
  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),
]);
}
}
}

export default Graph;
`
Code for Datamanipulator.ts

`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(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,
};
}
}
`

Clicking 'Start Streaming Data' shows no data

Hi, so I'm currently running Windows 10 and python 3. I went through the setup process for Task 3 and am now up to starting up the app. I ran npm install which gave me this:

I then ran npm start which gave me this:

The app successfully loads. However, when I click the button, no data shows up. The command line that is running the server doesn't output anything when I click the button. Any thoughts? Thanks.

Remove/replace deprecated modules

Many modules included in package.json are deprecated. For example, @jpmorganchase/perspective is now @finos/perspective.

Can we really add this to our resume?

Hi everyone I have completed all the tasks just want to ask that can we really add this to our resume?

npm start error

pls help me out

Task3 error(Start streaming data)

In chrome:
Start streaming data,on clicking showing nothing
In explorer:
on clicking it shows:syntax error :json.parse error: unexpected input at position:0