Update '.gitignore'

2. search is case insensitive on tables
3. text aligned left

.env

@@ -0,0 +1,3 @@
+GENERATE_SOURCEMAP=false
+REACT_APP_API_HOST="http://localhost:5000/test/"
+REACT_APP_API_DIR="/test/"

.env.development

@@ -0,0 +1,2 @@
+REACT_APP_API_HOST="http://localhost:3000/"
+REACT_APP_API_DIR="/"

.gitignore

@@ -66,6 +66,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+build/
 
 # Typescript v1 declaration files
 typings/

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bloomer": "^0.6.3",
+    "bulma": "^0.7.1",
+    "localforage": "^1.7.2",
+    "lodash": "^4.17.10",
     "namor": "^1.0.1",
     "papaparse": "^4.5.0",
+    "randomcolor": "^0.5.3",
     "react": "^16.4.1",
     "react-csv": "^1.0.14",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts-ts": "2.16.0",
     "react-table": "^6.8.6",
     "react-tabs": "^2.2.2",
@@ -21,10 +27,14 @@
   },
   "devDependencies": {
     "@types/jest": "^23.1.1",
+    "@types/localforage": "^0.0.34",
+    "@types/lodash": "^4.14.110",
     "@types/node": "^10.3.4",
     "@types/papaparse": "^4.5.0",
+    "@types/randomcolor": "^0.4.3",
     "@types/react": "^16.4.1",
     "@types/react-dom": "^16.0.6",
+    "@types/react-router-dom": "^4.2.7",
     "@types/react-table": "^6.7.11",
     "@types/react-tabs": "^1.0.4",
     "@types/recharts": "^1.0.23",

public/.htaccess

@@ -0,0 +1,4 @@
+Options -MultiViews
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.html [QSA,L]

public/config.json

@@ -0,0 +1,51 @@
+{
+  "tabList": [{
+      "tabTitle": "Tab 1",
+      "fileName": "data.csv",
+      "colorColumn": "status"
+    },
+    {
+      "tabTitle": "Tab 2",
+      "fileName": "data.csv"
+    },
+    {
+      "tabTitle": "Tab 5",
+      "fileName": "data.csv"
+    },
+    {
+      "tabTitle": "Tab 4",
+      "fileName": "data.csv"
+    },
+    {
+      "tabTitle": "Tab 6",
+      "fileName": "data.csv"
+    }
+  ],
+  "chartList": [{
+      "chartTitle": "Status Plot",
+      "fileName": "data.csv",
+      "chartColumn": "status"
+    },
+    {
+      "fileName": "data.csv",
+      "chartColumn": "age"
+    }, {
+      "chartTitle": "Another Status Plot",
+      "fileName": "data.csv",
+      "chartColumn": "status"
+    }, {
+      "chartTitle": "Yet Another Status Plot",
+      "fileName": "data.csv",
+      "chartColumn": "status"
+    }, {
+      "fileName": "data.csv",
+      "chartColumn": "status"
+    }
+  ],
+  "colorMaps": {
+    "status": {
+      "complicated": "red",
+      "single": "green"
+    }
+  }
+}

public/data.csv

@@ -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"

src/App.css

@@ -22,7 +22,24 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
+.navbar-item:hover {
-  from { transform: rotate(0deg); }
+  background-color: rgba(10, 10, 10, .1);
-  to { transform: rotate(360deg); }
+  color: white;
+}
+
+/* body {
+  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+} */
+
+a,a:hover {
+  color: white;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/App.tsx

@@ -1,33 +1,13 @@
 import * as React from 'react';
+import 'bulma/css/bulma.css';
 import './App.css';
-import 'react-tabs/style/react-tabs.css';
+import RouteMenu from './RouteMenu';
-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">
-        <Tabs>
+        <RouteMenu />
-          <TabList>
-            <Tab>
-              Server Table
-            </Tab>
-            <Tab>Charts</Tab>
-          </TabList>
-
-          <TabPanel>
-            <ServerTable />
-          </TabPanel>
-          <TabPanel>
-            <Chart />
-
-          </TabPanel>
-
-        </Tabs>
       </div>
     );
   }

src/Chart.tsx

@@ -1,34 +1,80 @@
-import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';
+import {
+  PieChart, Pie, ResponsiveContainer, Tooltip, Cell
+} from 'recharts';
 import * as React from 'react';
+import * as _ from 'lodash';
+import { Card, CardImage, CardHeader, CardHeaderTitle } from 'bloomer';
+const randomColor = require('randomcolor');
+import * as Papa from 'papaparse';
 
 
 export class Chart extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
