From 71e4c6d11e55ff5c68786a25d96230d60efdfb77 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 18 Nov 2019 13:36:59 +0100
Subject: [PATCH] Introduces ChartLine component

---
 components/chart/chart-line.js | 28 ++++++++++++++++++++++++++
 components/chart/day-column.js | 36 ++++++++++++----------------------
 2 files changed, 40 insertions(+), 24 deletions(-)
 create mode 100644 components/chart/chart-line.js

diff --git a/components/chart/chart-line.js b/components/chart/chart-line.js
new file mode 100644
index 0000000..95300ad
--- /dev/null
+++ b/components/chart/chart-line.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
+
+import styles from './styles'
+
+const ChartLine = ({ path, isNfpLine = false }) => {
+  const strokeStyle =
+    isNfpLine ? styles.nfpLine.stroke : styles.column.stroke.color
+  const strokeWidth =
+    isNfpLine ? styles.nfpLine.strokeWidth : styles.column.stroke.width
+
+  return (
+    <Shape
+      stroke={strokeStyle}
+      strokeWidth={strokeWidth}
+      d={path}
+    />
+  )
+}
+
+ChartLine.propTypes = {
+  path: PropTypes.object,
+  isNfpLine: PropTypes.bool,
+}
+
+export default ChartLine
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 1597697..e814b04 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -4,9 +4,7 @@ import {
 } from 'react-native'
 import {
   Surface,
-  Group as G,
-  Path,
-  Shape
+  Path
 } from 'react-native/Libraries/ART/ReactNativeART'
 import { connect } from 'react-redux'
 
@@ -21,6 +19,7 @@ import { getCycleDay } from '../../db'
 
 import DotAndLine from './dot-and-line'
 import SymptomCell from './symptom-cell'
+import ChartLine from './chart-line'
 
 import { normalizeToScale } from '../helpers/chart'
 
@@ -151,13 +150,12 @@ class DayColumn extends Component {
       xAxisHeight } = this.props
 
     if(this.fhmAndLtl.drawLtlAt) {
-      const ltlLine = (<Shape
-        stroke={styles.nfpLine.stroke}
-        strokeWidth={styles.nfpLine.strokeWidth}
-        d={new Path()
+      const ltlLine = (<ChartLine
+        path={new Path()
           .moveTo(0, this.fhmAndLtl.drawLtlAt)
           .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
         }
+        isNfpLine={true}
         key='ltl'
       />)
       columnElements.push(ltlLine)
@@ -165,11 +163,9 @@ class DayColumn extends Component {
 
     if (this.fhmAndLtl.drawFhmLine) {
       const x = styles.nfpLine.strokeWidth / 2
-      const fhmLine = (<Shape
-        fill="red"
-        stroke={styles.nfpLine.stroke}
-        strokeWidth={styles.nfpLine.strokeWidth}
-        d={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+      const fhmLine = (<ChartLine
+        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+        isNfpLine={true}
         key='fhm'
       />)
       columnElements.push(fhmLine)
@@ -215,17 +211,6 @@ class DayColumn extends Component {
       </Text>
     )
 
-    const column = (
-      <G>
-        <Shape
-          stroke={styles.column.stroke.color}
-          strokeWidth={styles.column.stroke.width}
-          d={new Path().lineTo(0, chartHeight)}
-        />
-        { columnElements }
-      </G>
-    )
-
     return (
       <TouchableOpacity
         onPress={() => this.onDaySelect(dateString)}
@@ -248,7 +233,10 @@ class DayColumn extends Component {
         )}
 
         <Surface width={config.columnWidth} height={columnHeight}>
-          {column}
+          <ChartLine
+            path={new Path().lineTo(0, chartHeight)}
+          />
+          { columnElements }
         </Surface>
 
         <View style={{height: xAxisHeight}}>