Init

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

app/components/Recharts/CartesianGrid.js

@@ -0,0 +1,12 @@
+import { CartesianGrid  } from 'recharts';
+
+import styleConfig from './config';
+
+class CustomCartesianGrid extends CartesianGrid {
+    static defaultProps = {
+        ...CartesianGrid.defaultProps,
+        ...styleConfig.grid,
+    }
+}
+
+export { CustomCartesianGrid as CartesianGrid };

app/components/Recharts/DefAreaValueColor.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import colors from './../../colors';
+
+const gradientOffset = (data) => {
+    const dataMax = Math.max(...data.map((i) => i.uv));
+    const dataMin = Math.min(...data.map((i) => i.uv));
+  
+    if (dataMax <= 0){
+        return 0
+    }
+    else if (dataMin >= 0){
+        return 1
+    }
+    else{
+        return dataMax / (dataMax - dataMin);
+    }
+}
+
+export const DefAreaValueColor = (props) => {
+    const offset = gradientOffset(props.data);
+
+    return (
+        <linearGradient id={ props.id } x1="0" y1="0" x2="0" y2="1">
+            <stop offset={offset} stopColor={ props.positiveColor } stopOpacity={1}/>
+            <stop offset={offset} stopColor={ props.negativeColor } stopOpacity={1}/>
+        </linearGradient>
+    );
+};
+DefAreaValueColor.propTypes = {
+    positiveColor: PropTypes.string,
+    negativeColor: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    data: PropTypes.array.isRequired
+};
+DefAreaValueColor.defaultProps = {
+    positiveColor: colors['success-07'],
+    negativeColor: colors['danger-07']
+};

app/components/Recharts/Legend.js

@@ -0,0 +1,10 @@
+import { Legend as RCLegend } from 'recharts';
+
+import styleConfig from './config';
+
+export class Legend extends RCLegend {
+    static defaultProps = {
+        ...RCLegend.defaultProps,
+        ...styleConfig.legend
+    }
+}

app/components/Recharts/PieValueLabel.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import config from './config';
+
+const RADIAN = Math.PI / 180;                    
+
+export const PieValueLabel = (props) => {
+    const { cx, cy, midAngle, innerRadius, outerRadius, percent, color } = props;
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy  + radius * Math.sin(-midAngle * RADIAN);
+
+    return (
+        <text
+            x={ x }
+            y={ y }
+            textAnchor={ x > cx ? 'start' : 'end' }
+            dominantBaseline="central"
+            fill={ props.color || config.pieLabel.fill }
+            fontSize={ config.pieLabel.fontSize }
+        >
+            {`${(percent * 100).toFixed(0)}%`}
+        </text>
+    );
+};
+PieValueLabel.propTypes = {
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    midAngle: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    percent: PropTypes.number,
+    color: PropTypes.string
+};

app/components/Recharts/PolarAngleAxis.js

@@ -0,0 +1,10 @@
+import { PolarAngleAxis as RCPolarAngleAxis} from 'recharts';
+
+import styleConfig from './config';
+
+export class PolarAngleAxis extends RCPolarAngleAxis {
+    static defaultProps = {
+        ...RCPolarAngleAxis.defaultProps,
+        ...styleConfig.polarAngleAxis
+    }
+}

app/components/Recharts/PolarGrid.js

@@ -0,0 +1,12 @@
+import { PolarGrid  } from 'recharts';
+
+import styleConfig from './config';
+
+class CustomPolarGrid extends PolarGrid {
+    static defaultProps = {
+        ...PolarGrid.defaultProps,
+        ...styleConfig.polarGrid
+    }
+}
+
+export { CustomPolarGrid as PolarGrid };

app/components/Recharts/PolarRadiusAxis.js

@@ -0,0 +1,10 @@
+import { PolarRadiusAxis as RCPolarRadiusAxis} from 'recharts';
+
+import styleConfig from './config';
+
+export class PolarRadiusAxis extends RCPolarRadiusAxis {
+    static defaultProps = {
+        ...RCPolarRadiusAxis.defaultProps,
+        ...styleConfig.polarRadiusAxis
+    }
+}

app/components/Recharts/Tooltip.js

@@ -0,0 +1,10 @@
+import { Tooltip as RCTooltip } from 'recharts';
+
+import styleConfig from './config';
+
+export class Tooltip extends RCTooltip {
+    static defaultProps = {
+        ...RCTooltip.defaultProps,
+        ...styleConfig.tooltip
+    }
+}

app/components/Recharts/ValueLabel.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import config from './config';
+
+export const ValueLabel = (props) =>
+    <text
+        x={ props.x }
+        y={ props.y - config.label.fontSize }
+        textAnchor="middle"
+        { ...config.label }
+    >
+        { props.value }
+    </text>;
+
+ValueLabel.propTypes = {
+    value: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+};

app/components/Recharts/XAxis.js

@@ -0,0 +1,10 @@
+import { XAxis as RCXAxis } from 'recharts';
+
+import styleConfig from './config';
+
+export class XAxis extends RCXAxis {
+    static defaultProps = {
+        ...RCXAxis.defaultProps,
+        ...styleConfig.axis
+    }
+}

app/components/Recharts/YAxis.js

@@ -0,0 +1,10 @@
+import { YAxis as RCYAxis } from 'recharts';
+
+import styleConfig from './config';
+
+export class YAxis extends RCYAxis {
+    static defaultProps = {
+        ...RCYAxis.defaultProps,
+        ...styleConfig.axis
+    }
+}

app/components/Recharts/ZAxis.js

@@ -0,0 +1,10 @@
+import { ZAxis as RCZAxis } from 'recharts';
+
+import styleConfig from './config';
+
+export class ZAxis extends RCZAxis {
+    static defaultProps = {
+        ...RCZAxis.defaultProps,
+        ...styleConfig.axis
+    }
+}

app/components/Recharts/config.js

@@ -0,0 +1,61 @@
+// ReCharts styling configuration
+import colors from './../../colors';
+
+export default {
+    grid: {
+        stroke: colors['400'],
+        strokeWidth: 1,
+        strokeDasharray: '1px'
+    },
+    polarGrid: {
+        stroke: colors['400'],
+    },
+    axis: {
+        stroke: colors['500'],
+        strokeWidth: 1,
+        style: {
+            fontSize: '12px'
+        },
+        tick: {
+            // Axis Labels color:
+            fill: colors['900']
+        }
+    },
+    polarRadiusAxis: {
+        stroke: colors['400'],
+        tick: {
+            fill: colors['900']
+        }
+    },
+    polarAngleAxis: {
+        tick: {
+            fill: colors['900']
+        },
+        style: {
+            fontSize: '12px'
+        }
+    },
+    label: {
+        fontSize: 11,
+        fill: colors['900']
+    },
+    legend: {
+        wrapperStyle: {
+            color: colors['900']
+        }
+    },
+    pieLabel: {
+        fontSize: 12,
+        fill: colors[100]
+    },
+    tooltip: {
+        cursor: {
+            fill: colors['primary-01']
+        },
+        contentStyle: {
+            background: colors['900'],
+            border: `1px solid ${colors['900']}`,
+            color: colors['white']
+        }
+    }
+};