Init

Preview: http://dashboards.webkom.co/react/airframe
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
--- a/app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js
+++ b/app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { 
+    AreaChart, 
+    CartesianGrid,
+    DefAreaValueColor,
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+    {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+    {name: 'Page C', uv: -1000, pv: 9800, amt: 2290},
+    {name: 'Page D', uv: 500, pv: 3908, amt: 2000},
+    {name: 'Page E', uv: -2000, pv: 4800, amt: 2181},
+    {name: 'Page F', uv: -250, pv: 3800, amt: 2500},
+    {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
+];
+
+export const AreaChartFillByValue = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <AreaChart
+            data={data}
+            margin={{top: 10, right: 30, left: 0, bottom: 0}}
+        >
+            <CartesianGrid/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <defs>
+                <DefAreaValueColor
+                    id="splitColor"
+                    data={ data }
+                    positiveColor={ colors['success-03'] }
+                    negativeColor={ colors['danger-03'] }
+                />
+            </defs>
+            <Area dataKey="uv" stroke={ colors['white'] } fill="url(#splitColor)" />
+        </AreaChart>
+    </ResponsiveContainer>
+
+);
--- a/app/routes/Graphs/ReCharts/components/BarChartHasBackground.js
+++ b/app/routes/Graphs/ReCharts/components/BarChartHasBackground.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    Bar 
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const BarChartHasBackground = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <Tooltip/>
+           <Legend />
+           <Bar dataKey="pv" fill={ colors['primary'] } background={{ fill: colors['200'] }} barSize={ 5 } />
+           <Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
+      </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { BarChartHasBackground };
--- a/app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js
+++ b/app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    ReferenceLine,
+    Legend, 
+    Bar 
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: -3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: -2000, pv: -9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: -1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: -3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const BarChartStackedBySign = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart data={data} stackOffset="sign"
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <Tooltip/>
+           <Legend />
+           <ReferenceLine y={0} stroke={ colors['400'] } />
+           <Bar dataKey="pv" fill={ colors['primary'] } stackId="stack" barSize={ 5 } />
+           <Bar dataKey="uv" fill={ colors['purple'] } stackId="stack" barSize={ 5 } />
+      </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { BarChartStackedBySign };
--- a/app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js
+++ b/app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { 
+    Line, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    LineChart,
+    ValueLabel,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        r={ 5 }
+        strokeWidth={ 3 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+    />
+);
+
+export const CustomizedLabelLineChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <LineChart data={data}
+            margin={{top: 15, right: 30, left: 20, bottom: 5}}>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <Tooltip/>
+           <Legend />
+           <Line dataKey="pv" stroke={ colors['primary'] } label={ <ValueLabel /> } activeDot={{r: 5}} dot={generateDot} />
+           <Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
+      </LineChart>
+    </ResponsiveContainer>
+);
--- a/app/routes/Graphs/ReCharts/components/DashedLineChart.js
+++ b/app/routes/Graphs/ReCharts/components/DashedLineChart.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { 
+    Line, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    LineChart,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        r={ 5 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+        strokeWidth={ 3 }
+        strokeDasharray={ 0 }
+    />
+);
+
+const DashedLineChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <LineChart width={600} height={300} data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <Tooltip/>
+           <Legend />
+           <Line dataKey="pv" stroke={ colors['primary'] } activeDot={{r: 5}} dot={generateDot} strokeDasharray="5 5" />
+           <Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} strokeDasharray="3 4 5 2" />
+      </LineChart>
+    </ResponsiveContainer>
+
+)
+
+export { DashedLineChart };
--- a/app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js
+++ b/app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import {  
+    ResponsiveContainer,
+    ComposedChart, 
+    CartesianGrid, 
+    XAxis,
+    YAxis,
+    Tooltip,
+    Legend,
+    Area,
+    Bar,
+    Line,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [{name: 'Page A', uv: 590, pv: 800, amt: 1400},
+              {name: 'Page B', uv: 868, pv: 967, amt: 1506},
+              {name: 'Page C', uv: 1397, pv: 1098, amt: 989},
+              {name: 'Page D', uv: 1480, pv: 1200, amt: 1228},
+              {name: 'Page E', uv: 1520, pv: 1108, amt: 1100},
+              {name: 'Page F', uv: 1400, pv: 680, amt: 1700}];
+
+// eslint-disable-next-line react/prop-types
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        r={ 4 }
+        strokeWidth={ 2 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+    />
+);
+
+const LineBarAreaComposedChart = ({height, className}) => (
+    <ResponsiveContainer
+        width='100%'
+        minHeight='250px'
+        className={ className }
+        {...(!_.isUndefined(height) ? {
+            height
+        } : {
+            aspect: 2 / 1
+        })}
+    >
+        <ComposedChart data={data}
+            margin={{top: 5, right: 20, left: 20, bottom: 5}}>
+          <CartesianGrid />
+          <XAxis dataKey="name"/>
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Area dataKey='amt' fill={ colors['200'] } stroke={ colors['400'] } />
+          <Bar dataKey='pv' barSize={ 5 } fill={ colors['primary'] } />
+          <Line dataKey='uv' stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
+       </ComposedChart>
+    </ResponsiveContainer>
+);
+LineBarAreaComposedChart.propTypes = {
+    height: PropTypes.string,
+    className: PropTypes.string
+}
+
+export { LineBarAreaComposedChart };
--- a/app/routes/Graphs/ReCharts/components/MixBarChart.js
+++ b/app/routes/Graphs/ReCharts/components/MixBarChart.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    Bar 
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, female: 2400, male: 2400},
+      {name: 'Page B', uv: 3000, female: 1398, male: 2210},
+      {name: 'Page C', uv: 2000, female: 9800, male: 2290},
+      {name: 'Page D', uv: 2780, female: 3908, male: 2000},
+      {name: 'Page E', uv: 1890, female: 4800, male: 2181},
+      {name: 'Page F', uv: 2390, female: 3800, male: 2500},
+      {name: 'Page G', uv: 3490, female: 4300, male: 2100},
+];
+
+const MixBarChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart data={data}
+        margin={{top: 20, right: 30, left: 20, bottom: 5}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Legend />
+            <Bar dataKey="female" stackId="a" fill={ colors['purple'] } barSize={ 5 } />
+            <Bar dataKey="male" stackId="a" fill={ colors['primary'] } barSize={ 5 } />
+            <Bar dataKey="uv" fill={ colors['success'] } barSize={ 5 } />
+        </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { MixBarChart };
--- a/app/routes/Graphs/ReCharts/components/PercentAreaChart.js
+++ b/app/routes/Graphs/ReCharts/components/PercentAreaChart.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { 
+    AreaChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const PercentAreaChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <AreaChart data={data}
+            margin={{top: 10, right: 30, left: 0, bottom: 0}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Area dataKey='uv' stackId="1" stroke={ colors['purple'] } fill={ colors['purple-03'] } />
+            <Area dataKey='pv' stackId="1" stroke={ colors['primary'] } fill={ colors['primary-03'] } />
+            <Area dataKey='amt' stackId="1" stroke={ colors['success'] } fill={ colors['success-03'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+
+)
+
+export { PercentAreaChart };
--- a/app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js
+++ b/app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { 
+    Pie, 
+    ResponsiveContainer,
+    Cell,
+    PieChart,
+    PieValueLabel
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+export const PieChartWithCustomizedLabel = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                data={data}
+                dataKey="value"
+                stroke={ colors['white'] }
+                labelLine={false}
+                label={<PieValueLabel />}
+                outerRadius={80} 
+                fill="#8884d8"
+            >
+                {
+                    data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
+                }
+            </Pie>
+        </PieChart>
+    </ResponsiveContainer>
+);
--- a/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js
+++ b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+    PieChart,
+    Pie,
+    Cell,
+    ResponsiveContainer
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+export const PieChartWithPaddingAngle = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                data={data}
+                dataKey="value"
+                stroke={ colors['white'] }
+                innerRadius={70}
+                outerRadius={80} 
+                fill="#8884d8"
+                paddingAngle={1}
+            >
+                {
+                    data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
+                }
+            </Pie>
+        </PieChart>
+    </ResponsiveContainer>
+);
--- a/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js
+++ b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+    PieChart,
+    Pie,
+    Cell,
+    ResponsiveContainer
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+export const PieChartWithPaddingAngleHalf = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                data={data}
+                dataKey="value"
+                innerRadius={70}
+                stroke={ colors['white'] }
+                outerRadius={80}
+                startAngle={180}
+                endAngle={0}
+                fill="#8884d8"
+                paddingAngle={1}
+            >
+                {
+                    data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
+                }
+            </Pie>
+        </PieChart>
+    </ResponsiveContainer>
+);
--- a/app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js
+++ b/app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    ReferenceLine,
+    Legend, 
+    Bar 
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: -3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: -2000, pv: -9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: -1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: -3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const PositiveAndNegativeBarChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart width={600} height={300} data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <Tooltip/>
+           <Legend />
+           <ReferenceLine y={0} stroke={ colors['400'] } />
+           <Bar dataKey="pv" fill={ colors['primary'] } barSize={ 5 } />
+           <Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
+      </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { PositiveAndNegativeBarChart };
--- a/app/routes/Graphs/ReCharts/components/SimpleAreaChart.js
+++ b/app/routes/Graphs/ReCharts/components/SimpleAreaChart.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { 
+    AreaChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const SimpleAreaChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <AreaChart data={data}
+            margin={{top: 10, right: 30, left: 0, bottom: 0}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Area dataKey='uv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
+      </AreaChart>
+    </ResponsiveContainer>
+
+)
+
+export { SimpleAreaChart };
--- a/app/routes/Graphs/ReCharts/components/SimpleBarChart.js
+++ b/app/routes/Graphs/ReCharts/components/SimpleBarChart.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    Bar
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const SimpleBarChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart 
+            data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}
+        >
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip
+                contentStyle={{
+                    background: colors['900'],
+                    border: `1px solid ${colors['900']}`,
+                    color: colors['white']
+                }}
+            />
+            <Legend wrapperStyle={{ color: colors['900'] }}/>
+            <Bar dataKey="pv" fill={ colors['primary'] } barSize={ 5 } />
+            <Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
+        </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { SimpleBarChart };
--- a/app/routes/Graphs/ReCharts/components/SimpleLineChart.js
+++ b/app/routes/Graphs/ReCharts/components/SimpleLineChart.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { 
+    Line, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    LineChart,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+// eslint-disable-next-line react/prop-types
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        r={ 5 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+        strokeWidth={ 3 }
+    />
+);
+
+const generateActiveDot = (props) => (
+    <Dot
+        { ...props }
+        stroke={ colors['white'] }
+        r={ 5 }
+    />
+);
+
+const SimpleLineChart = ({height, className}) => (
+    <ResponsiveContainer
+        width='100%'
+        className={ className }
+        {...(!_.isUndefined(height) ? {
+            height
+        } : {
+            aspect: 2 / 1
+        })}
+    >
+        <LineChart data={data}
+            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
+           <XAxis dataKey="name"/>
+           <YAxis/>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <Tooltip/>
+           <Legend />
+           <Line dataKey="pv" stroke={ colors['primary'] } dot={generateDot} activeDot={generateActiveDot} />
+           <Line dataKey="uv" stroke={ colors['purple'] } dot={generateDot} activeDot={generateActiveDot} />
+      </LineChart>
+    </ResponsiveContainer>
+);
+SimpleLineChart.propTypes = {
+    height: PropTypes.string,
+    className: PropTypes.string
+}
+
+export { SimpleLineChart };
--- a/app/routes/Graphs/ReCharts/components/SimpleRadialBarChart.js
+++ b/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 };
--- a/app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js
+++ b/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 };
--- a/app/routes/Graphs/ReCharts/components/StackedAreaChart.js
+++ b/app/routes/Graphs/ReCharts/components/StackedAreaChart.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { 
+    AreaChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Area
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const StackedAreaChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <AreaChart data={data}
+            margin={{top: 10, right: 30, left: 0, bottom: 0}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Area dataKey='uv' stackId="1" stroke={ colors['primary'] } fill={ colors['primary-03'] } />
+            <Area dataKey='pv' stackId="1" stroke={ colors['purple'] } fill={ colors['purple-03'] } />
+            <Area dataKey='amt' stackId="1" stroke={ colors['success'] } fill={ colors['success-03'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+
+)
+
+export { StackedAreaChart };
--- a/app/routes/Graphs/ReCharts/components/StackedBarChart.js
+++ b/app/routes/Graphs/ReCharts/components/StackedBarChart.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { 
+    BarChart, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    Bar 
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const StackedBarChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <BarChart data={data}
+        margin={{top: 20, right: 30, left: 20, bottom: 5}}>
+            <CartesianGrid strokeDasharray="3 3"/>
+            <XAxis dataKey="name"/>
+            <YAxis/>
+            <Tooltip/>
+            <Legend />
+            <Bar dataKey="pv" stackId="a" fill={ colors['primary'] } barSize={ 5 } />
+            <Bar dataKey="uv" stackId="a" fill={ colors['purple'] } barSize={ 5 } />
+        </BarChart>
+    </ResponsiveContainer>
+
+)
+
+export { StackedBarChart };
--- a/app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js
+++ b/app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { 
+    Pie, 
+    ResponsiveContainer,
+    PieChart
+}  from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    { name: 'Group A', value: 400 },
+    { name: 'Group B', value: 300 },
+    { name: 'Group C', value: 300 },
+    { name: 'Group D', value: 200 },
+    { name: 'Group E', value: 278 },
+    { name: 'Group F', value: 189 }
+];
+
+const StraightAnglePieChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                startAngle={180}
+                endAngle={0}
+                data={data}
+                dataKey="value"
+                outerRadius={80}
+                fill={ colors['primary'] }
+                stroke={ colors['white'] }
+                label={{fill: colors['900'], fontSize: '12px'}}
+            />
+       </PieChart>
+    </ResponsiveContainer>
+
+)
+
+export { StraightAnglePieChart };
--- a/app/routes/Graphs/ReCharts/components/TinyAreaChart.js
+++ b/app/routes/Graphs/ReCharts/components/TinyAreaChart.js
@@ -0,0 +1,22 @@
+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 }));
+
+/* 99% - some wierd HACK that makes the container resize properly */
+const TinyAreaChart = () => (
+    <ResponsiveContainer width="99%" height={ 40 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-04'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChart };
--- a/app/routes/Graphs/ReCharts/components/TinyBarChart.js
+++ b/app/routes/Graphs/ReCharts/components/TinyBarChart.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    BarChart, 
+    Bar
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = _.times(40, () => ({ pv: Math.random() * 100 }));
+
+const TinyBarChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <BarChart data={data}>
+            <Bar dataKey='pv' fill={ colors['primary'] } barSize={5} />
+        </BarChart>
+    </ResponsiveContainer>
+);
+
+export { TinyBarChart };
--- a/app/routes/Graphs/ReCharts/components/TinyDonutChart.js
+++ b/app/routes/Graphs/ReCharts/components/TinyDonutChart.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+const TinyDonutChart = () => (
+    <PieChart width={ 30 } height={ 30 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            stroke={ colors['white'] }
+            innerRadius={ 10 }
+            outerRadius={ 15 } 
+            fill="#8884d8"
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyDonutChart };
--- a/app/routes/Graphs/ReCharts/components/TinyLineChart.js
+++ b/app/routes/Graphs/ReCharts/components/TinyLineChart.js
@@ -0,0 +1,32 @@
+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 }
+        r={ 4 }
+        strokeWidth={ 2 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+    />
+);
+
+const TinyLineChart = () => (
+    <ResponsiveContainer width='100%' height={ 40 }>
+        <LineChart data={data}>
+            <Line dataKey='pv' stroke={ colors['primary'] } strokeWidth={2} activeDot={{r: 5}} dot={generateDot} />
+        </LineChart>
+    </ResponsiveContainer>
+);
+
+export { TinyLineChart };
--- a/app/routes/Graphs/ReCharts/components/TinyPieChart.js
+++ b/app/routes/Graphs/ReCharts/components/TinyPieChart.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {  
+    PieChart, 
+    Pie,
+    Cell
+}  from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+const TinyPieChart = () => (
+    <PieChart width={ 30 } height={ 30 }>
+        <Pie
+            data={data}
+            dataKey="value"
+            fill="#8884d8"
+            stroke={ colors['white'] }
+            outerRadius={ 15 } 
+        >
+            {
+                data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
+            }
+        </Pie>
+    </PieChart>
+);
+
+export { TinyPieChart };
--- a/app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js
+++ b/app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { 
+    Pie, 
+    ResponsiveContainer,
+    PieChart
+}  from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data01 = [
+    { name: 'Group A', value: 400 },
+    { name: 'Group B', value: 300 },
+    { name: 'Group C', value: 300 },
+    { name: 'Group D', value: 200 }
+];
+
+const data02 = [
+    { name: 'A1', value: 100 },
+    { name: 'A2', value: 300 },
+    { name: 'B1', value: 100 },
+    { name: 'B2', value: 80 },
+    { name: 'B3', value: 40 },
+    { name: 'B4', value: 30 },
+    { name: 'B5', value: 50 },
+    { name: 'C1', value: 100 },
+    { name: 'C2', value: 200 },
+    { name: 'D1', value: 150 },
+    { name: 'D2', value: 50 }
+];
+
+const TwoLevelPieChart = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                data={data01}
+                dataKey="value"
+                outerRadius={67}
+                fill={ colors['primary'] }
+                stroke={ colors['white'] }
+            />
+            <Pie
+                data={data02}
+                dataKey="value"
+                innerRadius={70}
+                outerRadius={80}
+                fill={ colors['purple'] }
+                stroke={ colors['white'] }
+                label={{fill: colors['800'], fontSize: '12px'}}
+            />
+       </PieChart>
+    </ResponsiveContainer>
+
+)
+
+export { TwoLevelPieChart };
--- a/app/routes/Graphs/ReCharts/components/VerticalComposedChart.js
+++ b/app/routes/Graphs/ReCharts/components/VerticalComposedChart.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+    Area,
+    Line,
+    Bar,
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend,
+    ComposedChart,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+// eslint-disable-next-line react/prop-types
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        r={ 5 }
+        strokeWidth={ 2 }
+        { ...other }
+        fill={ stroke }
+        stroke={ colors['white'] }
+    />
+);
+
+export const VerticalComposedChart = () => (
+    <ResponsiveContainer width='100%' aspect={ 6.0/3.0 }>
+        <ComposedChart layout="vertical" width={600} height={400} data={data}
+            margin={{top: 5, right: 20, left: 20, bottom: 5}}>
+            <CartesianGrid />
+            <XAxis type="number"/>
+            <YAxis dataKey="name" type="category"/>
+            <Tooltip/>
+            <Legend/>
+            <Area dataKey='amt' fill={ colors['200'] } stroke={ colors['400'] } />
+            <Bar dataKey='pv' barSize={5} fill={ colors['primary'] } />
+            <Line dataKey='uv' stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
+        </ComposedChart>
+    </ResponsiveContainer>
+);
--- a/app/routes/Graphs/ReCharts/components/VerticalLineChart.js
+++ b/app/routes/Graphs/ReCharts/components/VerticalLineChart.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { 
+    Line, 
+    CartesianGrid, 
+    XAxis, 
+    YAxis, 
+    Tooltip, 
+    ResponsiveContainer,
+    Legend, 
+    LineChart,
+    Dot
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
+];
+
+const generateDot = ({stroke, ...other}) => (
+    <Dot
+        { ...other }
+        r={ 5 }
+        fill={ stroke }
+        stroke={ colors['white'] }
+        strokeWidth={ 3 }
+    />
+);
+
+const VerticalLineChart = () => (
+    <ResponsiveContainer width='100%' aspect={ 6.0/3.0 }>
+        <LineChart layout="vertical" data={data}
+            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
+           <CartesianGrid strokeDasharray="3 3"/>
+           <XAxis type="number" />
+           <YAxis dataKey="name" type="category"/>
+           <Tooltip/>
+           <Legend />
+           <Line dataKey="pv" stroke={ colors['primary'] } activeDot={{r: 5}} dot={generateDot} />
+           <Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
+      </LineChart>
+    </ResponsiveContainer>
+);
+
+export { VerticalLineChart };