From 5460d574e214f6a50186a2ccbb0d433154da1929 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sun, 26 Aug 2018 18:05:39 +0200
Subject: [PATCH] Use border style to draw fhm line

---
 components/chart/day-column.js | 32 ++++++++++++++++----------------
 components/chart/styles.js     |  1 -
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index c23da39..268df06 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -38,19 +38,11 @@ export default class DayColumn extends Component {
       chartHeight
     } = this.props
 
-    const columnElements = []
+    const columnHeight = chartHeight * config.columnHeightPercentage
+    const xAxisHeight = chartHeight * config.xAxisHeightPercentage
+    const symptomHeight = chartHeight * config.symptomRowHeightPercentage
 
-    if(drawFhmLine) {
-      const fhmLine = (<View
-        position = 'absolute'
-        top={100}
-        width={styles.nfpLine.strokeWidth}
-        height={200}
-        {...styles.nfpLine}
-        key='fhm'
-      />)
-      columnElements.push(fhmLine)
-    }
+    const columnElements = []
 
     if(drawLtlAt) {
       const ltlLine = (<View
@@ -89,14 +81,22 @@ export default class DayColumn extends Component {
       </Text>
     )
 
-    const columnHeight = chartHeight * config.columnHeightPercentage
-    const xAxisHeight = chartHeight * config.xAxisHeightPercentage
-    const symptomHeight = chartHeight * config.symptomRowHeightPercentage
+    // we merge the colors here instead of from the stylesheet because of a RN
+    // bug that doesn't apply borderLeftColor otherwise
+    const customStyle = {
+      height: columnHeight,
+      borderLeftColor: 'grey',
+      borderRightColor: 'grey'
+    }
 
+    if (drawFhmLine) {
+      customStyle.borderLeftColor = styles.nfpLine.borderColor
+      customStyle.borderLeftWidth = 3
+    }
     const column = React.createElement(
       TouchableOpacity,
       {
-        style: [styles.column.rect, {height: columnHeight}],
+        style: [styles.column.rect, customStyle],
         key: this.props.index.toString(),
         onPress: () => {
           this.passDateToDayView(dateString)
diff --git a/components/chart/styles.js b/components/chart/styles.js
index bfc3430..d7ab484 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -39,7 +39,6 @@ const styles = {
     rect: {
       width: config.columnWidth,
       borderStyle: 'solid',
-      borderColor: 'grey',
       borderLeftWidth: 0.5,
       borderRightWidth: 0.5,
     }