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

added pie chart for single column

master
Malar Kannan 2018-07-01 19:42:00 +05:30
parent 6492047c7c
commit 8694d0d86c
10 changed files with 255 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -3,6 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"bloomer": "^0.6.3",
"bulma": "^0.7.1",
"localforage": "^1.7.2",
"lodash": "^4.17.10",
"namor": "^1.0.1",
@ -11,6 +13,7 @@
"react": "^16.4.1",
"react-csv": "^1.0.14",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts-ts": "2.16.0",
"react-table": "^6.8.6",
"react-tabs": "^2.2.2",
@ -31,6 +34,7 @@
"@types/randomcolor": "^0.4.3",
"@types/react": "^16.4.1",
"@types/react-dom": "^16.0.6",
"@types/react-router-dom": "^4.2.7",
"@types/react-table": "^6.7.11",
"@types/react-tabs": "^1.0.4",
"@types/recharts": "^1.0.23",

5
public/config.json
View File

@ -20,5 +20,10 @@
"tabTitle": "Tab 4",
"fileName": "data.csv"
}
],
"chartList":[{
"fileName": "data.csv",
"chartColumn": "status"
}
]
}

15
src/App.css
View File

@ -22,7 +22,16 @@
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
.navbar-item:hover {
background-color: #f0f0f0;
color: #3273dc;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

4
src/App.tsx
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import './App.css';
import ServerTabLoader from './ServerTabLoader';
import AppRoute from './RouteMenu';
class App extends React.Component {
public render() {
return (
<div className="App">
<ServerTabLoader/>
<AppRoute/>
</div>
);
}

49
src/Chart.tsx
View File

@ -1,22 +1,55 @@
import {
PieChart, Pie, ResponsiveContainer, Tooltip
PieChart, Pie, ResponsiveContainer, Tooltip, Cell
} from 'recharts';
import * as React from 'react';
import * as _ from 'lodash';
import { Container, Title } from 'bloomer';
const randomColor = require('randomcolor');
import * as Papa from 'papaparse';
export class Chart extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { data: [] };
const loaded = (results: any) => {
const local = this;
local.setState({
headers: results.meta.fields,
data: results.data,
});
}
Papa.parse(this.props.csvFile, {
header: true,
download: true,
skipEmptyLines: true,
dynamicTyping: true,
complete: loaded
});
}
public render() {
const data = this.props.data;
const data = this.state.data;
const countMap = _.countBy(data, (o: any) => _.get<any>(o, this.props.chartColumn))
const chartData = _.map(_.keys(countMap), (k: any) => {
return {
name: this.props.chartColumn + ' ' + k,
value: countMap[k],
}
})
return (
<ResponsiveContainer width="100%" height={200}>
<PieChart>
<Pie data={data} dataKey="age" cx={600} cy={100} outerRadius={80} fill="#82ca9d" />
<Tooltip />
</PieChart>
</ResponsiveContainer>
<Container>
<Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
<ResponsiveContainer width="100%" height={200}>
<PieChart>
<Pie data={chartData} dataKey='value' outerRadius={100}>
{
chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</Container>
)
}
}

39
src/ChartLoader.tsx Normal file
View File

@ -0,0 +1,39 @@
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() {
return (
<Columns>
{this.state.chartList.map((o: any, i: number) =>
<Column key={i} isSize={3}>
<Chart csvFile={o.fileName} chartColumn={o.chartColumn} />
</Column>
)}
</Columns>
)
}
}

34
src/RouteMenu.tsx Normal file
View File

@ -0,0 +1,34 @@
import * as React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
import 'bulma/css/bulma.css';
import ServerTabLoader from './ServerTabLoader';
import ChartLoader from './ChartLoader';
const navButton = (name:string,link:string) => (
<Link to={link}>{name}</Link>
);
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','/')}</NavbarItem>
<NavbarItem>{navButton('Tables','/tables')}</NavbarItem>
</NavbarMenu>
</Navbar>
</Container>
<Section isPaddingless={true}>
<Route exact={true} path="/" component={ChartLoader} />
<Route path="/tables" component={ServerTabLoader} />
</Section>
</div>
</Router>
)
export default AppRoute

32
src/ServerTabLoader.tsx
View File

@ -2,6 +2,7 @@ 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';
@ -56,19 +57,24 @@ export default class ServerTabLoader extends React.Component<any, any> {
public render() {
return (
<Tabs forceRenderTabPanel={true}>
<TabList>
{this.state.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} />
</TabPanel>
)
)}
</Tabs>
<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) =>
(<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} />
</TabPanel>
)
)}
</Tabs>
</HeroBody>
</Hero>
)
}
}

