From 0dcad337ed4edf91abf9af6ee142711963b23bd4 Mon Sep 17 00:00:00 2001
From: Malar Kannan <malarkannan.p@gmail.com>
Date: Sun, 1 Jul 2018 22:46:47 +0530
Subject: [PATCH] 1. fixed hover issue 2. search is case insensitive on tables
 3. text aligned left

---
 public/config.json  | 12 ++++++------
 src/Chart.tsx       | 19 +++++++++++--------
 src/ChartLoader.tsx |  4 +---
 src/ServerTable.tsx | 11 ++++++++---
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/public/config.json b/public/config.json
index 1212f4f..ba90838 100644
--- a/public/config.json
+++ b/public/config.json
@@ -2,11 +2,7 @@
   "tabList": [{
       "tabTitle": "Tab 1",
       "fileName": "data.csv",
-      "colorColumn": "status",
-      "colorMap" : {
-        "complicated":"red",
-        "single":"green"
-      }
+      "colorColumn": "status"
     },
     {
       "tabTitle": "Tab 2",
@@ -28,7 +24,11 @@
   "chartList":[{
       "fileName": "data.csv",
       "chartColumn": "status"
-    }
+    },
+    {
+        "fileName": "data.csv",
+        "chartColumn": "age"
+      }
   ],
   "colorMaps" : {
     "status" : {
diff --git a/src/Chart.tsx b/src/Chart.tsx
index 181038e..021eed9 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -3,8 +3,8 @@ import {
 } from 'recharts';
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Container, Title } from 'bloomer';
-// const randomColor = require('randomcolor');
+import { Title } from 'bloomer';
+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>
-        <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
-        <ResponsiveContainer width="100%" height={200}>
+      <div>
+        <Title isSize={4}>{_.capitalize(this.props.chartColumn)}</Title>
+        <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>
     )
   }
 }
diff --git a/src/ChartLoader.tsx b/src/ChartLoader.tsx
index 727c466..31c4e26 100644
--- a/src/ChartLoader.tsx
+++ b/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>
     )
   }
diff --git a/src/ServerTable.tsx b/src/ServerTable.tsx
index d9ba507..6cfd771 100644
--- a/src/ServerTable.tsx
+++ b/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(row[filter.id]).endsWith(filter.value)
+      String(_.toLower(row[filter.id])).startsWith(_.toLower(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