package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "lodash": "^4.17.10",
     "namor": "^1.0.1",
     "papaparse": "^4.5.0",
     "react": "^16.4.1",
@@ -22,7 +21,6 @@
   },
   "devDependencies": {
     "@types/jest": "^23.1.1",
-    "@types/lodash": "^4.14.110",
     "@types/node": "^10.3.4",
     "@types/papaparse": "^4.5.0",
     "@types/react": "^16.4.1",

public/config.json

@@ -1,23 +0,0 @@
-{
-  "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"
-    }
-  ]
-}

public/data.csv

@@ -1,201 +0,0 @@
-"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"

src/App.tsx

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

src/Chart.tsx

@@ -1,6 +1,4 @@
-import {
-  PieChart, Pie, ResponsiveContainer, Tooltip
-} from 'recharts';
+import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';
 import * as React from 'react';
 
 
@@ -9,14 +7,28 @@ export class Chart extends React.Component<any, any> {
     super(props);
   }
   public render() {
-    const data = this.props.data;
+    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 (
-      <ResponsiveContainer width="100%" height={200}>
-        <PieChart>
-          <Pie data={data} dataKey="age" cx={600} cy={100} outerRadius={80} fill="#82ca9d" />
-          <Tooltip />
-        </PieChart>
-      </ResponsiveContainer>
+      <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>
     )
   }
 }

src/ServerTabLoader.tsx

@@ -1,43 +0,0 @@
-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 forceRenderTabPanel={true}>
-        <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>
-    )
-  }
-}

src/ServerTable.tsx

@@ -1,88 +1,119 @@
 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 { 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';
 import "react-table/react-table.css";
 
-export default class ServerTable extends React.Component<any, any> {
+export class ServerTable extends React.Component<any, any> {
   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(this.props.csvFile, {
+      data: []
+      // data:makeData()
+    };
+    this.loaded = this.loaded.bind(this);
+    Papa.parse('/data.csv', {
       header: true,
       download: true,
       skipEmptyLines: true,
-      dynamicTyping: true,
-      complete: loaded
+      complete: this.loaded
     });
   }
 
   public render() {
-    const data = this.state.data;
-    const headers = this.state.headers;
+    const { data } = this.state;
+    const filterExact = (filter: any, row: any) =>
+      String(row[filter.id]) === filter.value;
     const filterPart = (filter: any, row: any) =>
-      String(row[filter.id]).startsWith(filter.value) ||
-      String(row[filter.id]).endsWith(filter.value)
-    const headerGen = (headerName: string) => {
-      const title = headerName
-        .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, (str: string) => str.toUpperCase());
-      return {
-        Header: title,
-        accessor: headerName
-      }
-    }
-    const headerCols = headers.map(headerGen);
+      row[filter.id].startsWith(filter.value) ||
+      row[filter.id].endsWith(filter.value)
     return (
-      <ReactTable
-        data={data}
-        filterable={true}
-        defaultFilterMethod={filterPart}
-        columns={headerCols}
-        showPagination={false}
-        defaultPageSize={100}
-        className="-striped -highlight"
-        style={{
-          height: "500px"
-        }}
-      >
-        {(state, makeTable, ) => {
-          const lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers));
-          return (
-            <div>
-              {makeTable()}
-              {/* <Chart data={lastFiltered} /> */}
-              <CSVLink data={lastFiltered} filename={"data.csv"}>
-                Download CSV
-              </CSVLink>
-              <br />
-              <Tips />
-            </div>
-          )
-        }}
-      </ReactTable>
-
+      <div>
+        <ReactTable
+          data={data}
+          filterable={true}
+          defaultFilterMethod={filterExact}
+          columns={[
+            {
+              Header: "Name",
+              columns: [
+                {
+                  Header: "First Name",
+                  accessor: "firstName",
+                  filterMethod: filterPart
+                },
+                {
+                  Header: "Last Name",
+                  id: "lastName",
+                  accessor: (d: any) => d.lastName
+                }
+              ]
+            },
+            {
+              Header: "Info",
+              columns: [{
+                Header: 'Profile Progress',
+                accessor: 'progress',
+                Cell: (row: any) => (
+                  <div
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      backgroundColor: '#dadada',
+                      borderRadius: '2px'
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: `${row.value}%`,
+                        height: '100%',
+                        backgroundColor: row.value > 66 ? '#85cc00'
+                          : row.value > 33 ? '#ffbf00'
+                            : '#ff2e00',
+                        borderRadius: '2px',
+                        transition: 'all .2s ease-out'
+                      }}
+                    />
+                  </div>
+                )
+              },
+              {
+                Header: "Age",
+                accessor: "age"
+              },
+              {
+                Header: "Status",
+                accessor: "status"
+              }
+              ]
+            },
+            {
+              Header: 'Stats',
+              columns: [
+                {
+                  Header: "Visits",
+                  accessor: "visits"
+                }
+              ]
+            }
+          ]}
+          defaultPageSize={20}
+          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({
-      headers: results.meta.fields,
       data: results.data
     });
   }

src/Tabs.css

@@ -1,53 +0,0 @@
-.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;
-}

yarn.lock

@@ -30,10 +30,6 @@
   version "23.1.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.1.1.tgz#c54ab1a5f41aa693c0957222dd10414416d0c87b"
 
-"@types/lodash@^4.14.110":
-  version "4.14.110"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.110.tgz#fb07498f84152947f30ea09d89207ca07123461e"
-
 "@types/node@*", "@types/node@^10.3.4":
   version "10.3.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.4.tgz#c74e8aec19e555df44609b8057311052a2c84d9e"