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

made config load at root and updated color loading logic

master
Malar Kannan 2018-07-01 22:11:00 +05:30
parent b2cff623b7
commit 73c30d7f8e
5 changed files with 92 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/config.json
View File

@ -29,5 +29,11 @@
"fileName": "data.csv",
"chartColumn": "status"
}
]
],
"colorMaps" : {
"status" : {
"complicated":"red",
"single":"green"
}
}
}

34
src/Chart.tsx
View File

@ -4,7 +4,7 @@ import {
import * as React from 'react';
import * as _ from 'lodash';
import { Container, Title } from 'bloomer';
const randomColor = require('randomcolor');
// const randomColor = require('randomcolor');
import * as Papa from 'papaparse';
@ -36,26 +36,30 @@ export class Chart extends React.Component<any, any> {
value: countMap[k],
}
})
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }:any) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
return (
<text x={x} y={y} fill="white" textAnchor='middle' dominantBaseline="central">
{chartData[index].name}
</text>
);
};
// const RADIAN = Math.PI / 180;
// const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }:any) => {
// const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
// const x = cx + radius * Math.cos(-midAngle * RADIAN);
// const y = cy + radius * Math.sin(-midAngle * RADIAN);
//
// return (
// <text x={x} y={y} fill="white" textAnchor='middle' dominantBaseline="central">
// {chartData[index].name}
// </text>
// );
// };
const colorMap = this.props.colorMap;
return (
<Container>
<Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
<ResponsiveContainer width="100%" height={200}>
<PieChart>
<Pie data={chartData} dataKey='value' outerRadius={100} label={renderCustomizedLabel} labelLine={false}>
<Pie data={chartData} dataKey='value' outerRadius={100} label={true} labelLine={false}>
{
chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
chartData.map((_0, _1) => {
const color = _.get(colorMap, _0.name, 'gray');
return (<Cell key={_1} fill={color} />)
})
}
</Pie>
<Tooltip />

36
src/ChartLoader.tsx
View File

@ -1,37 +1,21 @@
import * as React from 'react';
import * as _ from 'lodash';
import { Columns, Column } from 'bloomer';
import * as local from 'localforage';
import { Chart } from './Chart';
export default class ChartLoader extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
chartList: []
}
fetch('/config.json')
.then((response) => response.text())
.then((jsonStr) => {
const jsonObj = JSON.parse(jsonStr);
const chartList = _.get<any>(jsonObj, 'chartList', []);
this.setState({ chartList });
local.setItem('config', jsonObj).catch((err: any) => {
console.error('error occurred when saving config', err);
});
})
.catch((e) => {
console.error('error occurred when loading config', e);
});
}
public render() {
const colorMaps = this.props.colorMaps;
return (
<Columns>
{this.state.chartList.map((o: any, i: number) =>
<Column key={i} isSize={3}>
<Chart csvFile={o.fileName} chartColumn={o.chartColumn} />
</Column>
{this.props.chartList.map((o: any, i: number) => {
const colorMap = colorMaps[o.chartColumn];
return (
<Column key={i} isSize={3}>
<Chart csvFile={o.fileName} chartColumn={o.chartColumn} colorMap={colorMap} />
</Column>
);
}
)}
</Columns>
)

66
src/RouteMenu.tsx
View File

@ -5,6 +5,7 @@ import {
Link
} from 'react-router-dom';
import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
import * as local from 'localforage';
import 'bulma/css/bulma.css';
import ServerTabLoader from './ServerTabLoader';
import ChartLoader from './ChartLoader';
@ -15,23 +16,50 @@ const navButton = (name: string, link: string) => (
const RedirectCharts = () => (<Redirect to='/charts' />);
const AppRoute = () => (
<Router>
<div>
<Container isFluid={true} isMarginless={true} isFullWidth={true}>
<Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
<NavbarMenu isActive={true}>
<NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
<NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
</NavbarMenu>
</Navbar>
</Container>
<Section isPaddingless={true}>
<Route exact={true} path="/" component={RedirectCharts} />
<Route path="/charts" component={ChartLoader} />
<Route path="/tables" component={ServerTabLoader} />
</Section>
</div>
</Router>
)
class AppRoute extends React.Component {
constructor(props: any) {
super(props);
this.state = {
tabList:[],
chartList: [],
colorMaps:{}
}
fetch('/config.json')
.then((response) => response.text())
.then((jsonStr) => {
const jsonObj = JSON.parse(jsonStr);
this.setState({ ...jsonObj });
local.setItem('config', jsonObj).catch((err: any) => {
console.error('error occurred when saving config', err);
});
})
.catch((e) => {
console.error('error occurred when loading config', e);
});
}
public render() {
const ConfiguredChart = () => (<ChartLoader {...this.state}/>);
const ConfiguredServerTab = () => (<ServerTabLoader {...this.state}/>);
return (
<Router>
<div>
<Container isFluid={true} isMarginless={true} isFullWidth={true}>
<Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
<NavbarMenu isActive={true}>
<NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
<NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
</NavbarMenu>
</Navbar>
</Container>
<Section isPaddingless={true}>
<Route exact={true} path="/" component={RedirectCharts} />
<Route path="/charts" component={ConfiguredChart} />
<Route path="/tables" component={ConfiguredServerTab} />
</Section>
</div>
</Router>
);
}
}
export default AppRoute

64
src/ServerTabLoader.tsx
View File

@ -1,75 +1,29 @@
import * as React from 'react';
import * as _ from 'lodash';
import ServerTable from './ServerTable';
import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
import { Hero, HeroBody } from 'bloomer';
import * as local from 'localforage';
import './Tabs.css';
export default class ServerTabLoader extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
tabList: []
}
fetch('/config.json')
.then((response) => response.text())
.then((jsonStr) => {
const jsonObj = JSON.parse(jsonStr);
const tabList = _.get<any>(jsonObj, 'tabList', []);
this.setState({ tabList });
local.setItem('config', jsonObj).catch((err: any) => {
console.error('error occurred when saving config', err);
});
})
.catch((e) => {
console.error('error occurred when loading config', e);
});
// TODO: enable localstore to load config
// const onLocal = (config: any) => {
// if (config) {
// const tabList = _.get<any>(config, 'tabList', []);
// this.setState({ tabList });
// } else {
// fetch('/config.json')
// .then((response) => response.text())
// .then((jsonStr) => {
// const jsonObj = JSON.parse(jsonStr);
// const tabList = _.get<any>(jsonObj, 'tabList', []);
// this.setState({ tabList });
// local.setItem('config', jsonObj).then((val: any) => {
// console.log('saved to localstore ',val);
// }).catch((err:any) => {
// console.error('error occurred when saving config', err);
// });
// })
// .catch((e) => {
// this.setState({ message: e.stack, showMessage: true });
// });
// }
// };
// local.getItem('config').then(onLocal).catch((err: any) => {
// // This code runs if there were any errors
// console.error('error occurred when getting config from localstore', err);
// });
}
public render() {
return (
<Hero isColor='light' isSize='large' isFullWidth={true} isFullHeight={true}>
<HeroBody isPaddingless={true} isDisplay='block'>
<Tabs forceRenderTabPanel={true}>
<TabList>
{this.state.tabList.map((o: any, i: number) =>
{this.props.tabList.map((o: any, i: number) =>
(<Tab key={i}>{o.tabTitle}</Tab>)
)}
</TabList>
{this.state.tabList.map((o: any, i: number) =>
(<TabPanel key={i}>
<ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={o.colorMap} />
</TabPanel>
)
{this.props.tabList.map((o: any, i: number) => {
const colorMap = this.props.colorMaps[o.colorColumn];
return (
<TabPanel key={i}>
<ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={colorMap} />
</TabPanel>
);
}
)}
</Tabs>
</HeroBody>