Handle clicks on day column through trasnparent rectangle

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>
     )