Graph not visible!!

[aayush1204]

I did make all the changes from the slides. Even the App.tsx changes are right i guess because i can see queries recieved continuously on the cmd. But the graph is not visible on the web site.

this is my Graph.tsx code-

import React, { Component } from 'react'; import { Table } from '@jpmorganchase/perspective'; import { ServerRespond } from './DataStreamer'; import './Graph.css';

/**

• Props declaration for */ interface IProps { data: ServerRespond[], }

/**

• Perspective library adds load to HTMLElement prototype.
• This interface acts as a wrapper for Typescript compiler. */ interface PerspectiveViewerElement extends HTMLElement{ load: (table: Table) => void, }

/**

• React component that renders Perspective based on data

• parsed from its parent through data property. */ class Graph extends Component<IProps, {}> { // Perspective table table: Table | undefined;

  render() { return React.createElement('perspective-viewer'); }

  componentDidMount() { // Get element to attach the table 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', };

  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.

  // Add more Perspective configurations here. 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', {["stock"]:"distinct count"} ,"top_ask_price": "avg", "top_bid_price": "avg", ["timestamp]":"distinct count"});

  } }

  componentDidUpdate() { // Everytime the data props is updated, insert the data into Perspective table 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, }; })); } } }

export default Graph;

[aayush1204]

this is what im seeing on the website

[emilytronolone]

I am having this same issue.

[aayush1204]

I had done a pretty silly mistake in the aggregates part where i had put an extra curly bracket. So ill suggest u check u code once again thoroughly. Mostly the error has to be in Graph.tsx

[KeyurVaghani]

try to run it on chrome instead of windows explorer. Mine worked perfectly

[vermakamesh23]

@aayush1204
I am geetting some errors in app.tsx .

here is my code-----> import React, { Component } from 'react'; import DataStreamer, { ServerRespond } from './DataStreamer'; import Graph from './Graph'; import './App.css';

/**

• State declaration for */ interface IState { data: ServerRespond[], showGraph : boolean, }

/**

• The parent element of the react app.

• It renders title, button and Graph react element. */ class App extends Component<{}, IState> { constructor(props: {}) { super(props);

  this.state = { // data saves the server responds. // We use this state to parse data down to the child element (Graph) as element property data: [], showGraph:false, }; }

  /**

  • Render Graph react component with state.data parse as property data */ renderGraph() { if(this.state.showGraph) { return () } }

  /**

  • Get new data from server and update the state with the new data */ getDataFromServer() { let x=0; const interval = setInterval(() => { DataStreamer.getData((serverResponds: ServerRespond[]) => { this.setState{ data: serverResponds, showGraph:true, }; }); x++; if(x>1000) { clearInterval(interval); } },100); }

  /**

  • Render the App react component */ render() { return (
    Bank & Merge Co Task 2

    {this.getDataFromServer()}}> Start Streaming Data

    {this.renderGraph()}

    ) } }

export default App;

[thejahnvigupta]

I am not getting the proper output. How to fix this?

[vermakamesh23]

@thejahnvigupta I think you have done mistake in returning the values of function componentDidUpdate in Graph.tsx . Check your code again.

[ish-kumar]

@thejahnvigupta getting the same issue do share the solution if you find one :)

[thejahnvigupta]

@thejahnvigupta I think you have done mistake in returning the values of function componentDidUpdate in Graph.tsx . Check your code again.

Didn't alter the code, this part is as it was given.

[thejahnvigupta]

@thejahnvigupta I think you have done mistake in returning the values of function componentDidUpdate in Graph.tsx . Check your code again.

Didn't alter the code, this part is as it was given.

import React, { Component } from 'react'; import { Table } from '@jpmorganchase/perspective'; import { ServerRespond } from './DataStreamer'; import './Graph.css';

/**

• Props declaration for */ interface IProps { data: ServerRespond[], }

/**

• Perspective library adds load to HTMLElement prototype.
• This interface acts as a wrapper for Typescript compiler. */ interface PerspectiveViewerElement extends HTMLElement { load: (table: Table) => void, }

/**

• React component that renders Perspective based on data

• parsed from its parent through data property. */ class Graph extends Component<IProps, {}> { // Perspective table table: Table | undefined;

  render() { return React.createElement('perspective-viewer'); }

  componentDidMount() { // Get element to attach the table 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', };

  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.

  // Add more Perspective configurations here. 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', {"stock":"distinct count", "top_ask_price":"avg", "top_bid_price":"avg", "timestamp":"distinct count"}) } }

  componentDidUpdate() { // Everytime the data props is updated, insert the data into Perspective table 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, }; })); } } }

export default Graph;

here's the code.

[vermakamesh23]

@thejahnvigupta I think you have done mistake in returning the values of function componentDidUpdate in Graph.tsx . Check your code again.

Didn't alter the code, this part is as it was given.

import React, { Component } from 'react'; import { Table } from '@jpmorganchase/perspective'; import { ServerRespond } from './DataStreamer'; import './Graph.css';

/**

• Props declaration for */ interface IProps { data: ServerRespond[], }

/**

• Perspective library adds load to HTMLElement prototype.
• This interface acts as a wrapper for Typescript compiler. */ interface PerspectiveViewerElement extends HTMLElement { load: (table: Table) => void, }

/**

• React component that renders Perspective based on data
• parsed from its parent through data property. */ class Graph extends Component<IProps, {}> { // Perspective table table: Table | undefined;

render() { return React.createElement('perspective-viewer'); }

componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  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', `
          {"stock":"distinct count",
    "top_ask_price":"avg",
    "top_bid_price":"avg",
    "timestamp":"distinct count"}`)
}

}

componentDidUpdate() { // Everytime the data props is updated, insert the data into Perspective table 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, }; })); } } }

export default Graph;

here's the code.

@thejahnvigupta you have done mistake in elem.setAttribute('column_pivots', '["stock"]');

change "column_pivots"---->"column-pivots" I think it will be helpful for you.

[thejahnvigupta]

@thejahnvigupta I think you have done mistake in returning the values of function componentDidUpdate in Graph.tsx . Check your code again.

Didn't alter the code, this part is as it was given.

import React, { Component } from 'react'; import { Table } from '@jpmorganchase/perspective'; import { ServerRespond } from './DataStreamer'; import './Graph.css'; /**

• Props declaration for */ interface IProps { data: ServerRespond[], }

/**

• Perspective library adds load to HTMLElement prototype.
• This interface acts as a wrapper for Typescript compiler. */ interface PerspectiveViewerElement extends HTMLElement { load: (table: Table) => void, }

/**

• React component that renders Perspective based on data
• parsed from its parent through data property. */ class Graph extends Component<IProps, {}> { // Perspective table table: Table | undefined;

render() { return React.createElement('perspective-viewer'); } componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  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', `
          {"stock":"distinct count",
    "top_ask_price":"avg",
    "top_bid_price":"avg",
    "timestamp":"distinct count"}`)
}

} componentDidUpdate() { // Everytime the data props is updated, insert the data into Perspective table 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, }; })); } } } export default Graph; here's the code.

@thejahnvigupta you have done mistake in elem.setAttribute('column_pivots', '["stock"]');

change "column_pivots"---->"column-pivots" I think it will be helpful for you.

Thank you so much, it worked :)

[SiddhlodaAyyar]

Watch this video and if you still get the error comment down in the youtube section and we'll try to solve it. https://youtu.be/wRAG9i8O_44

[Shubhraaa]

@aayush1204 can u pls share your graph.tsx code

[aayush1204]

@Shubhraaa Here you go!

Graph.tsx-

import React, { Component } from 'react'; import { Table } from '@jpmorganchase/perspective'; import { ServerRespond } from './DataStreamer'; import './Graph.css';

/**

• Props declaration for */ interface IProps { data: ServerRespond[], }

/**

• Perspective library adds load to HTMLElement prototype.
• This interface acts as a wrapper for Typescript compiler. */ interface PerspectiveViewerElement extends HTMLElement{ load: (table: Table) => void, }

/**

• React component that renders Perspective based on data

• parsed from its parent through data property. */ class Graph extends Component<IProps, {}> { // Perspective table table: Table | undefined;

  render() { return React.createElement('perspective-viewer'); }

  componentDidMount() { // Get element to attach the table 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', };

  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.

  // Add more Perspective configurations here. 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', {"stock":"distinct count" , "top_ask_price": "avg", "top_bid_price": "avg", "timestamp":"distinct count"});

  } }

  componentDidUpdate() { // Everytime the data props is updated, insert the data into Perspective table 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, }; })); } } }

export default Graph;

[aayush1204]

check line 54, it should be columns not column. I guess thats y it isnt working

On Wed, May 13, 2020 at 12:50 PM managha notifications@github.com wrote:

[image: jpmc] https://user-images.githubusercontent.com/50989118/81009224-db4e1e80-8e71-11ea-88c8-78c17c3a54f9.PNG

this is what im seeing on the website

im getting the same problem can you help me out .how did u solve it? [image: j4] https://user-images.githubusercontent.com/52420532/81782964-48b81a00-9518-11ea-8614-f0a368fca8f2.PNG

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/insidesherpa/JPMC-tech-task-2-PY3/issues/115#issuecomment-627798188, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMFAQPTDFLAV4SAAJKZMAXTRRJC4ZANCNFSM4MZBQWAA .

[StrangerZiokan]

try to run it on chrome instead of windows explorer. Mine worked perfectly

Similar issue, ran on chrome and it worked, wasn't working on firefox, God knows why

[echarlot1]

I have an issue on the line where "elem" is assign to the "document.getElementsByTagName" result (const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;).

How may I get rid of it?

Here is my code from Graph.tsx:

componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  elem.load(this.table);
  elem.setAttribute("view", "y_line");
  elem.setAttribute("column-pivots", '["stock"]');
  elem.setAttribute("column-pivots", '["timestamp"]');
  elem.setAttribute("column", '["top_ask_price"]');
  elem.setAttribute("aggregates", `
  {
    "stock": "distinct count",
    "top_ask_price": "avg",
    "top_bid_price": "avg",
    "timestamp": "distinct count"
  }`);
}

}

[khushiBiyani]

I have an issue on the line where "elem" is assign to the "document.getElementsByTagName" result (const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;).

How may I get rid of it?

Here is my code from Graph.tsx:

componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  elem.load(this.table);
  elem.setAttribute("view", "y_line");
  elem.setAttribute("column-pivots", '["stock"]');
  elem.setAttribute("column-pivots", '["timestamp"]');
  elem.setAttribute("column", '["top_ask_price"]');
  elem.setAttribute("aggregates", `
  {
    "stock": "distinct count",
    "top_ask_price": "avg",
    "top_bid_price": "avg",
    "timestamp": "distinct count"
  }`);
}

}

Hey did you get this issue fixed ?

[Andres-Ayala1]

I have an issue on the line where "elem" is assign to the "document.getElementsByTagName" result (const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;).

How may I get rid of it?

Here is my code from Graph.tsx:

componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  elem.load(this.table);
  elem.setAttribute("view", "y_line");
  elem.setAttribute("column-pivots", '["stock"]');
  elem.setAttribute("column-pivots", '["timestamp"]');
  elem.setAttribute("column", '["top_ask_price"]');
  elem.setAttribute("aggregates", `
  {
    "stock": "distinct count",
    "top_ask_price": "avg",
    "top_bid_price": "avg",
    "timestamp": "distinct count"
  }`);
}

}

To fix this issue for me, I had to disable ESLint for this specific workspace. Hope this helps.

[ktarun24]

I have an issue on the line where "elem" is assign to the "document.getElementsByTagName" result (const elem = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;).

How may I get rid of it? Here is my code from Graph.tsx: componentDidMount() { // Get element to attach the table 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',
};

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.

  // Add more Perspective configurations here.
  elem.load(this.table);
  elem.setAttribute("view", "y_line");
  elem.setAttribute("column-pivots", '["stock"]');
  elem.setAttribute("column-pivots", '["timestamp"]');
  elem.setAttribute("column", '["top_ask_price"]');
  elem.setAttribute("aggregates", `
  {
    "stock": "distinct count",
    "top_ask_price": "avg",
    "top_bid_price": "avg",
    "timestamp": "distinct count"
  }`);
}

}

To fix this issue for me, I had to disable ESLint for this specific workspace. Hope this helps.

how did you fix