diff --git a/src/App.tsx b/src/App.tsx index 6390085..af3d31a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import './App.css'; -import ServerAnalytics from './ServerAnalytics'; +import ServerTable from './ServerTable'; class App extends React.Component { public render() { return (
- +
); } diff --git a/src/Chart.tsx b/src/Chart.tsx index fc6e92d..ff738a0 100644 --- a/src/Chart.tsx +++ b/src/Chart.tsx @@ -11,9 +11,9 @@ export class Chart extends React.Component { public render() { const data = this.props.data; return ( - + - + diff --git a/src/ServerAnalytics.tsx b/src/ServerAnalytics.tsx deleted file mode 100644 index a0749d2..0000000 --- a/src/ServerAnalytics.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import 'react-tabs/style/react-tabs.css'; -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; -import { ServerTable } from './ServerTable'; -import { Chart } from './Chart'; -import * as Papa from 'papaparse'; - -export default class ServerAnalytics extends React.Component { - constructor(props: any) { - super(props); - this.state = { - filteredData: [], - headers: [], - data: [] - } - const loaded = (results: any) => { - const localstate = this; - localstate.setState({ - headers: results.meta.fields, - data: results.data - }); - } - Papa.parse('/data.csv', { - header: true, - download: true, - skipEmptyLines: true, - dynamicTyping: true, - complete: loaded - }); - } - public render() { - const setData = (filteredData: any) => { - this.setState({ - filteredData - }); - }; - const data = this.state.data; - const headers = this.state.headers; - return ( -
- - - - Server Table - - Charts - - - - - - - - -
- ); - } -} diff --git a/src/ServerTable.tsx b/src/ServerTable.tsx index 8d56d5f..9016d04 100644 --- a/src/ServerTable.tsx +++ b/src/ServerTable.tsx @@ -1,22 +1,40 @@ import * as React from 'react'; import { Tips } from "./Utils"; import * as _ from 'lodash'; +import { Chart } from './Chart'; const reactcsv = require('react-csv'); const CSVLink = reactcsv.CSVLink; +import * as Papa from 'papaparse'; // Import React Table import ReactTable from 'react-table'; import "react-table/react-table.css"; -export class ServerTable extends React.Component { - private lastFiltered: any[] = [] +export default class ServerTable extends React.Component { constructor(props: any) { super(props); + this.state = { + headers: [], data: [] + } + const loaded = (results: any) => { + const localstate = this; + localstate.setState({ + headers: results.meta.fields, + data: results.data + }); + } + Papa.parse('/data.csv', { + header: true, + download: true, + skipEmptyLines: true, + dynamicTyping: true, + complete: loaded + }); } public render() { - const data = this.props.data; - const headers = this.props.headers; + const data = this.state.data; + const headers = this.state.headers; const filterPart = (filter: any, row: any) => String(row[filter.id]).startsWith(filter.value) || String(row[filter.id]).endsWith(filter.value) @@ -29,7 +47,6 @@ export class ServerTable extends React.Component { accessor: headerName } } - debugger; const headerCols = headers.map(headerGen); return ( { height: "450px" }} > - {(state, makeTable,) => { - this.lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers)); + {(state, makeTable, ) => { + const lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers)); return (
{makeTable()} - + + Click here to download CSV file
@@ -61,10 +79,6 @@ export class ServerTable extends React.Component { ); } - public componentWillUnmount() { - this.props.setData(this.lastFiltered); - } - public loaded(results: any) { this.setState({ headers: results.meta.fields,