While editing 'attributes' in Graph.tsx

[syedasumaiya]

Hey, can anybody help me what is wrong here. Here is my 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) { 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"}'); elem.load(this.table); } }

  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;

[syedasumaiya]

i just wrote the attributes again. It was syntax error. Hence closing...!!

[syedasumaiya]

![Uploading Screenshot 2022-01-20 132647.jpg…]()