Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js

@@ -0,0 +1,36 @@
+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 };