14
src/ServerTable.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { Tips } from "./Utils";
import * as _ from 'lodash';
// import { Chart } from './Chart';
import { Button } from 'bloomer';
const randomColor = require('randomcolor');
const reactcsv = require('react-csv');
const CSVLink = reactcsv.CSVLink;
@ -56,7 +56,7 @@ export default class ServerTable extends React.Component<any, any> {
}
const colorCol = this.props.colorColumn;
const colColorMap = this.state.colColorMap;
const rowStyle = (state: any, rowInfo: any, column: any) => {
const rowStyle = (_0: any, rowInfo: any, _1: any) => {
if (_.isUndefined(rowInfo) || _.isUndefined(colorCol)) {
return {};
}
@ -80,7 +80,7 @@ export default class ServerTable extends React.Component<any, any> {
className="-striped -highlight"
getTrProps={rowStyle}
style={{
height: "500px"
height: "75vh"
}}
>
{(state, makeTable, ) => {
@ -89,9 +89,11 @@ export default class ServerTable extends React.Component<any, any> {
<div>
{makeTable()}
{/* <Chart data={lastFiltered} /> */}
<CSVLink data={lastFiltered} filename={"data.csv"}>
Download CSV
</CSVLink>
<Button>
<CSVLink data={lastFiltered} filename={"data.csv"}>
Download CSV
</CSVLink>
</Button>
<br />
<Tips />
</div>

95
yarn.lock
View File

@ -26,6 +26,10 @@
dependencies:
"@types/d3-path" "*"
"@types/history@*":
version "4.6.2"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
"@types/jest@^23.1.1":
version "23.1.1"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.1.1.tgz#c54ab1a5f41aa693c0957222dd10414416d0c87b"
@ -59,6 +63,21 @@
"@types/node" "*"
"@types/react" "*"
"@types/react-router-dom@^4.2.7":
version "4.2.7"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.7.tgz#9d36bfe175f916dd8d7b6b0237feed6cce376b4c"
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-router" "*"
"@types/react-router@*":
version "4.0.27"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.27.tgz#553f54df7c4b09d6046b0201ce9b91c46b2940e3"
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-table@^6.7.11":
version "6.7.11"
resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-6.7.11.tgz#26e85411981054af7dd657ef81e249baa6aee3d5"
@ -1068,6 +1087,13 @@ binary-extensions@^1.0.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
bloomer@^0.6.3:
version "0.6.3"
resolved "https://registry.yarnpkg.com/bloomer/-/bloomer-0.6.3.tgz#4899cebb1992e934a148df942fbc37ce298e7669"
dependencies:
classnames "^2.2.5"
tslib "^1.7.0"
bluebird@^3.4.7, bluebird@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
@ -1262,6 +1288,10 @@ builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
bulma@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.1.tgz#73c2e3b2930c90cc272029cbd19918b493fca486"
bytes@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@ -3171,6 +3201,16 @@ he@1.1.x:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
history@^4.7.2:
version "4.7.2"
resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.2.0"
value-equal "^0.4.0"
warning "^3.0.0"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -3179,6 +3219,10 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^2.5.0:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@ -3428,7 +3472,7 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
invariant@^2.2.2:
invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies:
@ -4402,7 +4446,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@ -5169,7 +5213,7 @@ path-to-regexp@0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
path-to-regexp@^1.0.1:
path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies:
@ -5777,6 +5821,29 @@ react-resize-detector@1.1.0:
dependencies:
prop-types "^15.5.10"
react-router-dom@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
dependencies:
history "^4.7.2"
invariant "^2.2.4"
loose-envify "^1.3.1"
prop-types "^15.6.1"
react-router "^4.3.1"
warning "^4.0.1"
react-router@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
dependencies:
history "^4.7.2"
hoist-non-react-statics "^2.5.0"
invariant "^2.2.4"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.6.1"
warning "^4.0.1"
react-scripts-ts@2.16.0:
version "2.16.0"
resolved "https://registry.yarnpkg.com/react-scripts-ts/-/react-scripts-ts-2.16.0.tgz#45f831a12139c3b59d6bb729c1b6ef51e0f22908"
@ -6145,6 +6212,10 @@ resolve-from@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
resolve-pathname@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@ -6978,7 +7049,7 @@ tsconfig-paths@^3.1.1:
strip-bom "^3.0.0"
strip-json-comments "^2.0.1"
tslib@^1.8.0, tslib@^1.8.1:
tslib@^1.7.0, tslib@^1.8.0, tslib@^1.8.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@ -7284,6 +7355,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"
value-equal@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@ -7318,6 +7393,18 @@ walker@~1.0.5:
dependencies:
makeerror "1.0.x"
warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"
warning@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745"
dependencies:
loose-envify "^1.0.0"
watch@~0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"