From fd672ad053b1f247473c78c13a124ffa0c947471 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sun, 24 Jun 2018 14:57:31 +0200
Subject: [PATCH] Handle clicks on day column through trasnparent rectangle

---
 components/chart.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/chart.js b/components/chart.js
index a05403c..3539161 100644
--- a/components/chart.js
+++ b/components/chart.js
@@ -78,7 +78,6 @@ export default class CycleChart extends Component {
           fill="lightgrey"
           strokeWidth="1"
           stroke="grey"
-          onPress={() => this.passDateToDayView(columnInfo.label)}
         />
         <Text
           stroke="grey"
@@ -94,6 +93,22 @@ export default class CycleChart extends Component {
     return xAxisTicks.map(this.makeDayColumn.bind(this))
   }
 
+  placeTouchHandlerRectangles() {
+    return this.xAxisTicks.map(columnInfo => {
+      return (
+        <Rect
+          key={columnInfo.label}
+          x={columnInfo.rightOffset}
+          y={top}
+          width={columnWidth}
+          height={bottom - top - dateRow.height}
+          fillOpacity={0}
+          onPress={() => this.passDateToDayView(columnInfo.label)}
+        />
+      )
+    })
+  }
+
   placeBleedingSymbolsOnColumns() {
     return this.state.bleedIconCoordinates.map(x => {
       return (<Circle key={x} cx={x} cy="50" r="7" fill="red" />)
@@ -150,6 +165,10 @@ export default class CycleChart extends Component {
 
           { this.makeTemperatureCurves() }
 
+          {/* we place a trasnparent rectangle over every day column */}
+          {/* so that all elements including the line and circles are clickable */}
+          { this.placeTouchHandlerRectangles() }
+
         </Svg>
       </ScrollView>
     )