1. fixed hover issue

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

public/config.json

@@ -2,11 +2,7 @@
   "tabList": [{
       "tabTitle": "Tab 1",
       "fileName": "data.csv",
-      "colorColumn": "status",
+      "colorColumn": "status"
-      "colorMap" : {
-        "complicated":"red",
-        "single":"green"
-      }
     },
     {
       "tabTitle": "Tab 2",
@@ -28,7 +24,11 @@
   "chartList":[{
       "fileName": "data.csv",
       "chartColumn": "status"
-    }
+    },
+    {
+        "fileName": "data.csv",
+        "chartColumn": "age"
+      }
   ],
   "colorMaps" : {
     "status" : {

src/Chart.tsx

@@ -3,8 +3,8 @@ import {
 } from 'recharts';
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Container, Title } from 'bloomer';
+import { Title } from 'bloomer';
-// const randomColor = require('randomcolor');
+const randomColor = require('randomcolor');
 import * as Papa from 'papaparse';
 
 
@@ -49,15 +49,18 @@ export class Chart extends React.Component<any, any> {
     //   );
     // };
     const colorMap = this.props.colorMap;
+    // const LabeText = (props: any) => {
+    //   return (<text>{props.name}</text>);
+    // };
     return (
-      <Container>
+      <div>
-        <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
+        <Title isSize={4}>{_.capitalize(this.props.chartColumn)}</Title>
-        <ResponsiveContainer width="100%" height={200}>
+        <ResponsiveContainer width="100%" height={500}>
           <PieChart>
-            <Pie data={chartData} dataKey='value' outerRadius={100} label={true} labelLine={false}>
+            <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
               {
                 chartData.map((_0, _1) => {
-                  const color = _.get(colorMap, _0.name, 'gray');
+                  const color = _.get(colorMap, _0.name, randomColor());
                   return (<Cell key={_1} fill={color} />)
                 })
               }
@@ -65,7 +68,7 @@ export class Chart extends React.Component<any, any> {
             <Tooltip />
           </PieChart>
         </ResponsiveContainer>
-      </Container>
+      </div>
     )
   }
 }

src/ChartLoader.tsx

@@ -14,9 +14,7 @@ export default class ChartLoader extends React.Component<any, any> {
               <Chart csvFile={o.fileName} chartColumn={o.chartColumn} colorMap={colorMap} />
             </Column>
           );
-        }
+        })}
-
-        )}
       </Columns>
     )
   }

src/ServerTable.tsx

@@ -40,8 +40,8 @@ export default class ServerTable extends React.Component<any, any> {
     const data = this.state.data;
     const headers = this.state.headers;
     const filterPart = (filter: any, row: any) =>
-      String(row[filter.id]).startsWith(filter.value) ||
+      String(_.toLower(row[filter.id])).startsWith(_.toLower(filter.value)) ||
-      String(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')
@@ -68,6 +68,11 @@ export default class ServerTable extends React.Component<any, any> {
         }
       };
     };
+    const colStyle = () => ({
+      style: {
+        textAlign: 'left'
+      }
+    });
     const headerCols = headers.map(headerGen);
     return (
       <ReactTable
@@ -79,6 +84,7 @@ export default class ServerTable extends React.Component<any, any> {
         defaultPageSize={100}
         className="-striped -highlight"
         getTrProps={rowStyle}
+        getTdProps={colStyle}
         style={{
           height: "75vh"
         }}
@@ -88,7 +94,6 @@ export default class ServerTable extends React.Component<any, any> {
           return (
             <div>
               {makeTable()}
-              {/* <Chart data={lastFiltered} /> */}
               <Button>
                 <CSVLink data={lastFiltered} filename={"data.csv"}>
                   Download CSV