37 lines
1.2 KiB
JavaScript
Executable File
37 lines
1.2 KiB
JavaScript
Executable File
import React from 'react';
|
|
import {
|
|
ResponsiveContainer,
|
|
Radar,
|
|
RadarChart,
|
|
PolarGrid,
|
|
Legend,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis
|
|
} from './../../../../components/recharts';
|
|
|
|
import colors from './../../../../colors';
|
|
|
|
const data = [
|
|
{ subject: 'Math', A: 120, B: 110, fullMark: 150 },
|
|
{ subject: 'Chinese', A: 98, B: 130, fullMark: 150 },
|
|
{ subject: 'English', A: 86, B: 130, fullMark: 150 },
|
|
{ subject: 'Geography', A: 99, B: 100, fullMark: 150 },
|
|
{ subject: 'Physics', A: 85, B: 90, fullMark: 150 },
|
|
{ subject: 'History', A: 65, B: 85, fullMark: 150 },
|
|
];
|
|
|
|
const SpecifiedDomainRadarChart = () => (
|
|
<ResponsiveContainer width='100%' aspect={ 1/1 }>
|
|
<RadarChart outerRadius={150} data={data}>
|
|
<PolarGrid stroke={ colors['400'] } />
|
|
<PolarAngleAxis dataKey="subject" />
|
|
<PolarRadiusAxis angle={30} domain={[0, 150]} />
|
|
<Radar name="Mike" dataKey="A" stroke={ colors['primary'] } fill={ colors['primary'] } fillOpacity={0.3}/>
|
|
<Radar name="Lily" dataKey="B" stroke={ colors['500'] } fill={ colors['500'] } fillOpacity={0.3}/>
|
|
<Legend />
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
export { SpecifiedDomainRadarChart };
|