Update '.gitignore'

.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

@@ -7,7 +7,7 @@
 .LSOverride
 
 # Icon must end with two \r
-Icon
+Icon
 
 # Thumbnails
 ._*
@@ -66,6 +66,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+build/
 
 # Typescript v1 declaration files
 typings/

public/.htaccess

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

public/config.json

@@ -22,12 +22,24 @@
     }
   ],
   "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,8 +23,16 @@
 }
 
 .navbar-item:hover {
-  background-color: #f0f0f0;
-  color: #3273dc;
+  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;
 }
 
 @keyframes App-logo-spin {

src/App.tsx

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

src/Chart.tsx

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

src/ChartLoader.tsx

@@ -6,12 +6,17 @@ export default class ChartLoader extends React.Component<any, any> {
   public render() {
     const colorMaps = this.props.colorMaps;
     return (
-      <Columns isCentered={true}>
+      <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={3}>
-              <Chart csvFile={o.fileName} chartColumn={o.chartColumn} colorMap={colorMap} />
+            <Column key={i} isSize={4}>
+              <Chart
+                csvFile={o.fileName} chartColumn={o.chartColumn}
+                colorMap={colorMap} title={o.chartTitle ? o.chartTitle: o.chartColumn}
+              />
             </Column>
           );
         })}

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

@@ -6,25 +6,25 @@ 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';
+import { apiDir } from './Config';
 
 const navButton = (name: string, link: string) => (
   <Link to={link}>{name}</Link>
 );
 
-const RedirectCharts = () => (<Redirect to='/charts' />);
+const RedirectCharts = () => (<Redirect to={apiDir+'charts'} />);
 
-class AppRoute extends React.Component {
+class RouteMenu extends React.Component {
   constructor(props: any) {
     super(props);
     this.state = {
-      tabList:[],
+      tabList: [],
       chartList: [],
-      colorMaps:{}
+      colorMaps: {}
     }
-    fetch('/config.json')
+    fetch(apiDir+'config.json')
       .then((response) => response.text())
       .then((jsonStr) => {
         const jsonObj = JSON.parse(jsonStr);
@@ -39,27 +39,27 @@ class AppRoute extends React.Component {
   }
 
   public render() {
-    const ConfiguredChart = () => (<ChartLoader {...this.state}/>);
-    const ConfiguredServerTab = () => (<ServerTabLoader {...this.state}/>);
+    const ConfiguredChart = () => (<ChartLoader {...this.state} />);
+    const ConfiguredServerTab = () => (<ServerTabLoader {...this.state} />);
     return (
       <Router>
         <div>
           <Container isFluid={true} isMarginless={true} isFullWidth={true}>
-            <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
+            <Navbar style={{ backgroundColor: '#00D1B2' }}>
               <NavbarMenu isActive={true}>
-                <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
-                <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
+                <NavbarItem >{navButton('Charts', apiDir + 'charts')}</NavbarItem>
+                <NavbarItem>{navButton('Tables', apiDir + 'tables')}</NavbarItem>
               </NavbarMenu>
             </Navbar>
           </Container>
           <Section isPaddingless={true}>
-            <Route exact={true} path="/" component={RedirectCharts} />
-            <Route path="/charts" component={ConfiguredChart} />
-            <Route path="/tables" component={ConfiguredServerTab} />
+            <Route exact={true} path={apiDir} component={RedirectCharts} />
+            <Route path={apiDir + "charts"} component={ConfiguredChart} />
+            <Route path={apiDir + "tables"} component={ConfiguredServerTab} />
           </Section>
         </div>
       </Router>
     );
   }
 }
-export default AppRoute
+export default RouteMenu

src/ServerTable.tsx

@@ -3,6 +3,7 @@ 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';
@@ -27,7 +28,7 @@ export default class ServerTable extends React.Component<any, any> {
         colColorMap
       });
     }
-    Papa.parse(this.props.csvFile, {
+    Papa.parse(apiDir + this.props.csvFile, {
       header: true,
       download: true,
       skipEmptyLines: true,

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();