Make day columns clickable and render temp points in middle of column

chart.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
-import { temperatureDaysSortedByDate } from './db'
+import { temperatureDaysSortedByDate, getOrCreateCycleDay } from './db'
 import range from 'date-range'
 import Svg,{
   G,
@@ -19,27 +19,6 @@ const dateRow = {
   width: right
 }
 
-function makeDayColumn(labelInfo) {
-  return (
-    <G>
-      <Rect
-        x={labelInfo.rightOffset}
-        y={top}
-        width={columnWidth}
-        height={bottom - top - dateRow.height}
-        fill="lightgrey"
-        strokeWidth="1"
-        stroke="grey"
-      />
-      <Text
-        stroke="purple"
-        fontSize="10"
-        x={labelInfo.rightOffset}
-        y={bottom - top - dateRow.height}
-      >{labelInfo.label.split('-')[2]}</Text>
-    </G>
-  )
-}
 
 function getPreviousDays(n) {
   const today = new Date()
@@ -63,9 +42,10 @@ const xAxisDatesWithRightOffset = xAxisDates.map((datestring, columnIndex) => {
   }
 })
 
-function determineCurvePoints(temperatureDaysSortedByDate, xAxisDatesWithRightOffset) {
+function determineCurvePoints() {
   return temperatureDaysSortedByDate.map(cycleDay => {
-    const x = xAxisDatesWithRightOffset.find(tick => tick.label === cycleDay.date).rightOffset
+    const match = xAxisDatesWithRightOffset.find(tick => tick.label === cycleDay.date)
+    const x = match.rightOffset + columnWidth / 2
     const y = normalizeToScale(cycleDay.temperature.value)
     return [x,y].join()
   }).join(' ')
@@ -81,7 +61,40 @@ function normalizeToScale(temp) {
   return scaleHeight * tempInScaleDecs
 }
 
+
 export default class SvgExample extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  passDateToDayView(dateString) {
+    const cycleDay = getOrCreateCycleDay(dateString)
+    this.props.navigation.navigate('cycleDay', { cycleDay })
+  }
+
+  makeDayColumn(labelInfo) {
+    return (
+      <G>
+        <Rect
+          x={labelInfo.rightOffset}
+          y={top}
+          width={columnWidth}
+          height={bottom - top - dateRow.height}
+          fill="lightgrey"
+          strokeWidth="1"
+          stroke="grey"
+          onPress={() => this.passDateToDayView(labelInfo.label)}
+        />
+        <Text
+          stroke="purple"
+          fontSize="10"
+          x={labelInfo.rightOffset}
+          y={bottom - top - dateRow.height}
+        >{labelInfo.label.split('-')[2]}</Text>
+      </G>
+    )
+  }
+
   render() {
     return (
       <ScrollView horizontal={true}>
@@ -89,9 +102,9 @@ export default class SvgExample extends Component {
           height="350"
           width="2000"
         >
-          {xAxisDatesWithRightOffset.map(makeDayColumn)}
+          { xAxisDatesWithRightOffset.map(this.makeDayColumn.bind(this)) }
           <Polyline
-            points={determineCurvePoints(temperatureDaysSortedByDate, xAxisDatesWithRightOffset)}
+            points={determineCurvePoints()}
             fill="none"
             stroke="black"
             strokeWidth="2"

db.js

@@ -94,6 +94,7 @@ export {
   saveBleeding,
   getOrCreateCycleDay,
   bleedingDaysSortedByDate,
+  temperatureDaysSortedByDate,
   getCycleDaysSortedByDateView,
   deleteAll,
   getPreviousTemperature