Init

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

app/routes/Dashboards/Reports/components/TinyArcChart.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Free', value: 40 },
+    {name: 'Used', value: 60 },
+];
+
+const COLORS = [ colors['light'], colors['primary'] ];
+const SIZE = 70;
+
+const TinyArcChart = () => (
+    <PieChart width={ SIZE } height={ SIZE / 2 } margin={{ bottom: 0, top: 0, left: 5, right: 5 }}>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke="no"
+            innerRadius={ SIZE / 2 * 0.7 }
+            outerRadius={ SIZE / 2 } 
+            fill="#8884d8"
+            startAngle={ 0 }
+            endAngle={ 180 }
+            cy="100%"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyArcChart };

app/routes/Dashboards/Reports/components/TinyAreaChart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-03'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChart };

app/routes/Dashboards/Reports/components/TinyLineChart.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    LineChart, 
+    Line,
+	Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        fill={ stroke }
+        stroke={ colors['white'] }
+    />
+);
+
+const TinyLineChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <LineChart data={data}>
+            <Line dataKey='pv' stroke={ colors['primary-07'] } strokeWidth={2} activeDot={{r: 5}} dot={generateDot} />
+        </LineChart>
+    </ResponsiveContainer>
+);
+
+export { TinyLineChart };