Init

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

app/routes/Dashboards/System/components/TinyDonutChart.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const TinyDonutChart = (props) => {
+    const data = [
+        {name: 'Group A', value: 40+Math.random()*100},
+        {name: 'Group B', value: Math.random()*100}
+    ];
+    return (
+        <PieChart width={ 80 } height={ 80 }>
+            <Pie
+                data={data}
+                dataKey="value"
+                stroke={ colors[ props.strokeColor ] }
+                innerRadius={ 28 }
+                outerRadius={ 35 } 
+                fill={ colors[ props.pieBg ] }
+            >
+            <Cell fill={ colors[ props.pieColor ] } />
+            </Pie>
+        </PieChart>
+    )
+};
+
+TinyDonutChart.propTypes = {
+    pieColor: PropTypes.string,
+    strokeColor: PropTypes.string,
+    pieBg: PropTypes.string
+};
+TinyDonutChart.defaultProps = {
+    pieColor: "primary",
+    strokeColor: "white",
+    pieBg: "200"
+};
+
+export { TinyDonutChart };