lark
/
server_table
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

1. added csv download load support 

2. added chart tag
master
Malar Kannan 2018-06-23 13:27:51 +05:30
parent 6366cb2bc5
commit d2bb3bdcb7
6 changed files with 226 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -4,11 +4,14 @@
"private": true,
"dependencies": {
"namor": "^1.0.1",
"papaparse": "^4.5.0",
"react": "^16.4.1",
"react-csv": "^1.0.14",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0",
"react-table": "^6.8.6",
"react-tabs": "^2.2.2"
"react-tabs": "^2.2.2",
"recharts": "^1.0.0-beta.10"
},
"scripts": {
"start": "react-scripts-ts start",
@ -19,10 +22,13 @@
"devDependencies": {
"@types/jest": "^23.1.1",
"@types/node": "^10.3.4",
"@types/papaparse": "^4.5.0",
"@types/react": "^16.4.1",
"@types/react-dom": "^16.0.6",
"@types/react-table": "^6.7.11",
"@types/react-tabs": "^1.0.4",
"@types/recharts": "^1.0.23",
"typescript": "^2.9.2"
}
},
"homepage": "."
}

36
src/App.tsx
View File

@ -2,31 +2,33 @@ import * as React from 'react';
import './App.css';
import 'react-tabs/style/react-tabs.css';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import {ServerTable} from './ServerTable';
import { ServerTable } from './ServerTable';
import { Chart } from './Chart';
// import logo from './logo.svg';
class App extends React.Component {
public render() {
return (
<Tabs>
<TabList>
<Tab>
Server Table
</Tab>
<Tab>Charts</Tab>
</TabList>
<div className="App">
<Tabs>
<TabList>
<Tab>
Server Table
</Tab>
<Tab>Charts</Tab>
</TabList>
<TabPanel>
<ServerTable/>
</TabPanel>
<TabPanel>
<div className="App">
Hello
</div>
</TabPanel>
<TabPanel>
<ServerTable />
</TabPanel>
<TabPanel>
<Chart />
</Tabs>
</TabPanel>
</Tabs>
</div>
);
}
}

34
src/Chart.tsx Normal file
View File

@ -0,0 +1,34 @@
import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';
import * as React from 'react';
export class Chart extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render() {
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];
return (
<LineChart
width={400}
height={400}
data={data}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
<Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>
)
}
}

25
src/ServerTable.tsx
View File

