public/config.json

@@ -22,24 +22,12 @@
     }
   ],
   "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": {

src/App.css

@@ -23,16 +23,8 @@
 }
 
 .navbar-item:hover {
-  background-color: rgba(10, 10, 10, .1);
-  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;
+  background-color: #f0f0f0;
+  color: #3273dc;
 }
 
 @keyframes App-logo-spin {

src/App.tsx

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

src/Chart.tsx

@@ -56,7 +56,7 @@ export class Chart extends React.Component<any, any> {
       <Card>
         <CardHeader>
           <CardHeaderTitle className='is-centered'>
-            {this.props.title}
+            {_.capitalize(this.props.chartColumn)}
           </CardHeaderTitle>
         </CardHeader>
         <CardImage>

src/ChartLoader.tsx

@@ -6,17 +6,12 @@ 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'
-      }}>
+      <Columns isCentered={true}>
         {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 key={i} isSize={3}>
+              <Chart csvFile={o.fileName} chartColumn={o.chartColumn} colorMap={colorMap} />
             </Column>
           );
         })}

src/RouteMenu.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
 import * as local from 'localforage';
+import 'bulma/css/bulma.css';
 import ServerTabLoader from './ServerTabLoader';
 import ChartLoader from './ChartLoader';
 
@@ -15,7 +16,7 @@ const navButton = (name: string, link: string) => (
 
 const RedirectCharts = () => (<Redirect to='/charts' />);
 
-class RouteMenu extends React.Component {
+class AppRoute extends React.Component {
   constructor(props: any) {
     super(props);
     this.state = {
@@ -44,7 +45,7 @@ class RouteMenu extends React.Component {
       <Router>
         <div>
           <Container isFluid={true} isMarginless={true} isFullWidth={true}>
-            <Navbar style={{ backgroundColor:'#00D1B2' }}>
+            <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
               <NavbarMenu isActive={true}>
                 <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
                 <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
@@ -61,4 +62,4 @@ class RouteMenu extends React.Component {
     );
   }
 }
-export default RouteMenu
+export default AppRoute