Introduces HorizontalGrid component

components/chart/chart.js

@@ -1,9 +1,12 @@
 import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import { LocalDate } from 'js-joda'
-import YAxis, { makeHorizontalGrid } from './y-axis'
+
+import YAxis from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
+import HorizontalGrid from './horizontal-grid'
+
 import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
@@ -131,8 +134,11 @@ export default class CycleChart extends Component {
           />
         )}
 
-        {chartHeight && chartLoaded &&
+        {chartHeight && chartLoaded && (
-          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
+          <HorizontalGrid
+            height={this.columnHeight}
+            startPosition={this.symptomRowHeight}
+          />)
         }
 
         {chartHeight &&

components/chart/horizontal-grid.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { getTickPositions } from '../helpers/chart'
+
+import styles from './styles'
+
+const HorizontalGrid = ({ height, startPosition }) => {
+  return getTickPositions(height).map(tick => {
+    return (
+      <View
+        top={startPosition + tick}
+        {...styles.horizontalGrid}
+        key={tick}
+      />
+    )
+  })
+}
+
+HorizontalGrid.propTypes = {
+  height: PropTypes.number,
+  startPosition: PropTypes.number,
+}
+
+export default HorizontalGrid

components/chart/y-axis.js

@@ -2,26 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { getTickPositions } from '../helpers/chart'
-
 import SymptomIcon from './symptom-icon'
 import TickList from './tick-list'
 import ChartLegend from './chart-legend'
 
 import styles from './styles'
 
-export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
-  return getTickPositions(columnHeight).map(tick => {
-    return (
-      <View
-        top={tick + symptomRowHeight}
-        {...styles.horizontalGrid}
-        key={tick}
-      />
-    )
-  })
-}
-
 const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
   return (