@ -1,5 +1,8 @@
import * as React from 'react';
import { makeData, Logo, Tips } from "./Utils";
import { Tips, Logo } from "./Utils";
import * as Papa from 'papaparse';
const readCsv = require('react-csv');
const CSVLink = readCsv.CSVLink;
// Import React Table
import ReactTable from 'react-table';
@ -9,9 +12,18 @@ export class ServerTable extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
data: makeData()
data: []
// data:makeData()
};
this.loaded = this.loaded.bind(this);
Papa.parse('/data.csv', {
header: true,
download: true,
skipEmptyLines: true,
complete: this.loaded
});
}
public render() {
const { data } = this.state;
const filterExact = (filter: any, row: any) =>
@ -32,7 +44,7 @@ export class ServerTable extends React.Component<any, any> {
{
Header: "First Name",
accessor: "firstName",
filterMethod:filterPart
filterMethod: filterPart
},
{
Header: "Last Name",
@ -93,9 +105,16 @@ export class ServerTable extends React.Component<any, any> {
className="-striped -highlight"
/>
<br />
<CSVLink data={data} filename={"data.csv"}>Click here to download CSV file</CSVLink>
<Tips />
<Logo />
</div>
);
}
public loaded(results: any) {
this.setState({
data: results.data
});
}
}

2
src/Utils.tsx
View File

@ -30,7 +30,7 @@ export function makeData(len = 200) {
return range(len).map((_: any) => {
return {
...newPerson(),
children: range(10).map(newPerson)
// children: range(10).map(newPerson)
};
});
}

146
yarn.lock
View File

@ -16,6 +16,16 @@
esutils "^2.0.2"
js-tokens "^3.0.0"
"@types/d3-path@*":
version "1.0.7"
resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.7.tgz#a0736fceed688a695f48265a82ff7a3369414b81"
"@types/d3-shape@*":
version "1.2.3"
resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.2.3.tgz#cadc9f93a626db9190f306048a650df4ffa4e500"
dependencies:
"@types/d3-path" "*"
"@types/jest@^23.1.1":
version "23.1.1"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.1.1.tgz#c54ab1a5f41aa693c0957222dd10414416d0c87b"
@ -24,6 +34,10 @@
version "10.3.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.4.tgz#c74e8aec19e555df44609b8057311052a2c84d9e"
"@types/papaparse@^4.5.0":
version "4.5.0"
resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-4.5.0.tgz#6a3f1ff2d70fa96945617a12edc4b0490a18ec14"
"@types/react-dom@^16.0.6":
version "16.0.6"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"
@ -49,6 +63,13 @@
dependencies:
csstype "^2.2.0"
"@types/recharts@^1.0.23":
version "1.0.23"
resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.0.23.tgz#16919e056cdf7bedbabd764c89bd4a83ca2daed5"
dependencies:
"@types/d3-shape" "*"
"@types/react" "*"
abab@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@ -1425,6 +1446,10 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
classnames@^2.2.0, classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@ -1659,6 +1684,10 @@ copy-descriptor@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
core-js@2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@ -1877,6 +1906,60 @@ cyclist@~0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
d3-array@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
d3-collection@1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
d3-color@1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a"
d3-format@1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.0.tgz#a3ac44269a2011cdb87c7b5693040c18cddfff11"
d3-interpolate@1, d3-interpolate@^1.1.5:
version "1.2.0"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.2.0.tgz#40d81bd8e959ff021c5ea7545bc79b8d22331c41"
dependencies:
d3-color "1"
d3-path@1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
d3-scale@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
dependencies:
d3-array "^1.2.0"
d3-collection "1"
d3-color "1"
d3-format "1"
d3-interpolate "1"
d3-time "1"
d3-time-format "2"
d3-shape@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
dependencies:
d3-path "1"
d3-time-format@2:
version "2.1.1"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31"
dependencies:
d3-time "1"
d3-time@1:
version "1.0.8"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"
d@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@ -2083,6 +2166,10 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -4273,7 +4360,7 @@ lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@~4.17.4:
version "4.17.10"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
@ -4955,6 +5042,10 @@ pako@~1.0.5:
version "1.0.6"
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
papaparse@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-4.5.0.tgz#fb625d390b6e5d544db20658ce3665002c3d8e80"
parallel-transform@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
@ -5463,7 +5554,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.0, prop-types@^15.6.0:
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@ -5557,7 +5648,7 @@ querystringify@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
raf@3.4.0:
raf@3.4.0, raf@^3.2.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
dependencies:
@ -5606,6 +5697,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-csv@^1.0.14:
version "1.0.14"
resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-1.0.14.tgz#7c9e444fc4c3ca1e1cf73a81129b1ec032838a71"
react-dev-utils@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@ -5642,6 +5737,12 @@ react-error-overlay@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
react-resize-detector@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-1.1.0.tgz#4a9831fa3caad32230478dd0185cbd2aa91a5ebf"
dependencies:
prop-types "^15.5.10"
react-scripts-ts@2.16.0:
version "2.16.0"
resolved "https://registry.yarnpkg.com/react-scripts-ts/-/react-scripts-ts-2.16.0.tgz#45f831a12139c3b59d6bb729c1b6ef51e0f22908"
@ -5686,6 +5787,15 @@ react-scripts-ts@2.16.0:
optionalDependencies:
fsevents "^1.1.3"
react-smooth@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-1.0.0.tgz#b29dbebddddb06d21b5b08962167fb9eac1897d8"
dependencies:
lodash "~4.17.4"
prop-types "^15.6.0"
raf "^3.2.0"
react-transition-group "^2.2.1"
react-table@^6.8.6:
version "6.8.6"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.6.tgz#a0ad8b4839319052d5befc012603fb161e52ede3"
@ -5699,6 +5809,14 @@ react-tabs@^2.2.2:
classnames "^2.2.0"
prop-types "^15.5.0"
react-transition-group@^2.2.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
dependencies:
dom-helpers "^3.3.1"
loose-envify "^1.3.1"
prop-types "^15.6.1"
react@^16.4.1:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
@ -5774,6 +5892,26 @@ realpath-native@^1.0.0:
dependencies:
util.promisify "^1.0.0"
recharts-scale@0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.3.2.tgz#dac7621714a4765d152cb2adbc30c73b831208c9"
recharts@^1.0.0-beta.10:
version "1.0.0-beta.10"
resolved "https://registry.yarnpkg.com/recharts/-/recharts-1.0.0-beta.10.tgz#d3cd15df6b7879d5968da3c942b5fcdaf2504fe1"
dependencies:
classnames "2.2.5"
core-js "2.5.1"
d3-interpolate "^1.1.5"
d3-scale "1.0.6"
d3-shape "1.2.0"
lodash "~4.17.4"
prop-types "^15.6.0"
react-resize-detector "1.1.0"
react-smooth "1.0.0"
recharts-scale "0.3.2"
reduce-css-calc "1.3.0"
recursive-readdir@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
@ -5787,7 +5925,7 @@ redent@^1.0.0:
indent-string "^2.1.0"
strip-indent "^1.0.1"
reduce-css-calc@^1.2.6:
reduce-css-calc@1.3.0, reduce-css-calc@^1.2.6:
version "1.3.0"
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
dependencies: