added static labels on chart

src/App.tsx

@@ -6,7 +6,7 @@ class App extends React.Component {
   public render() {
     return (
       <div className="App">
-        <AppRoute/>
+        <AppRoute />
       </div>
     );
   }

src/Chart.tsx

@@ -32,16 +32,28 @@ export class Chart extends React.Component<any, any> {
     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,
+        name: k,
         value: countMap[k],
       }
     })
+    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>
+      );
+    };
     return (
       <Container>
         <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
         <ResponsiveContainer width="100%" height={200}>
           <PieChart>
-            <Pie data={chartData} dataKey='value' outerRadius={100}>
+            <Pie data={chartData} dataKey='value' outerRadius={100} label={renderCustomizedLabel}>
               {
                 chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
               }

src/RouteMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   BrowserRouter as Router,
-  Route,
+  Route, Redirect,
   Link
 } from 'react-router-dom';
 import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
@@ -9,23 +9,26 @@ import 'bulma/css/bulma.css';
 import ServerTabLoader from './ServerTabLoader';
 import ChartLoader from './ChartLoader';
 
-const navButton = (name:string,link:string) => (
+const navButton = (name: string, link: string) => (
   <Link to={link}>{name}</Link>
 );
 
+const RedirectCharts = () => (<Redirect to='/charts' />);
+
 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>
+            <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
+            <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
           </NavbarMenu>
         </Navbar>
       </Container>
       <Section isPaddingless={true}>
-        <Route exact={true} path="/" component={ChartLoader} />
+        <Route exact={true} path="/" component={RedirectCharts} />
+        <Route path="/charts" component={ChartLoader} />
         <Route path="/tables" component={ServerTabLoader} />
       </Section>
     </div>