From e973c8a3e40c085e73ee51ad1935ffa6f60513eb Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 26 Jun 2018 21:41:04 +0200
Subject: [PATCH] Add horizontal grid

---
 components/chart.js  | 21 ++++++++++++++++++++-
 components/styles.js |  4 ++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/chart.js b/components/chart.js
index d13ca87..dfbb63d 100644
--- a/components/chart.js
+++ b/components/chart.js
@@ -44,6 +44,21 @@ export default class CycleChart extends Component {
     this.props.navigation.navigate('cycleDay', { cycleDay })
   }
 
+  placeHorizontalGrid() {
+    return yAxis.tickPositions.map(tick => {
+      return (
+        <Line
+          x1={0}
+          y1={tick}
+          x2={config.columnWidth}
+          y2={tick}
+          {...styles.horizontalGrid}
+          key={tick}
+        />
+      )
+    })
+  }
+
   makeDayColumn({ dateString, cycleDay, y }, index) {
     const cycleDayNumber = getCycleDayNumber(dateString)
     const label = styles.column.label
@@ -52,6 +67,7 @@ export default class CycleChart extends Component {
     return (
       <G onPress={() => this.passDateToDayView(dateString)}>
         <Rect {...styles.column.rect} />
+        {this.placeHorizontalGrid()}
         <Text {...label.number} y={config.cycleDayNumberRowY}>{cycleDayNumber}</Text>
         <Text {...label.date} y={config.dateRowY}>{dateLabel}</Text>
 
@@ -183,7 +199,10 @@ function makeYAxis() {
   for (let i = 0; i < numberOfTicks; i++) {
     const y = tickDistance * i
     const style = styles.yAxisLabel
-    style.top = y
+    // this eyeballing is sadly necessary because RN does not
+    // support percentag values for transforms, which we'd need
+    // to reliably place the label vertically centered to the grid
+    style.top = y - 8
     labels.push(
       <ReactNativeText
         style={{...style}}
diff --git a/components/styles.js b/components/styles.js
index f570d37..5c34537 100644
--- a/components/styles.js
+++ b/components/styles.js
@@ -57,6 +57,10 @@ const styles = {
     color: 'grey',
     fontSize: 12,
     fontWeight: 'bold'
+  },
+  horizontalGrid: {
+    stroke: 'lightgrey',
+    strokeWidth: 1
   }
 }