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

added config based tab loading

master
Malar Kannan 2018-06-23 23:45:35 +05:30
parent 953395badb
commit 8b936c1a95
6 changed files with 328 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/config.json Normal file
View File

@ -0,0 +1,23 @@
{
"tabList": [{
"tabTitle": "Tab 1",
"fileName": "data.csv"
},
{
"tabTitle": "Tab 2",
"fileName": "data.csv"
},
{
"tabTitle": "Tab 5",
"fileName": "data.csv"
},
{
"tabTitle": "Tab 4",
"fileName": "data.csv"
},
{
"tabTitle": "Tab 4",
"fileName": "data.csv"
}
]
}

201
public/data.csv Normal file
View File

@ -0,0 +1,201 @@
"firstName","lastName","age","visits","progress","status"
"camp","hen","26","94","58","complicated"
"ducks","lip","29","62","5","relationship"
"confusion","hot","15","8","60","single"
"lettuce","cry","15","72","0","complicated"
"movie","tramp","37","32","87","relationship"
"grandmother","freedom","27","4","65","complicated"
"brake","leg","37","84","69","complicated"
"health","women","35","12","82","relationship"
"stitch","box","29","31","97","relationship"
"lawyer","garbage","34","75","38","single"
"leather","atmosphere","37","7","27","complicated"
"tub","achieve","21","34","77","relationship"
"sheep","steel","36","15","35","relationship"
"year","dad","34","91","65","complicated"
"yarn","hand","26","94","89","complicated"
"fairies","porter","26","80","86","complicated"
"sweater","lunchroom","28","80","77","single"
"clover","grandfather","29","93","47","single"
"muscle","circle","31","16","26","relationship"
"resource","sign","28","18","69","single"
"invention","vessel","34","65","38","complicated"
"bath","advice","31","88","89","complicated"
"net","conclusion","11","23","47","complicated"
"paper","leader","22","68","83","relationship"
"manager","airplane","39","50","35","single"
"feedback","range","37","71","96","complicated"
"cactus","lunchroom","10","96","77","relationship"
"measurement","act","26","38","76","relationship"
"bathroom","arm","17","6","95","relationship"
"steak","tension","20","60","8","single"
"player","animal","37","36","86","complicated"
"island","meeting","34","84","71","single"
"system","imagination","39","21","63","single"
"wrench","mother","38","54","96","relationship"
"pies","verse","16","60","78","single"
"group","yarn","26","99","25","relationship"
"color","zephyr","21","70","48","relationship"
"tradition","eye","33","45","50","relationship"
"rainstorm","cigarette","10","93","70","complicated"
"range","equipment","35","83","38","single"
"paste","patience","26","45","70","complicated"
"beer","population","16","93","95","complicated"
"procedure","mode","36","75","54","complicated"
"courage","ladybug","23","35","58","complicated"
"train","invention","37","76","61","relationship"
"chain","kick","13","51","87","single"
"creator","day","25","87","84","relationship"
"building","beam","35","82","23","complicated"
"toothpaste","chocolate","22","97","68","single"
"event","brick","18","27","68","single"
"platform","waves","31","49","10","complicated"
"liquid","attention","19","72","3","complicated"
"crowd","veil","23","81","40","single"
"park","recipe","14","38","22","single"
"apparel","stamp","12","31","21","single"
"wind","scarf","20","78","1","complicated"
"chocolate","channel","35","26","86","relationship"
"examination","sheep","28","54","65","relationship"
"homework","coil","18","24","95","single"
"achieve","cancer","24","78","84","complicated"
"believe","writer","18","46","50","relationship"
"giraffe","park","31","6","27","complicated"
"role","chapter","15","31","29","relationship"
"increase","pull","22","37","28","relationship"
"metal","volcano","17","1","51","complicated"
"volleyball","cheek","26","40","3","relationship"
"creature","apparel","17","91","49","complicated"
"stomach","wound","22","9","83","single"
"pollution","room","29","76","99","complicated"
"farm","sir","24","81","80","relationship"
"sense","wood","15","27","57","complicated"
"string","guitar","36","66","97","relationship"
"hour","mass","38","49","62","complicated"
"user","lace","32","84","87","relationship"
"personality","pot","27","73","72","single"
"force","books","11","87","81","relationship"
"trousers","current","34","2","3","single"
"board","proposal","16","53","34","complicated"
"amusement","series","11","52","71","relationship"
"interaction","level","16","19","33","complicated"
"child","muscle","33","12","63","single"
"cars","goose","10","18","90","relationship"
"window","belief","16","74","94","complicated"
"goal","editor","10","23","55","complicated"
"physics","airport","19","87","36","relationship"
"hook","mall","13","37","24","complicated"
"wheel","boundary","31","94","60","relationship"
"team","picture","18","89","53","complicated"
"kick","song","33","57","20","relationship"
"childhood","cork","27","75","64","single"
"suggestion","belief","32","3","44","complicated"
"zipper","quality","33","42","95","complicated"
"apparel","truck","25","8","42","single"
"snakes","writer","14","1","44","relationship"
"yak","bee","16","12","90","single"
"nut","complaint","18","69","48","single"
"range","rice","39","90","95","single"
"face","hand","29","57","58","complicated"
"umbrella","seat","27","17","7","single"
"cattle","name","29","69","54","complicated"
"health","advice","31","65","82","relationship"
"sleet","ground","16","75","83","complicated"
"beggar","root","33","29","47","relationship"
"flavor","owner","32","91","44","single"
"friends","bead","17","82","30","relationship"
"clam","pen","33","28","56","relationship"
"plate","base","11","25","47","relationship"
"month","situation","35","96","67","relationship"
"juice","science","39","62","26","relationship"
"kiss","belief","32","89","71","complicated"
"bomb","leg","38","11","6","complicated"
"literature","tub","28","51","57","complicated"
"tub","meat","24","49","22","single"
"afterthought","top","18","81","19","complicated"
"bedroom","permission","35","65","53","complicated"
"phone","minister","16","79","67","relationship"
"payment","aftermath","32","14","36","complicated"
"appointment","letters","22","27","82","complicated"
"dime","tiger","34","56","30","relationship"
"circle","hair","21","59","52","single"
"professor","ray","30","6","96","complicated"
"curtain","pear","10","9","95","relationship"
"foot","teacher","13","60","44","complicated"
"knot","lizards","23","5","19","complicated"
"writing","front","19","0","97","relationship"
"story","planes","21","22","0","relationship"
"surprise","sea","24","3","54","relationship"
"hate","drink","18","2","13","complicated"
"watch","video","29","85","8","relationship"
"touch","sponge","15","34","89","complicated"
"freedom","system","13","69","7","complicated"
"brass","goat","12","86","44","relationship"
"boyfriend","regret","26","53","9","complicated"
"attention","zebra","28","74","24","relationship"
"blow","addition","13","71","30","relationship"
"low","politics","35","69","43","complicated"
"library","brain","34","3","64","relationship"
"egg","earth","21","15","84","relationship"
"laugh","structure","15","75","2","complicated"
"cattle","writing","39","25","55","complicated"
"books","condition","10","75","8","relationship"
"property","spy","28","33","18","complicated"
"river","sugar","36","40","15","complicated"
"kick","development","30","66","80","single"
"river","need","21","14","24","relationship"
"arithmetic","edge","34","13","9","complicated"
"dock","chocolate","29","22","23","complicated"
"sink","badge","29","21","43","complicated"
"marble","insurance","34","50","38","complicated"
"fireman","joke","29","91","14","complicated"
"sleet","parcel","37","99","69","complicated"
"youth","depression","37","50","39","single"
"kitten","quality","21","74","75","single"
"context","increase","15","4","96","complicated"
"lunchroom","depth","15","65","44","complicated"
"flight","stretch","35","63","39","complicated"
"grass","solution","12","34","92","single"
"pull","boot","17","62","33","complicated"
"riddle","team","34","82","73","single"
"proposal","route","25","3","74","relationship"
"sky","room","37","83","7","single"
"penalty","love","27","34","36","single"
"substance","version","12","71","7","single"
"straw","chairs","35","66","99","complicated"
"internet","dust","38","54","17","single"
"memory","introduction","33","65","39","single"
"interest","back","10","70","20","relationship"
"party","baseball","29","55","45","relationship"
"grade","mixture","38","38","84","relationship"
"cry","heart","16","16","13","complicated"
"home","temperature","25","92","2","relationship"
"hope","meeting","37","20","16","complicated"
"slope","drama","35","22","66","single"
"basis","floor","38","34","65","relationship"
"message","whistle","24","89","13","complicated"
"cracker","goldfish","39","85","47","relationship"
"definition","dolls","24","62","67","single"
"initiative","produce","34","31","8","complicated"
"guidance","dock","10","89","57","complicated"
"channel","percentage","20","46","88","relationship"
"salad","ornament","26","52","76","relationship"
"editor","mom","16","11","32","relationship"
"drop","digestion","31","12","53","relationship"
"wedding","relation","25","69","19","complicated"
"cakes","ball","21","24","47","single"
"boys","carpenter","23","69","91","single"
"video","glass","14","51","66","single"
"manufacturer","rainstorm","10","6","33","single"
"sort","dogs","23","69","87","single"
"maintenance","activity","38","25","82","relationship"
"amount","contribution","36","53","95","relationship"
"entertainment","storage","26","70","62","complicated"
"protest","permission","31","86","76","complicated"
"midnight","camp","36","16","70","single"
"quarter","window","15","51","46","single"
"mom","mountain","35","81","1","relationship"
"manufacturer","inflation","38","4","89","single"
"prison","stick","15","28","25","relationship"
"injury","stone","22","35","43","single"
"representative","delivery","11","80","5","single"
1 firstName lastName age visits progress status
2 camp hen 26 94 58 complicated
3 ducks lip 29 62 5 relationship
4 confusion hot 15 8 60 single
5 lettuce cry 15 72 0 complicated
6 movie tramp 37 32 87 relationship
7 grandmother freedom 27 4 65 complicated
8 brake leg 37 84 69 complicated
9 health women 35 12 82 relationship
10 stitch box 29 31 97 relationship
11 lawyer garbage 34 75 38 single
12 leather atmosphere 37 7 27 complicated
13 tub achieve 21 34 77 relationship
14 sheep steel 36 15 35 relationship
15 year dad 34 91 65 complicated
16 yarn hand 26 94 89 complicated
17 fairies porter 26 80 86 complicated
18 sweater lunchroom 28 80 77 single
19 clover grandfather 29 93 47 single
20 muscle circle 31 16 26 relationship
21 resource sign 28 18 69 single
22 invention vessel 34 65 38 complicated
23 bath advice 31 88 89 complicated
24 net conclusion 11 23 47 complicated
25 paper leader 22 68 83 relationship
26 manager airplane 39 50 35 single
27 feedback range 37 71 96 complicated
28 cactus lunchroom 10 96 77 relationship
29 measurement act 26 38 76 relationship
30 bathroom arm 17 6 95 relationship
31 steak tension 20 60 8 single
32 player animal 37 36 86 complicated
33 island meeting 34 84 71 single
34 system imagination 39 21 63 single
35 wrench mother 38 54 96 relationship
36 pies verse 16 60 78 single
37 group yarn 26 99 25 relationship
38 color zephyr 21 70 48 relationship
39 tradition eye 33 45 50 relationship
40 rainstorm cigarette 10 93 70 complicated
41 range equipment 35 83 38 single
42 paste patience 26 45 70 complicated
43 beer population 16 93 95 complicated
44 procedure mode 36 75 54 complicated
45 courage ladybug 23 35 58 complicated
46 train invention 37 76 61 relationship
47 chain kick 13 51 87 single
48 creator day 25 87 84 relationship
49 building beam 35 82 23 complicated
50 toothpaste chocolate 22 97 68 single
51 event brick 18 27 68 single
52 platform waves 31 49 10 complicated
53 liquid attention 19 72 3 complicated
54 crowd veil 23 81 40 single
55 park recipe 14 38 22 single
56 apparel stamp 12 31 21 single
57 wind scarf 20 78 1 complicated
58 chocolate channel 35 26 86 relationship
59 examination sheep 28 54 65 relationship
60 homework coil 18 24 95 single
61 achieve cancer 24 78 84 complicated
62 believe writer 18 46 50 relationship
63 giraffe park 31 6 27 complicated
64 role chapter 15 31 29 relationship
65 increase pull 22 37 28 relationship
66 metal volcano 17 1 51 complicated
67 volleyball cheek 26 40 3 relationship
68 creature apparel 17 91 49 complicated
69 stomach wound 22 9 83 single
70 pollution room 29 76 99 complicated
71 farm sir 24 81 80 relationship
72 sense wood 15 27 57 complicated
73 string guitar 36 66 97 relationship
74 hour mass 38 49 62 complicated
75 user lace 32 84 87 relationship
76 personality pot 27 73 72 single
77 force books 11 87 81 relationship
78 trousers current 34 2 3 single
79 board proposal 16 53 34 complicated
80 amusement series 11 52 71 relationship
81 interaction level 16 19 33 complicated
82 child muscle 33 12 63 single
83 cars goose 10 18 90 relationship
84 window belief 16 74 94 complicated
85 goal editor 10 23 55 complicated
86 physics airport 19 87 36 relationship
87 hook mall 13 37 24 complicated
88 wheel boundary 31 94 60 relationship
89 team picture 18 89 53 complicated
90 kick song 33 57 20 relationship
91 childhood cork 27 75 64 single
92 suggestion belief 32 3 44 complicated
93 zipper quality 33 42 95 complicated
94 apparel truck 25 8 42 single
95 snakes writer 14 1 44 relationship
96 yak bee 16 12 90 single
97 nut complaint 18 69 48 single
98 range rice 39 90 95 single
99 face hand 29 57 58 complicated
100 umbrella seat 27 17 7 single
101 cattle name 29 69 54 complicated
102 health advice 31 65 82 relationship
103 sleet ground 16 75 83 complicated
104 beggar root 33 29 47 relationship
105 flavor owner 32 91 44 single
106 friends bead 17 82 30 relationship
107 clam pen 33 28 56 relationship
108 plate base 11 25 47 relationship
109 month situation 35 96 67 relationship
110 juice science 39 62 26 relationship
111 kiss belief 32 89 71 complicated
112 bomb leg 38 11 6 complicated
113 literature tub 28 51 57 complicated
114 tub meat 24 49 22 single
115 afterthought top 18 81 19 complicated
116 bedroom permission 35 65 53 complicated
117 phone minister 16 79 67 relationship
118 payment aftermath 32 14 36 complicated
119 appointment letters 22 27 82 complicated
120 dime tiger 34 56 30 relationship
121 circle hair 21 59 52 single
122 professor ray 30 6 96 complicated
123 curtain pear 10 9 95 relationship
124 foot teacher 13 60 44 complicated
125 knot lizards 23 5 19 complicated
126 writing front 19 0 97 relationship
127 story planes 21 22 0 relationship
128 surprise sea 24 3 54 relationship
129 hate drink 18 2 13 complicated
130 watch video 29 85 8 relationship
131 touch sponge 15 34 89 complicated
132 freedom system 13 69 7 complicated
133 brass goat 12 86 44 relationship
134 boyfriend regret 26 53 9 complicated
135 attention zebra 28 74 24 relationship
136 blow addition 13 71 30 relationship
137 low politics 35 69 43 complicated
138 library brain 34 3 64 relationship
139 egg earth 21 15 84 relationship
140 laugh structure 15 75 2 complicated
141 cattle writing 39 25 55 complicated
142 books condition 10 75 8 relationship
143 property spy 28 33 18 complicated
144 river sugar 36 40 15 complicated
145 kick development 30 66 80 single
146 river need 21 14 24 relationship
147 arithmetic edge 34 13 9 complicated
148 dock chocolate 29 22 23 complicated
149 sink badge 29 21 43 complicated
150 marble insurance 34 50 38 complicated
151 fireman joke 29 91 14 complicated
152 sleet parcel 37 99 69 complicated
153 youth depression 37 50 39 single
154 kitten quality 21 74 75 single
155 context increase 15 4 96 complicated
156 lunchroom depth 15 65 44 complicated
157 flight stretch 35 63 39 complicated
158 grass solution 12 34 92 single
159 pull boot 17 62 33 complicated
160 riddle team 34 82 73 single
161 proposal route 25 3 74 relationship
162 sky room 37 83 7 single
163 penalty love 27 34 36 single
164 substance version 12 71 7 single
165 straw chairs 35 66 99 complicated
166 internet dust 38 54 17 single
167 memory introduction 33 65 39 single
168 interest back 10 70 20 relationship
169 party baseball 29 55 45 relationship
170 grade mixture 38 38 84 relationship
171 cry heart 16 16 13 complicated
172 home temperature 25 92 2 relationship
173 hope meeting 37 20 16 complicated
174 slope drama 35 22 66 single
175 basis floor 38 34 65 relationship
176 message whistle 24 89 13 complicated
177 cracker goldfish 39 85 47 relationship
178 definition dolls 24 62 67 single
179 initiative produce 34 31 8 complicated
180 guidance dock 10 89 57 complicated
181 channel percentage 20 46 88 relationship
182 salad ornament 26 52 76 relationship
183 editor mom 16 11 32 relationship
184 drop digestion 31 12 53 relationship
185 wedding relation 25 69 19 complicated
186 cakes ball 21 24 47 single
187 boys carpenter 23 69 91 single
188 video glass 14 51 66 single
189 manufacturer rainstorm 10 6 33 single
190 sort dogs 23 69 87 single
191 maintenance activity 38 25 82 relationship
192 amount contribution 36 53 95 relationship
193 entertainment storage 26 70 62 complicated
194 protest permission 31 86 76 complicated
195 midnight camp 36 16 70 single
196 quarter window 15 51 46 single
197 mom mountain 35 81 1 relationship
198 manufacturer inflation 38 4 89 single
199 prison stick 15 28 25 relationship
200 injury stone 22 35 43 single
201 representative delivery 11 80 5 single

