From d2bb3bdcb7f940d7a1ca16f73a4a7c8c0b058c6e Mon Sep 17 00:00:00 2001 From: Malar Kannan Date: Sat, 23 Jun 2018 13:27:51 +0530 Subject: [PATCH] 1. added csv download load support 2. added chart tag --- package.json | 10 ++- src/App.tsx | 36 +++++------ src/Chart.tsx | 34 +++++++++++ src/ServerTable.tsx | 25 +++++++- src/Utils.tsx | 2 +- yarn.lock | 146 ++++++++++++++++++++++++++++++++++++++++++-- 6 files changed, 226 insertions(+), 27 deletions(-) create mode 100644 src/Chart.tsx diff --git a/package.json b/package.json index be690de..0c86686 100644 --- a/package.json +++ b/package.json @@ -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": "." } diff --git a/src/App.tsx b/src/App.tsx index f75e9b3..c8bef9a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( - - - - Server Table - - Charts - +
+ + + + Server Table + + Charts + - - - - -
- Hello -
- + + + + + - + + + +
); } } diff --git a/src/Chart.tsx b/src/Chart.tsx new file mode 100644 index 0000000..acbc4ae --- /dev/null +++ b/src/Chart.tsx @@ -0,0 +1,34 @@ +import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts'; +import * as React from 'react'; + + +export class Chart extends React.Component { + 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 ( + + + + + + + + ) + } +} diff --git a/src/ServerTable.tsx b/src/ServerTable.tsx index d8e3b97..063e114 100644 --- a/src/ServerTable.tsx +++ b/src/ServerTable.tsx @@ -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 { 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 { { Header: "First Name", accessor: "firstName", - filterMethod:filterPart + filterMethod: filterPart }, { Header: "Last Name", @@ -93,9 +105,16 @@ export class ServerTable extends React.Component { className="-striped -highlight" />
+ Click here to download CSV file ); } + + public loaded(results: any) { + this.setState({ + data: results.data + }); + } } diff --git a/src/Utils.tsx b/src/Utils.tsx index ae52927..375f78b 100755 --- a/src/Utils.tsx +++ b/src/Utils.tsx @@ -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) }; }); } diff --git a/yarn.lock b/yarn.lock index 108a1f3..c8674d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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: