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

16
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,9 +53,14 @@ 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'>
{_.capitalize(this.props.chartColumn)}
</CardHeaderTitle>
</CardHeader>
<CardImage>
<ResponsiveContainer width="100%" height={300}>
<PieChart> <PieChart>
<Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}> <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
{ {
@ -68,7 +73,8 @@ export class Chart extends React.Component<any, any> {
<Tooltip /> <Tooltip />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </CardImage>
</Card>
) )
} }
} }