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