Draw NFP lines with svg

components/chart/day-column.js

@@ -2,10 +2,7 @@ import React, { Component } from 'react'
 import {
   Text, View, TouchableOpacity
 } from 'react-native'
-import Svg,{
+import Svg,{ G, Rect, Line } from 'react-native-svg'
-  G,
-  Rect
-} from 'react-native-svg'
 import Icon from 'react-native-vector-icons/Entypo'
 import styles from './styles'
 import config from '../../config'
@@ -51,16 +48,31 @@ export default class DayColumn extends Component {
     const columnElements = []
 
     if(drawLtlAt) {
-      const ltlLine = (<View
+      const ltlLine = (<Line
-        position = 'absolute'
+        x1={0}
-        width={'100%'}
+        y1={drawLtlAt}
-        top={drawLtlAt}
+        x2={config.columnWidth}
+        y2={drawLtlAt}
         {...styles.nfpLine}
         key='ltl'
       />)
       columnElements.push(ltlLine)
     }
 
+    if (drawFhmLine) {
+      const x = styles.nfpLine.strokeWidth / 2
+      const fhmLine = (<Line
+        x1={x}
+        y1={x}
+        x2={x}
+        y2={columnHeight}
+        {...styles.nfpLine}
+        key='ltl'
+      />)
+      columnElements.push(fhmLine)
+    }
+
+
     if (y) {
       columnElements.push(
         <DotAndLine
@@ -87,30 +99,6 @@ export default class DayColumn extends Component {
       </Text>
     )
 
-    // we merge the colors here instead of from the stylesheet because of a RN
-    // bug that doesn't apply borderLeftColor otherwise
-    const potentialCustomStyle = {
-      height: columnHeight,
-      borderLeftColor: 'grey',
-    }
-
-    if (drawFhmLine) {
-      potentialCustomStyle.borderLeftColor = styles.nfpLine.borderColor
-      potentialCustomStyle.borderLeftWidth = 3
-    }
-    // const column = React.createElement(
-    //   TouchableOpacity,
-    //   {
-    //     style: [styles.column.rect, potentialCustomStyle],
-    //     key: this.props.index.toString(),
-    //     onPress: () => {
-    //       this.passDateToDayView(dateString)
-    //     },
-    //     activeOpacity: 1
-    //   },
-    //   columnElements
-    // )
-
     const column = (
       <G>
         <Rect

components/chart/styles.js

@@ -6,6 +6,8 @@ const colorTemperatureLight = '#a67fb5'
 const dotRadius = 5
 const lineWidth = 1.5
 const colorLtl = '#feb47b'
+const gridColor = 'lightgrey'
+const gridLineWidth = 0.5
 
 const styles = {
   curve: {
@@ -41,8 +43,8 @@ const styles = {
       x:'0',
       y:'0',
       width: config.columnWidth,
-      stroke: "red",
+      stroke: gridColor,
-      strokeWidth: 0.25,
+      strokeWidth: gridLineWidth,
       fill: 'transparent'
     }
   },
@@ -80,16 +82,15 @@ const styles = {
   },
   horizontalGrid: {
     position:'absolute',
-    borderColor: 'lightgrey',
+    borderColor: gridColor,
-    borderWidth: 0.5,
+    borderWidth: gridLineWidth,
     width: '100%',
     borderStyle: 'solid',
     left: config.columnWidth
   },
   nfpLine: {
-    borderColor: colorLtl,
+    stroke: colorLtl,
-    borderWidth: lineWidth,
+    strokeWidth: lineWidth,
-    borderStyle: 'solid'
   },
   symptomRow: {
     alignItems: 'center',