lark
/
server_table
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

configurable color map for rows

master
Malar Kannan 2018-07-01 21:25:23 +05:30
parent 311180189f
commit b2cff623b7
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/config.json
View File

@ -2,7 +2,11 @@
"tabList": [{
"tabTitle": "Tab 1",
"fileName": "data.csv",
"colorColumn": "status"
"colorColumn": "status",
"colorMap" : {
"complicated":"red",
"single":"green"
}
},
{
"tabTitle": "Tab 2",

2
src/ServerTabLoader.tsx
View File

@ -67,7 +67,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} colorColumn={o.colorColumn} />
<ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={o.colorMap} />
</TabPanel>
)
)}

8
src/ServerTable.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { Tips } from "./Utils";
import * as _ from 'lodash';
import { Button } from 'bloomer';
const randomColor = require('randomcolor');
// const randomColor = require('randomcolor');
const reactcsv = require('react-csv');
const CSVLink = reactcsv.CSVLink;
import * as Papa from 'papaparse';
@ -19,8 +19,8 @@ export default class ServerTable extends React.Component<any, any> {
}
const loaded = (results: any) => {
const local = this;
const colsUnique = _.keys(_.groupBy(results.data, (o: any) => _.get<any>(o, this.props.colorColumn)));
const colColorMap = _.zipObject(colsUnique, _.map(colsUnique, () => randomColor()));
// const colsUnique = _.keys(_.groupBy(results.data, (o: any) => _.get<any>(o, this.props.colorColumn)));
const colColorMap = this.props.colorMap; // _.zipObject(colsUnique, _.map(colsUnique, () => randomColor()));
local.setState({
headers: results.meta.fields,
data: results.data,
@ -61,7 +61,7 @@ export default class ServerTable extends React.Component<any, any> {
return {};
}
const colValue = _.get<any>(rowInfo.row, colorCol, '');
const colColor = _.get<any>(colColorMap, colValue, 'green');
const colColor = _.get<any>(colColorMap, colValue, 'white');
return {
style: {
background: colColor