+    this.state = { data: [] };
+    const loaded = (results: any) => {
+      const local = this;
+      local.setState({
+        headers: results.meta.fields,
+        data: results.data,
+      });
+    }
+    Papa.parse(this.props.csvFile, {
+      header: true,
+      download: true,
+      skipEmptyLines: true,
+      dynamicTyping: true,
+      complete: loaded
+    });
   }
   public render() {
-    const data = [
+    const data = this.state.data;
-      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
+    const countMap = _.countBy(data, (o: any) => _.get<any>(o, this.props.chartColumn))
-      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
+    const chartData = _.map(_.keys(countMap), (k: any) => {
-      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
+      return {
-      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
+        name: k,
-      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
+        value: countMap[k],
-      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
+      }
-      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
+    })
-    ];
+    // const RADIAN = Math.PI / 180;
+    // const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }:any) => {
+    //  	const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    //   const x  = cx + radius * Math.cos(-midAngle * RADIAN);
+    //   const y = cy  + radius * Math.sin(-midAngle * RADIAN);
+    //
+    //   return (
+    //     <text x={x} y={y} fill="white" textAnchor='middle' 	dominantBaseline="central">
+    //     	{chartData[index].name}
+    //     </text>
+    //   );
+    // };
+    const colorMap = this.props.colorMap;
+    // const LabeText = (props: any) => {
+    //   return (<text>{props.name}</text>);
+    // };
     return (
-      <LineChart
+      <Card>
-        width={400}
+        <CardHeader>
-        height={400}
+          <CardHeaderTitle className='is-centered'>
-        data={data}
+            {this.props.title}
-        margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
+          </CardHeaderTitle>
-      >
+        </CardHeader>
-        <XAxis dataKey="name" />
+        <CardImage>
-        <Tooltip />
+          <ResponsiveContainer width="100%" height={300}>
-        <CartesianGrid stroke="#f5f5f5" />
+            <PieChart>
-        <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
+              <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
-        <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
+                {
-      </LineChart>
+                  chartData.map((_0, _1) => {
+                    const color = _.get(colorMap, _0.name, randomColor());
+                    return (<Cell key={_1} fill={color} />)
+                  })
+                }
+              </Pie>
+              <Tooltip />
+            </PieChart>
+          </ResponsiveContainer>
+        </CardImage>
+      </Card>
     )
   }
 }

src/ChartLoader.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Columns, Column } from 'bloomer';
+import { Chart } from './Chart';
+
+export default class ChartLoader extends React.Component<any, any> {
+  public render() {
+    const colorMaps = this.props.colorMaps;
+    return (
+      <Columns isCentered={true} isMultiline={true} style={{
+        backgroundColor:'#f0f0f0'
+      }}>
+        {this.props.chartList.map((o: any, i: number) => {
+          const colorMap = colorMaps[o.chartColumn];
+          return (
+            <Column key={i} isSize={4}>
+              <Chart
+                csvFile={o.fileName} chartColumn={o.chartColumn}
+                colorMap={colorMap} title={o.chartTitle ? o.chartTitle: o.chartColumn}
+              />
+            </Column>
+          );
+        })}
+      </Columns>
+    )
+  }
+}

src/Config.tsx

@@ -0,0 +1,2 @@
+export const apiHost = process.env.REACT_APP_API_HOST
+export const apiDir = process.env.REACT_APP_API_DIR

src/RouteMenu.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  BrowserRouter as Router,
+  Route, Redirect,
+  Link
+} from 'react-router-dom';
+import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
+import * as local from 'localforage';
+import ServerTabLoader from './ServerTabLoader';
+import ChartLoader from './ChartLoader';
+import { apiDir } from './Config';
+
+const navButton = (name: string, link: string) => (
+  <Link to={link}>{name}</Link>
+);
+
+const RedirectCharts = () => (<Redirect to={apiDir+'charts'} />);
+
+class RouteMenu extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      tabList: [],
+      chartList: [],
+      colorMaps: {}
+    }
+    fetch(apiDir+'config.json')
+      .then((response) => response.text())
+      .then((jsonStr) => {
+        const jsonObj = JSON.parse(jsonStr);
+        this.setState({ ...jsonObj });
+        local.setItem('config', jsonObj).catch((err: any) => {
+          console.error('error occurred when saving config', err);
+        });
+      })
+      .catch((e) => {
+        console.error('error occurred when loading config', e);
+      });
+  }
+
+  public render() {
+    const ConfiguredChart = () => (<ChartLoader {...this.state} />);
+    const ConfiguredServerTab = () => (<ServerTabLoader {...this.state} />);
+    return (
+      <Router>
+        <div>
+          <Container isFluid={true} isMarginless={true} isFullWidth={true}>
+            <Navbar style={{ backgroundColor: '#00D1B2' }}>
+              <NavbarMenu isActive={true}>
+                <NavbarItem >{navButton('Charts', apiDir + 'charts')}</NavbarItem>
+                <NavbarItem>{navButton('Tables', apiDir + 'tables')}</NavbarItem>
+              </NavbarMenu>
+            </Navbar>
+          </Container>
+          <Section isPaddingless={true}>
+            <Route exact={true} path={apiDir} component={RedirectCharts} />
+            <Route path={apiDir + "charts"} component={ConfiguredChart} />
+            <Route path={apiDir + "tables"} component={ConfiguredServerTab} />
+          </Section>
+        </div>
+      </Router>
+    );
+  }
+}
+export default RouteMenu

src/ServerTabLoader.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import ServerTable from './ServerTable';
+import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
+import { Hero, HeroBody } from 'bloomer';
+import './Tabs.css';
+
+
+export default class ServerTabLoader extends React.Component<any, any> {
+  public render() {
+    return (
+      <Hero isColor='light' isSize='large' isFullWidth={true} isFullHeight={true}>
+        <HeroBody isPaddingless={true} isDisplay='block'>
+          <Tabs forceRenderTabPanel={true}>
+            <TabList>
+              {this.props.tabList.map((o: any, i: number) =>
+                (<Tab key={i}>{o.tabTitle}</Tab>)
+              )}
+            </TabList>
+            {this.props.tabList.map((o: any, i: number) => {
+              const colorMap = this.props.colorMaps[o.colorColumn];
+              return (
+                <TabPanel key={i}>
+                  <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={colorMap} />
+                </TabPanel>
+              );
+            }
+            )}
+          </Tabs>
+        </HeroBody>
+      </Hero>
+
+    )
+  }
+}

src/ServerTable.tsx

@@ -1,119 +1,118 @@
 import * as React from 'react';
-import { Tips, Logo } from "./Utils";
+import { Tips } from "./Utils";
+import * as _ from 'lodash';
+import { Button } from 'bloomer';
+// const randomColor = require('randomcolor');
+import { apiDir } from './Config';
+const reactcsv = require('react-csv');
+const CSVLink = reactcsv.CSVLink;
 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 class ServerTable extends React.Component<any, any> {
+export default class ServerTable extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      data: []
+      headers: [], data: [], colColorMap: {}
-      // data:makeData()
+    }
-    };
+    const loaded = (results: any) => {
-    this.loaded = this.loaded.bind(this);
+      const local = this;
-    Papa.parse('/data.csv', {
+      // const colsUnique = _.keys(_.groupBy(results.data, (o: any) => _.get<any>(o, this.props.colorColumn)));
+      const colColorMap = this.props.colorMap; // _.zipObject(colsUnique, _.map(colsUnique, () => randomColor()));
+      local.setState({
+        headers: results.meta.fields,
+        data: results.data,
+        colColorMap
+      });
+    }
+    Papa.parse(apiDir + this.props.csvFile, {
       header: true,
       download: true,
       skipEmptyLines: true,
-      complete: this.loaded
+      dynamicTyping: true,
+      complete: loaded
     });
   }
 
   public render() {
-    const { data } = this.state;
+    const data = this.state.data;
-    const filterExact = (filter: any, row: any) =>
+    const headers = this.state.headers;
-      String(row[filter.id]) === filter.value;
     const filterPart = (filter: any, row: any) =>
-      row[filter.id].startsWith(filter.value) ||
+      String(_.toLower(row[filter.id])).startsWith(_.toLower(filter.value)) ||
-      row[filter.id].endsWith(filter.value)
+      String(_.toLower(row[filter.id])).endsWith(_.toLower(filter.value))
+    const headerGen = (headerName: string) => {
+      // const title = headerName
+      //   .replace(/([A-Z])/g, ' $1')
+      //   .replace(/^./, (str: string) => str.toUpperCase());
+      return {
+        Header: headerName,
+        accessor: headerName,
+        Cell: (row: any) => {
+          return row.value;
+        }
+      }
+    }
+    const colorCol = this.props.colorColumn;
+    const colColorMap = this.state.colColorMap;
+    const rowStyle = (_0: any, rowInfo: any, _1: any) => {
+      if (_.isUndefined(rowInfo) || _.isUndefined(colorCol)) {
+        return {};
+      }
+      const colValue = _.get<any>(rowInfo.row, colorCol, '');
+      const colColor = _.get<any>(colColorMap, colValue, 'white');
+      return {
+        style: {
+          background: colColor
+        }
+      };
+    };
+    const colStyle = () => ({
+      style: {
+        textAlign: 'left'
+      }
+    });
+    const headerCols = headers.map(headerGen);
     return (
-      <div>
+      <ReactTable
-        <ReactTable
+        data={data}
-          data={data}
+        filterable={true}
-          filterable={true}
+        defaultFilterMethod={filterPart}
-          defaultFilterMethod={filterExact}
+        columns={headerCols}
-          columns={[
+        showPagination={false}
-            {
+        defaultPageSize={100}
-              Header: "Name",
+        className="-striped -highlight"
-              columns: [
+        getTrProps={rowStyle}
-                {
+        getTdProps={colStyle}
-                  Header: "First Name",
+        style={{
-                  accessor: "firstName",
+          height: "75vh"
-                  filterMethod: filterPart
+        }}
-                },
+      >
-                {
+        {(state, makeTable, ) => {
-                  Header: "Last Name",
+          const lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers));
-                  id: "lastName",
+          return (
-                  accessor: (d: any) => d.lastName
+            <div>
-                }
+              {makeTable()}
-              ]
+              <Button>
-            },
+                <CSVLink data={lastFiltered} filename={"data.csv"}>
-            {
+                  Download CSV
-              Header: "Info",
+                </CSVLink>
-              columns: [{
+              </Button>
-                Header: 'Profile Progress',
+              <br />
-                accessor: 'progress',
+              <Tips />
-                Cell: (row: any) => (
+            </div>
-                  <div
+          )
-                    style={{
+        }}
-                      width: '100%',
+      </ReactTable>
-                      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

@@ -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;
+}

src/index.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
-import registerServiceWorker from './registerServiceWorker';
+// import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
   <App />,
   document.getElementById('root') as HTMLElement
 );
-registerServiceWorker();
+// registerServiceWorker();

yarn.lock

@@ -26,10 +26,24 @@
   dependencies:
     "@types/d3-path" "*"
 
+"@types/history@*":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
+
 "@types/jest@^23.1.1":
   version "23.1.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.1.1.tgz#c54ab1a5f41aa693c0957222dd10414416d0c87b"
 
+"@types/localforage@^0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@types/localforage/-/localforage-0.0.34.tgz#5e31c32dd8791ec4b9ff3ef47c9cb55b2d0d9438"
+  dependencies:
+    localforage "*"
+
+"@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"
@@ -38,6 +52,10 @@
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-4.5.0.tgz#6a3f1ff2d70fa96945617a12edc4b0490a18ec14"
 
+"@types/randomcolor@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.4.3.tgz#66bf69fdf43ea7b73ae4c378f660442c8e236e93"
+
 "@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"
@@ -45,6 +63,21 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-router-dom@^4.2.7":
+  version "4.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.7.tgz#9d36bfe175f916dd8d7b6b0237feed6cce376b4c"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "4.0.27"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.27.tgz#553f54df7c4b09d6046b0201ce9b91c46b2940e3"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-table@^6.7.11":
   version "6.7.11"
   resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-6.7.11.tgz#26e85411981054af7dd657ef81e249baa6aee3d5"
@@ -1054,6 +1087,13 @@ binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
 
+bloomer@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/bloomer/-/bloomer-0.6.3.tgz#4899cebb1992e934a148df942fbc37ce298e7669"
+  dependencies:
+    classnames "^2.2.5"
+    tslib "^1.7.0"
+
 bluebird@^3.4.7, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
@@ -1248,6 +1288,10 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
+bulma@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.1.tgz#73c2e3b2930c90cc272029cbd19918b493fca486"
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -3157,6 +3201,16 @@ he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3165,6 +3219,10 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^2.5.0:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -3326,6 +3384,10 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -3410,7 +3472,7 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -4256,6 +4318,12 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -4296,6 +4364,12 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+localforage@*, localforage@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.7.2.tgz#fa4442602f806edd2bca6a54ab4e656f031f121c"
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -4372,7 +4446,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -5139,7 +5213,7 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
-path-to-regexp@^1.0.1:
+path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
   dependencies:
@@ -5668,6 +5742,10 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.5.3.tgz#7f90f2f2a7f6d5a52232161eeaeeaea9ac3b5815"
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
@@ -5743,6 +5821,29 @@ react-resize-detector@1.1.0:
   dependencies:
     prop-types "^15.5.10"
 
+react-router-dom@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+  dependencies:
+    history "^4.7.2"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+    react-router "^4.3.1"
+    warning "^4.0.1"
+
+react-router@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+  dependencies:
+    history "^4.7.2"
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.1"
+    warning "^4.0.1"
+
 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"
@@ -6111,6 +6212,10 @@ resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -6944,7 +7049,7 @@ tsconfig-paths@^3.1.1:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.1"
 
-tslib@^1.8.0, tslib@^1.8.1:
+tslib@^1.7.0, tslib@^1.8.0, tslib@^1.8.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
@@ -7250,6 +7355,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -7284,6 +7393,18 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"