Init

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

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']
+};