Graph not loading, fixed bugs, still no real time graph, please advise

[chugh-ak5]

Hi, I've fixed the bugs in task 2, compiled successfully, but unsure why the graph does not appear on the local machine. Could someone please assist me with regard to the same?

[chugh-ak5]

App.tsx code

import DataStreamer, { ServerRespond } from './DataStreamer';
import Graph from './Graph';
import './App.css';

/**
 * State declaration for <App />
 * Passed in the showGraph changes
 */
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
      /// Included false on showing graph yet while clicked
      data: [],
      showGraph: false,
    };
  }

  /**
   * Render Graph react component with state.data parse as property data
   ** Showing graph changed when property of the App's state is true
   */
  renderGraph() {
    if (this.state.showGraph) {
      return (<Graph data={this.state.data}/>)
    }
  }

  /**
   * Get new data from server and update the state with the new data
   *** Changed the getDataFromServer state for the server to respond to streamed data
   *** Passed in a loop for the interval towards the end
   */
  getDataFromServer() {
    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: serverResponds,
        showGraph: true,
      });
    });
    x++;
    if (x > 1000){
      clearInterval(interval);
    }
  }, 100);
}

  /**
   * Render the App react component
   */
  render() {
    return (
      <div className="App">
        <header className="App-header">
          Bank & Merge Co Task 2
        </header>
        <div className="App-content">
          <button className="btn btn-primary Stream-button"
            // when button is click, our react app tries to request
            // new data from the server.
            // As part of your task, update the getDataFromServer() function
            // to keep requesting the data every 100ms until the app is closed
            // or the server does not return anymore data.
            onClick={() => {this.getDataFromServer()}}>
            Start Streaming Data
          </button>
          <div className="Graph">
            {this.renderGraph()}
          </div>
        </div>
      </div>
    )
  }
}

export default App;``

[chugh-ak5]

Graph.tsx code

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

/**
 * Props declaration for <Graph />
 */
interface IProps {
  data: ServerRespond[],
}

/**
 * Perspective library adds load to HTMLElement prototype.
 * This interface acts as a wrapper for Typescript compiler.
 ** Changed the viewer element to behave like an HTMLElement
 */
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.
    // Changed and assigned the same to the result
    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.
      /// Included the perspective configurations below
      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;```

[ghost]

hi man I didn't it to nice work I found your mistake you need to put single quotes instead of double here

  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"}`);

[ghost]

Graph.tsx code

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

/**
 * Props declaration for <Graph />
 */
interface IProps {
  data: ServerRespond[],
}

/**
 * Perspective library adds load to HTMLElement prototype.
 * This interface acts as a wrapper for Typescript compiler.
 ** Changed the viewer element to behave like an HTMLElement
 */
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.
    // Changed and assigned the same to the result
    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.
      /// Included the perspective configurations below
      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;```

hope this helps

[chugh-ak5]

Ah my bad, yes it worked, thanks man