Init

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

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

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