From cb0c3966e18ff60d7e1ad6ab0c4a2bbbdb0e5321 Mon Sep 17 00:00:00 2001
From: Malar Kannan <malarkannan.p@gmail.com>
Date: Sat, 30 Jun 2018 15:04:49 +0530
Subject: [PATCH] random color for row with same value in the column in config

---
 package.json            |  2 ++
 public/config.json      |  3 ++-
 src/ServerTabLoader.tsx |  2 +-
 src/ServerTable.tsx     | 40 +++++++++++++++++++++++++++++++---------
 yarn.lock               |  8 ++++++++
 5 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 9b304ea..7a3a5d5 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "lodash": "^4.17.10",
     "namor": "^1.0.1",
     "papaparse": "^4.5.0",
+    "randomcolor": "^0.5.3",
     "react": "^16.4.1",
     "react-csv": "^1.0.14",
     "react-dom": "^16.4.1",
@@ -25,6 +26,7 @@
     "@types/lodash": "^4.14.110",
     "@types/node": "^10.3.4",
     "@types/papaparse": "^4.5.0",
+    "@types/randomcolor": "^0.4.3",
     "@types/react": "^16.4.1",
     "@types/react-dom": "^16.0.6",
     "@types/react-table": "^6.7.11",
diff --git a/public/config.json b/public/config.json
index cc5ba54..3ec9b28 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,7 +1,8 @@
 {
   "tabList": [{
       "tabTitle": "Tab 1",
-      "fileName": "data.csv"
+      "fileName": "data.csv",
+      "colorColumn": "status"
     },
     {
       "tabTitle": "Tab 2",
diff --git a/src/ServerTabLoader.tsx b/src/ServerTabLoader.tsx
index 18419b1..41f3e9e 100644
--- a/src/ServerTabLoader.tsx
+++ b/src/ServerTabLoader.tsx
@@ -33,7 +33,7 @@ export default class ServerTabLoader extends React.Component<any, any> {
         </TabList>
         {this.state.tabList.map((o: any, i: number) =>
           (<TabPanel key={i}>
-            <ServerTable csvFile={o.fileName} />
+            <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} />
           </TabPanel>
           )
         )}
diff --git a/src/ServerTable.tsx b/src/ServerTable.tsx
index bab80e3..2068476 100644
--- a/src/ServerTable.tsx
+++ b/src/ServerTable.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Tips } from "./Utils";
 import * as _ from 'lodash';
 // import { Chart } from './Chart';
+const randomColor = require('randomcolor');
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
 import * as Papa from 'papaparse';
@@ -14,13 +15,16 @@ export default class ServerTable extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      headers: [], data: []
+      headers: [], data: [], colColorMap: {}
     }
     const loaded = (results: any) => {
-      const localstate = this;
-      localstate.setState({
+      const local = this;
+      const colsUnique = _.keys(_.groupBy(results.data, (o: any) => _.get<any>(o, this.props.colorColumn)));
+      const colColorMap = _.zipObject(colsUnique, _.map(colsUnique, () => randomColor()));
+      local.setState({
         headers: results.meta.fields,
-        data: results.data
+        data: results.data,
+        colColorMap
       });
     }
     Papa.parse(this.props.csvFile, {
@@ -39,14 +43,31 @@ export default class ServerTable extends React.Component<any, any> {
       String(row[filter.id]).startsWith(filter.value) ||
       String(row[filter.id]).endsWith(filter.value)
     const headerGen = (headerName: string) => {
-      const title = headerName
-        .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, (str: string) => str.toUpperCase());
+      // const title = headerName
+      //   .replace(/([A-Z])/g, ' $1')
+      //   .replace(/^./, (str: string) => str.toUpperCase());
       return {
-        Header: title,
-        accessor: headerName
+        Header: headerName,
+        accessor: headerName,
+        Cell: (row: any) => {
+          return row.value;
+        }
       }
     }
+    const colorCol = this.props.colorColumn;
+    const colColorMap = this.state.colColorMap;
+    const rowStyle = (state: any, rowInfo: any, column: any) => {
+      if (_.isUndefined(rowInfo) || _.isUndefined(colorCol)) {
+        return {};
+      }
+      const colValue = _.get<any>(rowInfo.row, colorCol, '');
+      const colColor = _.get<any>(colColorMap, colValue, 'green');
+      return {
+        style: {
+          background: colColor
+        }
+      };
+    };
     const headerCols = headers.map(headerGen);
     return (
       <ReactTable
@@ -57,6 +78,7 @@ export default class ServerTable extends React.Component<any, any> {
         showPagination={false}
         defaultPageSize={100}
         className="-striped -highlight"
+        getTrProps={rowStyle}
         style={{
           height: "500px"
         }}
diff --git a/yarn.lock b/yarn.lock
index 29192e5..7f2ed65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -42,6 +42,10 @@
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-4.5.0.tgz#6a3f1ff2d70fa96945617a12edc4b0490a18ec14"
 
+"@types/randomcolor@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.4.3.tgz#66bf69fdf43ea7b73ae4c378f660442c8e236e93"
+
 "@types/react-dom@^16.0.6":
   version "16.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"
@@ -5672,6 +5676,10 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.5.3.tgz#7f90f2f2a7f6d5a52232161eeaeeaea9ac3b5815"
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"