Problem with graph.tsx

[aashrith2021]

---

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 | }

[purvaagaikwad]

try importing this in Graph.tsx import { DataManipulator } from './DataManipulator';

[KMurray26]

try importing this in Graph.tsx import { DataManipulator } from './DataManipulator';

I am also having the same issue, and have attempted to import this but it has made no difference and I am still getting the same error as OP.

[Volody47]

Me too, Guys how did you solve it?

[Volody47]

Hi, i got it. So, the problem was with "}", make sure to close it properly!!! my 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('row-pivots', '["timestamp"]');
  elem.setAttribute('columns', '["ratio", "lower_bound", "upper_bound", "trigger_alert"]');
  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; `