extends y-axis with placeholders for symptom symbols and date labels

components/chart/chart.js

@@ -137,6 +137,7 @@ export default class CycleChart extends Component {
   }
 
   render() {
+    console.log(this.symptomRowSymptoms)
     return (
       <View
         onLayout={this.onLayout}
@@ -149,15 +150,54 @@ export default class CycleChart extends Component {
         }
 
         {this.state.chartHeight && this.state.chartLoaded &&
+          <View>
+            <View
+              style={[
+                styles.yAxis,
+                {
+                  height: this.symptomRowHeight,
+                }
+              ]}
+            >
+              {this.symptomRowSymptoms.map(symptomName => {
+                return <View key={symptomName} style={{flex: 1}}>
+                  <AppText>{symptomName[0]}</AppText>
+                </View>
+              })
+              }
+            </View>
             <View
               style={[styles.yAxis, {
                 height: this.columnHeight,
-              marginTop: this.symptomRowHeight
               }]}
             >
               {makeYAxisLabels(this.columnHeight)}
+            </View>
+            <View style={[
+              styles.yAxis,
+              {
+                height: this.xAxisHeight
+              }
+            ]}>
+              <AppText style = {[
+                styles.column.label.number,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center',
+                  fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
+                }
+              ]}>{'Cycle\nday'}</AppText>
+              <AppText style={[
+                styles.column.label.date,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center'
+                }
+              ]}>{'Date'}</AppText>
+            </View>
           </View>}
 
+
         {this.state.chartHeight && this.state.chartLoaded &&
           makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
         }

components/chart/styles.js

@@ -69,15 +69,15 @@ const styles = {
   ],
   yAxis: {
     width: 27,
-    borderRightWidth: 0.5,
+    borderRightWidth: 1,
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
   yAxisLabel: {
     position: 'absolute',
-    left: 3,
+    right: 2,
     color: 'grey',
-    fontSize: 11,
+    fontSize: 9,
     textAlign: 'left'
   },
   horizontalGrid: {

components/chart/y-axis.js

@@ -17,10 +17,10 @@ export function makeYAxisLabels(columnHeight) {
     let tickBold
     if (units === 0.1) {
       showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
     } else {
       showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
     }
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need