Skip to content

Instantly share code, notes, and snippets.

@gallirohik
Created January 30, 2019 13:09
Show Gist options
  • Save gallirohik/efae516670b4f38797b95e48286ce5eb to your computer and use it in GitHub Desktop.
Save gallirohik/efae516670b4f38797b95e48286ce5eb to your computer and use it in GitHub Desktop.
Dashboard project
import React, { Component } from "react";
import DataGrid from "./dataGrid";
import LineChart from "./charts/LineChart";
class MainContent extends Component {
constructor() {
super();
this.state = {
columnDefs: [
{
headerName: "Name",
field: "name",
checkboxSelection: true,
sortable: true,
filter: true
},
{ headerName: "Year", field: "year", sortable: true, filter: true },
{
headerName: "Quarter",
field: "quarter",
sortable: true,
filter: true
},
{ headerName: "Count", field: "count", sortable: true, filter: true }
],
rowData: [],
chartData: []
};
}
componentDidMount() {
fetch("https://nataliia-radina.github.io/react-vis-example/")
.then(response => response.json())
.then(data => {
this.setState({
rowData: data.results,
chartData: data.results.filter(data => data.name === "JavaScript")
});
});
}
render() {
return (
<React.Fragment>
<div className="main-container">
<div className="data-grid">
<DataGrid
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
rowSelection={"multiple"}
/>
</div>
<div className="data-chart">
<LineChart chartData={this.state.chartData} />
</div>
</div>
</React.Fragment>
);
}
}
export default MainContent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment