added pie chart for single column

src/App.css

@@ -22,7 +22,16 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.navbar-item:hover {
+  background-color: #f0f0f0;
+  color: #3273dc;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/App.tsx

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

src/Chart.tsx

@@ -1,22 +1,55 @@
 import {
-  PieChart, Pie, ResponsiveContainer, Tooltip
+  PieChart, Pie, ResponsiveContainer, Tooltip, Cell
 } from 'recharts';
 import * as React from 'react';
+import * as _ from 'lodash';
+import { Container, Title } 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 = this.props.data;
+    const data = this.state.data;
+    const countMap = _.countBy(data, (o: any) => _.get<any>(o, this.props.chartColumn))
+    const chartData = _.map(_.keys(countMap), (k: any) => {
+      return {
+        name: this.props.chartColumn + ' ' + k,
+        value: countMap[k],
+      }
+    })
     return (
-      <ResponsiveContainer width="100%" height={200}>
-        <PieChart>
-          <Pie data={data} dataKey="age" cx={600} cy={100} outerRadius={80} fill="#82ca9d" />
-          <Tooltip />
-        </PieChart>
-      </ResponsiveContainer>
+      <Container>
+        <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
+        <ResponsiveContainer width="100%" height={200}>
+          <PieChart>
+            <Pie data={chartData} dataKey='value' outerRadius={100}>
+              {
+                chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
+              }
+            </Pie>
+            <Tooltip />
+          </PieChart>
+        </ResponsiveContainer>
+      </Container>
     )
   }
 }

src/ChartLoader.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Columns, Column } from 'bloomer';
+import * as local from 'localforage';
+import { Chart } from './Chart';
+
+export default class ChartLoader extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      chartList: []
+    }
+    fetch('/config.json')
+      .then((response) => response.text())
+      .then((jsonStr) => {
+        const jsonObj = JSON.parse(jsonStr);
+        const chartList = _.get<any>(jsonObj, 'chartList', []);
+        this.setState({ chartList });
+        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() {
+    return (
+      <Columns>
+        {this.state.chartList.map((o: any, i: number) =>
+          <Column key={i} isSize={3}>
+            <Chart csvFile={o.fileName} chartColumn={o.chartColumn} />
+          </Column>
+        )}
+      </Columns>
+    )
+  }
+}

src/RouteMenu.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link
+} from 'react-router-dom';
+import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
+import 'bulma/css/bulma.css';
+import ServerTabLoader from './ServerTabLoader';
+import ChartLoader from './ChartLoader';
+
+const navButton = (name:string,link:string) => (
+  <Link to={link}>{name}</Link>
+);
+
+const AppRoute = () => (
+  <Router>
+    <div>
+      <Container isFluid={true} isMarginless={true} isFullWidth={true}>
+        <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
+          <NavbarMenu isActive={true}>
+            <NavbarItem >{navButton('Charts','/')}</NavbarItem>
+            <NavbarItem>{navButton('Tables','/tables')}</NavbarItem>
+          </NavbarMenu>
+        </Navbar>
+      </Container>
+      <Section isPaddingless={true}>
+        <Route exact={true} path="/" component={ChartLoader} />
+        <Route path="/tables" component={ServerTabLoader} />
+      </Section>
+    </div>
+  </Router>
+)
+export default AppRoute

src/ServerTabLoader.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import ServerTable from './ServerTable';
 import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
+import { Hero, HeroBody } from 'bloomer';
 import * as local from 'localforage';
 import './Tabs.css';
 
@@ -56,19 +57,24 @@ export default class ServerTabLoader extends React.Component<any, any> {
 
   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} colorColumn={o.colorColumn} />
-          </TabPanel>
-          )
-        )}
-      </Tabs>
+      <Hero isColor='light' isSize='large' isFullWidth={true} isFullHeight={true}>
+        <HeroBody isPaddingless={true} isDisplay='block'>
+          <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} colorColumn={o.colorColumn} />
+              </TabPanel>
+              )
+            )}
+          </Tabs>
+        </HeroBody>
+      </Hero>
+
     )
   }
 }

src/ServerTable.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tips } from "./Utils";
 import * as _ from 'lodash';
-// import { Chart } from './Chart';
+import { Button } from 'bloomer';
 const randomColor = require('randomcolor');
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
@@ -56,7 +56,7 @@ export default class ServerTable extends React.Component<any, any> {
     }
     const colorCol = this.props.colorColumn;
     const colColorMap = this.state.colColorMap;
-    const rowStyle = (state: any, rowInfo: any, column: any) => {
+    const rowStyle = (_0: any, rowInfo: any, _1: any) => {
       if (_.isUndefined(rowInfo) || _.isUndefined(colorCol)) {
         return {};
       }
@@ -80,7 +80,7 @@ export default class ServerTable extends React.Component<any, any> {
         className="-striped -highlight"
         getTrProps={rowStyle}
         style={{
-          height: "500px"
+          height: "75vh"
         }}
       >
         {(state, makeTable, ) => {
@@ -89,9 +89,11 @@ export default class ServerTable extends React.Component<any, any> {
             <div>
               {makeTable()}
               {/* <Chart data={lastFiltered} /> */}
-              <CSVLink data={lastFiltered} filename={"data.csv"}>
-                Download CSV
-              </CSVLink>
+              <Button>
+                <CSVLink data={lastFiltered} filename={"data.csv"}>
+                  Download CSV
+                </CSVLink>
+              </Button>
               <br />
               <Tips />
             </div>