56 lines
1.4 KiB
JavaScript
Executable File
56 lines
1.4 KiB
JavaScript
Executable File
import React from 'react';
|
|
import {
|
|
Pie,
|
|
ResponsiveContainer,
|
|
PieChart
|
|
} from './../../../../components/recharts';
|
|
|
|
import colors from './../../../../colors';
|
|
|
|
const data01 = [
|
|
{ name: 'Group A', value: 400 },
|
|
{ name: 'Group B', value: 300 },
|
|
{ name: 'Group C', value: 300 },
|
|
{ name: 'Group D', value: 200 }
|
|
];
|
|
|
|
const data02 = [
|
|
{ name: 'A1', value: 100 },
|
|
{ name: 'A2', value: 300 },
|
|
{ name: 'B1', value: 100 },
|
|
{ name: 'B2', value: 80 },
|
|
{ name: 'B3', value: 40 },
|
|
{ name: 'B4', value: 30 },
|
|
{ name: 'B5', value: 50 },
|
|
{ name: 'C1', value: 100 },
|
|
{ name: 'C2', value: 200 },
|
|
{ name: 'D1', value: 150 },
|
|
{ name: 'D2', value: 50 }
|
|
];
|
|
|
|
const TwoLevelPieChart = () => (
|
|
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data01}
|
|
dataKey="value"
|
|
outerRadius={67}
|
|
fill={ colors['primary'] }
|
|
stroke={ colors['white'] }
|
|
/>
|
|
<Pie
|
|
data={data02}
|
|
dataKey="value"
|
|
innerRadius={70}
|
|
outerRadius={80}
|
|
fill={ colors['purple'] }
|
|
stroke={ colors['white'] }
|
|
label={{fill: colors['800'], fontSize: '12px'}}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
|
|
)
|
|
|
|
export { TwoLevelPieChart };
|