Add first version of y axis

components/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { FlatList } from 'react-native'
+import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import Svg,{
   G,
@@ -112,22 +112,49 @@ export default class CycleChart extends Component {
     </G>)
   }
 
+  placeTicksForYAxis() {
+    const scaleMin = config.temperatureScale.low
+    const scaleMax = config.temperatureScale.high
+    const numberOfTicks = (scaleMax - scaleMin) * 2
+    const tickDistance = config.chartHeight / numberOfTicks
+    const ticks = []
+    const labelStyle = styles.column.label.date
+    for (let i = 0; i < numberOfTicks; i++) {
+      const y = tickDistance * i
+      ticks.push(
+        <G key={i}>
+          <Line
+            x1={18} y1={y} x2={22} y2={y}
+            {...styles.yAxis}
+          />
+          <Text {...labelStyle} y={y}>{scaleMax - i * 0.5}</Text>
+        </G>
+      )
+    }
+    return ticks
+  }
+
   render() {
     return (
-      <FlatList
-        horizontal={true}
-        inverted={true}
-        data={this.state.columns}
-        renderItem={({item, index}) => {
-          return (
-            <Svg width={config.columnWidth} height={config.chartLength}>
-              {this.makeDayColumn(item, index)}
-            </Svg>
-          )
-        }}
-        keyExtractor={item => item.dateString}
-      >
-      </FlatList>
+      <View style={{flex: 1, flexDirection: 'row'}}>
+        <Svg {...styles.yAxis}>
+          {this.placeTicksForYAxis()}
+        </Svg>
+        <FlatList
+          horizontal={true}
+          inverted={true}
+          data={this.state.columns}
+          renderItem={({ item, index }) => {
+            return (
+              <Svg width={config.columnWidth} height={config.chartHeight}>
+                {this.makeDayColumn(item, index)}
+              </Svg>
+            )
+          }}
+          keyExtractor={item => item.dateString}
+        >
+        </FlatList>
+      </View>
     )
   }
 }
@@ -163,6 +190,6 @@ function getPreviousDays(n) {
 function normalizeToScale(temp) {
   const temperatureScale = config.temperatureScale
   const valueRelativeToScale = (temperatureScale.high - temp) / (temperatureScale.high - temperatureScale.low)
-  const scaleHeight = config.chartLength
+  const scaleHeight = config.chartHeight
   return scaleHeight * valueRelativeToScale
 }

components/config.js

@@ -1,5 +1,5 @@
 const config = {
-  chartLength: 350,
+  chartHeight: 350,
   columnWidth: 30,
   temperatureScale: {
     low: 33,
@@ -10,7 +10,7 @@ const config = {
 
 const margin = 3
 config.columnMiddle = config.columnWidth / 2,
-config.dateRowY = config.chartLength - 15 - margin
-config.cycleDayNumberRowY = config.chartLength - margin
+config.dateRowY = config.chartHeight - 15 - margin
+config.cycleDayNumberRowY = config.chartHeight - margin
 
 export default config

components/styles.js

@@ -38,7 +38,7 @@ const styles = {
       x: 0,
       y: 0,
       width: config.columnWidth,
-      height: config.chartLength
+      height: config.chartHeight
     }
   },
   bleedingIcon: {
@@ -46,6 +46,11 @@ const styles = {
     scale: 0.6,
     x: 7,
     y: 3
+  },
+  yAxis: {
+    height: config.chartHeight,
+    width: config.columnWidth,
+    stroke: 'grey'
   }
 }