Introduces TemperatureColumn component

components/chart/chart.js

@@ -32,7 +32,6 @@ export default class CycleChart extends Component {
         navigate={this.props.navigate}
         symptomHeight={this.symptomHeight}
         columnHeight={this.columnHeight}
-        chartHeight={this.state.chartHeight}
         symptomRowSymptoms={this.symptomRowSymptoms}
         chartSymptoms={this.chartSymptoms}
         getFhmAndLtlInfo={this.getFhmAndLtlInfo}

components/chart/day-column.js

@@ -2,10 +2,7 @@ import React, { Component } from 'react'
 import {
   Text, View, TouchableOpacity
 } from 'react-native'
-import {
+import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
-  Surface,
-  Path
-} from 'react-native/Libraries/ART/ReactNativeART'
 import { connect } from 'react-redux'
 
 import { setDate } from '../../slices/date'
@@ -17,9 +14,8 @@ import config from '../../config'
 import cycleModule from '../../lib/cycle'
 import { getCycleDay } from '../../db'
 
-import DotAndLine from './dot-and-line'
 import SymptomCell from './symptom-cell'
-import ChartLine from './chart-line'
+import TemperatureColumn from './temperature-column'
 
 import { normalizeToScale } from '../helpers/chart'
 
@@ -142,57 +138,11 @@ class DayColumn extends Component {
   }
 
   render() {
-    const columnElements = []
     const { dateString,
       symptomRowSymptoms,
-      chartHeight,
       columnHeight,
       xAxisHeight } = this.props
 
-    if(this.fhmAndLtl.drawLtlAt) {
-      const ltlLine = (<ChartLine
-        path={new Path()
-          .moveTo(0, this.fhmAndLtl.drawLtlAt)
-          .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
-        }
-        isNfpLine={true}
-        key='ltl'
-      />)
-      columnElements.push(ltlLine)
-    }
-
-    if (this.fhmAndLtl.drawFhmLine) {
-      const x = styles.nfpLine.strokeWidth / 2
-      const fhmLine = (<ChartLine
-        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
-        isNfpLine={true}
-        key='fhm'
-      />)
-      columnElements.push(fhmLine)
-    }
-
-    if (this.data && this.data.temperature && this.data.temperature.y) {
-      const { temperatureExclude,
-        y,
-        rightY,
-        leftY,
-        rightTemperatureExclude,
-        leftTemperatureExclude
-      } = this.data.temperature
-
-      columnElements.push(
-        <DotAndLine
-          y={y}
-          exclude={temperatureExclude}
-          rightY={rightY}
-          rightTemperatureExclude={rightTemperatureExclude}
-          leftY={leftY}
-          leftTemperatureExclude={leftTemperatureExclude}
-          key='dotandline'
-        />
-      )
-    }
-
     const cycleDayNumber = cycleModule().getCycleDayNumber(dateString)
     const dayDate = LocalDate.parse(dateString)
     const shortDate = dayDate.dayOfMonth() === 1 ?
@@ -233,10 +183,12 @@ class DayColumn extends Component {
         )}
 
         <Surface width={config.columnWidth} height={columnHeight}>
-          <ChartLine
+          <TemperatureColumn
-            path={new Path().lineTo(0, chartHeight)}
+            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+            isVerticalLine={this.fhmAndLtl.drawFhmLine}
+            data={this.data && this.data.temperature}
+            columnHeight={columnHeight}
           />
-          { columnElements }
         </Surface>
 
         <View style={{height: xAxisHeight}}>

components/chart/temperature-column.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Group, Path } from 'react-native/Libraries/ART/ReactNativeART'
+
+import ChartLine from './chart-line'
+import DotAndLine from './dot-and-line'
+
+import styles from './styles'
+import config from '../../config'
+
+const TemperatureColumn = ({
+  horizontalLinePosition,
+  isVerticalLine,
+  data,
+  columnHeight
+}) => {
+
+  const x = styles.nfpLine.strokeWidth / 2
+
+  return (
+    <Group>
+
+      <ChartLine
+        path={new Path().lineTo(0, columnHeight)}
+      />
+
+      {horizontalLinePosition && <ChartLine
+        path={new Path()
+          .moveTo(0, horizontalLinePosition)
+          .lineTo(config.columnWidth, horizontalLinePosition)
+        }
+        isNfpLine={true}
+        key='ltl'
+      />}
+
+      {isVerticalLine && <ChartLine
+        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+        isNfpLine={true}
+        key='fhm'
+      />}
+
+      {data && data.y && <DotAndLine
+        y={data.y}
+        exclude={data.temperatureExclude}
+        rightY={data.rightY}
+        rightTemperatureExclude={data.rightTemperatureExclude}
+        leftY={data.leftY}
+        leftTemperatureExclude={data.leftTemperatureExclude}
+        key='dotandline'
+      />}
+    </Group>
+  )
+}
+
+TemperatureColumn.propTypes = {
+  horizontalLinePosition: PropTypes.number,
+  isVerticalLine: PropTypes.bool,
+  data: PropTypes.object,
+  columnHeight: PropTypes.number,
+}
+
+export default TemperatureColumn