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

added card for charts with borders

master
Malar Kannan 2018-07-01 22:57:37 +05:30
parent 2aae9ee455
commit 2dcb19c8ee
1 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/Chart.tsx
View File

@ -3,7 +3,7 @@ import {
} from 'recharts'; } from 'recharts';
import * as React from 'react'; import * as React from 'react';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { Title } from 'bloomer'; import { Card, CardImage, CardHeader, CardHeaderTitle } from 'bloomer';
const randomColor = require('randomcolor'); const randomColor = require('randomcolor');
import * as Papa from 'papaparse'; import * as Papa from 'papaparse';
@ -53,22 +53,28 @@ export class Chart extends React.Component<any, any> {
// return (<text>{props.name}</text>); // return (<text>{props.name}</text>);
// }; // };
return ( return (
<div> <Card>
<Title isSize={4}>{_.capitalize(this.props.chartColumn)}</Title> <CardHeader>
<ResponsiveContainer width="100%" height={500}> <CardHeaderTitle className='is-centered'>
<PieChart> {_.capitalize(this.props.chartColumn)}
<Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}> </CardHeaderTitle>
{ </CardHeader>
chartData.map((_0, _1) => { <CardImage>
const color = _.get(colorMap, _0.name, randomColor()); <ResponsiveContainer width="100%" height={300}>
return (<Cell key={_1} fill={color} />) <PieChart>
}) <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
} {
</Pie> chartData.map((_0, _1) => {
<Tooltip /> const color = _.get(colorMap, _0.name, randomColor());
</PieChart> return (<Cell key={_1} fill={color} />)
</ResponsiveContainer> })
</div> }
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</CardImage>
</Card>
) )
} }
} }