Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

completed task two with all necessary changes #314

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added changes.patch
Binary file not shown.
27 changes: 21 additions & 6 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import './App.css';
*/
interface IState {
data: ServerRespond[],
showGraph:boolean, //added showGraph property as boolean
}

/**
Expand All @@ -22,25 +23,39 @@ class App extends Component<{}, IState> {
// data saves the server responds.
// We use this state to parse data down to the child element (Graph) as element property
data: [],
showGraph: false, // set showGraph as false as it will be shown when user clicks 'Start Streaming Data'
};
}

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

return (<Graph data={this.state.data}/>) // added condition to render graph only when user click start streaming button
}
}

/**
* Get new data from server and update the state with the new data
*/
getDataFromServer() {
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: [...this.state.data, ...serverResponds] });
});
//below made all the necessary changes in getDataFromServer() to contact the server and get data continously
let x=0;
const interval = setInterval(()=>{

DataStreamer.getData((serverResponds: ServerRespond[]) => {
this.setState({
data:serverResponds,
showGraph:true,
});
});
x++;
if(x>1000){
clearInterval(interval);
}
},100);
}

/**
Expand Down
17 changes: 13 additions & 4 deletions src/Graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface IProps {
* Perspective library adds load to HTMLElement prototype.
* This interface acts as a wrapper for Typescript compiler.
*/
interface PerspectiveViewerElement {
interface PerspectiveViewerElement extends HTMLElement {
load: (table: Table) => void,
}

Expand All @@ -32,15 +32,24 @@ class Graph extends Component<IProps, {}> {

componentDidMount() {
// Get element to attach the table from the DOM.
const elem: PerspectiveViewerElement = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;

const elem= document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement; // assigned directly to the document.getElementsByTagName


const schema = {
stock: 'string',
top_ask_price: 'float',
top_bid_price: 'float',
timestamp: 'date',
};

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"}`);
if (window.perspective && window.perspective.worker()) {
this.table = window.perspective.worker().table(schema);
}
Expand Down