From 1293ec27817e94834de6484a764a42ce8e84e964 Mon Sep 17 00:00:00 2001
From: Reza Ferdosi <rferdosy@gmail.com>
Date: Mon, 18 May 2020 07:42:16 +0430
Subject: [PATCH] Added continuousLine prop to line chart

---
 src/line-chart/line-chart-grouped.js          | 22 ++++++++++++-----
 src/line-chart/line-chart.js                  | 24 ++++++++++++-------
 .../stories/line-chart/continuous-line.js     | 22 +++++++++++++++++
 storybook/stories/line-chart/index.js         |  2 ++
 4 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 storybook/stories/line-chart/continuous-line.js

diff --git a/src/line-chart/line-chart-grouped.js b/src/line-chart/line-chart-grouped.js
index bb7074b8..752499be 100644
--- a/src/line-chart/line-chart-grouped.js
+++ b/src/line-chart/line-chart-grouped.js
@@ -3,17 +3,27 @@ import ChartGrouped from '../chart/chart-grouped'
 
 class LineChartGrouped extends ChartGrouped {
     createPaths({ data, x, y }) {
-        const { curve } = this.props
-
-        const lines = data.map((line) =>
-            shape
+        const { curve, continuousLine } = this.props
+        let line
+        if (continuousLine) {
+            line = shape
+                .line()
+                .x((d) => x(d.x))
+                .y((d) => y(d.y))
+                .curve(curve)(data.filter((item) => item.y))
+        } else {
+            line = shape
                 .line()
                 .x((d) => x(d.x))
                 .y((d) => y(d.y))
                 .defined((item) => typeof item.y === 'number')
-                .curve(curve)(line)
-        )
+                .curve(curve)(data)
+        }
 
+        return {
+            path: line,
+            line,
+        }
         return {
             path: lines,
             lines,
diff --git a/src/line-chart/line-chart.js b/src/line-chart/line-chart.js
index bf6fb37a..91b70d38 100644
--- a/src/line-chart/line-chart.js
+++ b/src/line-chart/line-chart.js
@@ -3,14 +3,22 @@ import Chart from '../chart/chart'
 
 class LineChart extends Chart {
     createPaths({ data, x, y }) {
-        const { curve } = this.props
-
-        const line = shape
-            .line()
-            .x((d) => x(d.x))
-            .y((d) => y(d.y))
-            .defined((item) => typeof item.y === 'number')
-            .curve(curve)(data)
+        const { curve, continuousLine } = this.props
+        let line
+        if (continuousLine) {
+            line = shape
+                .line()
+                .x((d) => x(d.x))
+                .y((d) => y(d.y))
+                .curve(curve)(data.filter((item) => item.y))
+        } else {
+            line = shape
+                .line()
+                .x((d) => x(d.x))
+                .y((d) => y(d.y))
+                .defined((item) => typeof item.y === 'number')
+                .curve(curve)(data)
+        }
 
         return {
             path: line,
diff --git a/storybook/stories/line-chart/continuous-line.js b/storybook/stories/line-chart/continuous-line.js
new file mode 100644
index 00000000..5c651b18
--- /dev/null
+++ b/storybook/stories/line-chart/continuous-line.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { LineChart, Grid } from 'react-native-svg-charts'
+
+class ContinuousLineLineChartExample extends React.PureComponent {
+    render() {
+        const data = [50, 10, 40, 95, null, -24, 85, 91, 35, 53, -53, null, 50, -20, -80]
+
+        return (
+            <LineChart
+                style={{ height: 200 }}
+                data={data}
+                svg={{ stroke: 'rgb(134, 65, 244)' }}
+                contentInset={{ top: 20, bottom: 20 }}
+                continuousLine
+            >
+                <Grid />
+            </LineChart>
+        )
+    }
+}
+
+export default ContinuousLineLineChartExample
diff --git a/storybook/stories/line-chart/index.js b/storybook/stories/line-chart/index.js
index ba5b4260..640413dd 100644
--- a/storybook/stories/line-chart/index.js
+++ b/storybook/stories/line-chart/index.js
@@ -5,6 +5,7 @@ import Standard from './standard'
 import Partial from './partial'
 import WithGradient from './with-gradient'
 import Grouped from './grouped'
+import ContinuousLine from './continuous-line'
 import ShowcaseCard from '../showcase-card'
 
 storiesOf('LineChart')
@@ -13,3 +14,4 @@ storiesOf('LineChart')
     .add('Partial', () => <Partial />)
     .add('With gradient', () => <WithGradient />)
     .add('Grouped', () => <Grouped />)
+    .add('Continuous line', () => <ContinuousLine />)