4
src/App.tsx
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import './App.css';
import ServerTable from './ServerTable';
import ServerTabLoader from './ServerTabLoader';
class App extends React.Component {
public render() {
return (
<div className="App">
<ServerTable />
<ServerTabLoader/>
</div>
);
}

43
src/ServerTabLoader.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from 'react';
import * as _ from 'lodash';
import ServerTable from './ServerTable';
import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
import './Tabs.css';
export default class ServerTabLoader extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
tabList: []
}
fetch('/config.json')
.then((response) => response.text())
.then((jsonStr) => {
const jsonObj = JSON.parse(jsonStr);
const tabList = _.get<any>(jsonObj, 'tabList', []);
this.setState({ tabList });
})
.catch((e) => {
this.setState({ message: e.stack, showMessage: true });
});
}
public render() {
return (
<Tabs>
<TabList>
{this.state.tabList.map((o: any, i: number) =>
(<Tab key={i}>{o.tabTitle}</Tab>)
)}
</TabList>
{this.state.tabList.map((o: any, i: number) =>
(<TabPanel key={i}>
<ServerTable csvFile={o.fileName} />
</TabPanel>
)
)}
</Tabs>
)
}
}

11
src/ServerTable.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { Tips } from "./Utils";
import * as _ from 'lodash';
import { Chart } from './Chart';
// import { Chart } from './Chart';
const reactcsv = require('react-csv');
const CSVLink = reactcsv.CSVLink;
import * as Papa from 'papaparse';
@ -23,7 +23,7 @@ export default class ServerTable extends React.Component<any, any> {
data: results.data
});
}
Papa.parse('/data.csv', {
Papa.parse(this.props.csvFile, {
header: true,
download: true,
skipEmptyLines: true,
@ -54,10 +54,11 @@ export default class ServerTable extends React.Component<any, any> {
filterable={true}
defaultFilterMethod={filterPart}
columns={headerCols}
defaultPageSize={20}
showPagination={false}
defaultPageSize={100}
className="-striped -highlight"
style={{
height: "450px"
height: "550px"
}}
>
{(state, makeTable, ) => {
@ -65,7 +66,7 @@ export default class ServerTable extends React.Component<any, any> {
return (
<div>
{makeTable()}
<Chart data={lastFiltered} />
{/* <Chart data={lastFiltered} /> */}
<CSVLink data={lastFiltered} filename={"data.csv"}>
Click here to download CSV file
</CSVLink>

53
src/Tabs.css Normal file
View File

@ -0,0 +1,53 @@
.react-tabs__tab-list {
border-bottom: 1px solid #aaa;
margin: 0 0 10px;
padding: 0;
text-align: left;
}
.react-tabs__tab {
display: inline-block;
border: 1px solid transparent;
border-bottom: none;
bottom: -1px;
position: relative;
list-style: none;
padding: 6px 12px;
cursor: pointer;
}
.react-tabs__tab--selected {
background: #fff;
border-color: #aaa;
color: black;
border-radius: 5px 5px 0 0;
}
.react-tabs__tab--disabled {
color: GrayText;
cursor: default;
}
.react-tabs__tab:focus {
box-shadow: 0 0 5px hsl(208, 99%, 50%);
border-color: hsl(208, 99%, 50%);
outline: none;
}
.react-tabs__tab:focus:after {
content: "";
position: absolute;
height: 5px;
left: -4px;
right: -4px;
bottom: -5px;
background: #fff;
}
.react-tabs__tab-panel {
display: none;
}
.react-tabs__tab-panel--selected {
display: block;
}