44 lines
1.4 KiB
JavaScript
Executable File
44 lines
1.4 KiB
JavaScript
Executable File
import React from 'react';
|
|
import {
|
|
ResponsiveContainer,
|
|
RadialBarChart,
|
|
RadialBar,
|
|
Legend
|
|
} from 'recharts';
|
|
|
|
import colors from './../../../../colors';
|
|
|
|
const data = [
|
|
{name: '18-24', uv: 31.47, pv: 2400, fill: colors['primary']},
|
|
{name: '25-29', uv: 26.69, pv: 4567, fill: colors['purple']},
|
|
{name: '30-34', uv: 15.69, pv: 1398, fill: colors['success']},
|
|
{name: '35-39', uv: 8.22, pv: 9800, fill: colors['yellow']},
|
|
{name: '40-49', uv: 8.63, pv: 3908, fill: colors['danger']},
|
|
{name: '50+', uv: 2.63, pv: 4800, fill: colors['info']},
|
|
{name: 'unk.', uv: 6.67, pv: 4800, fill: colors['warning']}
|
|
];
|
|
|
|
const style = {
|
|
top: 0,
|
|
left: 350,
|
|
lineHeight: '24px'
|
|
};
|
|
|
|
const SimpleRadialBarChart = () => (
|
|
<ResponsiveContainer width='100%' aspect={ 1 / 1}>
|
|
<RadialBarChart cx={ 150 } innerRadius={20} outerRadius={140} barSize={7} data={data}>
|
|
<RadialBar
|
|
minAngle={15}
|
|
label={{ position: 'insideStart', fill: colors['900'], fontSize: '11px' }}
|
|
background={{fill: colors['200']}}
|
|
clockWise={true}
|
|
dataKey='uv'
|
|
/>
|
|
<Legend iconSize={10} layout='vertical' verticalAlign='middle' wrapperStyle={style}/>
|
|
</RadialBarChart>
|
|
</ResponsiveContainer>
|
|
|
|
)
|
|
|
|
export { SimpleRadialBarChart };
|