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": [{ "tabList": [{
"tabTitle": "Tab 1", "tabTitle": "Tab 1",
"fileName": "data.csv", "fileName": "data.csv",
"colorColumn": "status" "colorColumn": "status",
"colorMap" : {
"complicated":"red",
"single":"green"
}
}, },
{ {
"tabTitle": "Tab 2", "tabTitle": "Tab 2",

2
src/ServerTabLoader.tsx
View File

@ -67,7 +67,7 @@ export default class ServerTabLoader extends React.Component<any, any> {
</TabList> </TabList>
{this.state.tabList.map((o: any, i: number) => {this.state.tabList.map((o: any, i: number) =>
(<TabPanel key={i}> (<TabPanel key={i}>
<ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} /> <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={o.colorMap} />
</TabPanel> </TabPanel>
) )
)} )}

8
src/ServerTable.tsx
View File

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