From bd6f30ac08d32a723d129c7fac695d8559a64539 Mon Sep 17 00:00:00 2001
From: Jesper Lekland <jesper.lekland@gmail.com>
Date: Wed, 24 Jan 2018 12:15:52 +0100
Subject: [PATCH] add `renderLineGradient` for area-chart (#25)

* add `renderLineGradient` for area-chart
---
 README.md                     | 3 +++
 package.json                  | 2 +-
 src/area-chart.js             | 4 ++++
 storybook/stories/gradient.js | 6 ++++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 94fd8455..c82856ce 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,9 @@ class AreaChartExample extends React.PureComponent {
 #### Props
 
 See [Common Props](#common-props)
+| Property | Default | Description |
+| --- | --- | --- |
+| renderLineGradient | undefined | The same as `renderGradient` but for the line in the chart  |
 
 ### StackedAreaChart
 
diff --git a/package.json b/package.json
index 2b8c1699..2c768561 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-charts",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": false,
   "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native",
   "main": "src/index.js",
diff --git a/src/area-chart.js b/src/area-chart.js
index e6fbab4e..4073ebff 100644
--- a/src/area-chart.js
+++ b/src/area-chart.js
@@ -28,6 +28,7 @@ class AreaChart extends PureComponent {
                   animationDuration,
                   style,
                   renderGradient,
+                  renderLineGradient,
                   curve,
                   showGrid,
                   numberOfTicks,
@@ -102,6 +103,7 @@ class AreaChart extends PureComponent {
                         { showGrid && renderGrid({ x, y, ticks, dataPoints, gridProps }) }
                         <Defs>
                             { renderGradient && renderGradient({ id: 'gradient', width, height, x, y }) }
+                            { renderLineGradient && renderLineGradient({ id: 'line-gradient', width, height, x, y }) }
                         </Defs>
                         <Path
                             { ...svg }
@@ -113,6 +115,7 @@ class AreaChart extends PureComponent {
                         />
                         <Path
                             { ...svg }
+                            stroke={ renderLineGradient ? 'url(#line-gradient)' : svg.stroke }
                             animate={animate}
                             animationDuration={animationDuration}
                             d={ line }
@@ -150,6 +153,7 @@ AreaChart.propTypes = {
     gridMax: PropTypes.number,
     // see https://github.com/react-native-community/react-native-svg#lineargradient for more info
     renderGradient: PropTypes.func,
+    renderLineGradient: PropTypes.func,
     curve: PropTypes.func,
     renderGrid: PropTypes.func,
 }
diff --git a/storybook/stories/gradient.js b/storybook/stories/gradient.js
index 8e5969f6..a85a6680 100644
--- a/storybook/stories/gradient.js
+++ b/storybook/stories/gradient.js
@@ -19,6 +19,12 @@ class GradientExample extends React.PureComponent {
                         <Stop offset={ '100%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.2 }/>
                     </LinearGradient>
                 ) }
+                renderLineGradient={ ({ id }) => (
+                    <LinearGradient id={ id } x1={ '0%' } y={ '0%' } x2={ '0%' } y2={ '100%' }>
+                        <Stop offset={ '0%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.8 }/>
+                        <Stop offset={ '100%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.2 }/>
+                    </LinearGradient>
+                ) }
             />
         )
     }