adds icons to chart

components/chart/chart.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
+import Svg, { G } from 'react-native-svg'
 import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
@@ -11,6 +12,13 @@ import { scaleObservable } from '../../local-storage'
 import config from '../../config'
 import { AppText } from '../app-text'
 import { shared as labels } from '../labels'
+import BleedingIcon from '../../assets/bleeding'
+import CervixIcon from '../../assets/cervix'
+import DesireIcon from '../../assets/desire'
+import MucusIcon from '../../assets/mucus'
+import NoteIcon from '../../assets/note'
+import PainIcon from '../../assets/pain'
+import SexIcon from '../../assets/sex'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -153,8 +161,20 @@ export default class CycleChart extends Component {
           <View>
             <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
               {this.symptomRowSymptoms.map(symptomName => {
-                return <View key={symptomName} style={{flex: 1}}>
-                  <AppText>{symptomName[0]}</AppText>
+                return <View
+                  style={{ alignItems: 'center', justifyContent: 'center' }}
+                  key={symptomName}
+                  width={styles.yAxis.width}
+                  height={this.symptomRowHeight / this.symptomRowSymptoms.length}
+                >
+                  <Svg
+                    width={styles.yAxis.width * 0.8} height={this.symptomRowHeight / this.symptomRowSymptoms.length * 0.8}
+                    viewBox={symptomIcons[symptomName].viewBox}
+                  >
+                    <G fill={symptomIcons[symptomName].color}>
+                      {symptomIcons[symptomName].icon}
+                    </G>
+                  </Svg>
                 </View>
               })}
             </View>
@@ -225,3 +245,41 @@ function getInfoForNeighborColumns(index, cols) {
   }
   return ret
 }
+
+const symptomIcons = {
+  'bleeding': {
+    'viewBox': '10 10 320 400',
+    'color': styles.iconShades.bleeding[3],
+    'icon': <BleedingIcon strokeWidth={'5'}/>
+  },
+  'mucus': {
+    'viewBox': '10 10 320 400',
+    'color': styles.iconShades.mucus[4],
+    'icon': <MucusIcon/>
+  },
+  'cervix': {
+    'viewBox': '10 10 320 440',
+    'color': styles.iconShades.cervix[3],
+    'icon': <CervixIcon/>
+  },
+  'desire': {
+    'viewBox': '10 10 320 380',
+    'color': styles.iconShades.desire[2],
+    'icon': <DesireIcon/>
+  },
+  'sex': {
+    'viewBox': '10 10 320 400',
+    'color': styles.iconShades.sex[2],
+    'icon': <SexIcon/>
+  },
+  'pain': {
+    'viewBox': '10 10 300 400',
+    'color': styles.iconShades.pain[0],
+    'icon': <PainIcon/>
+  },
+  'note': {
+    'viewBox': '10 10 270 400',
+    'color': styles.iconShades.note[0],
+    'icon': <NoteIcon/>
+  },
+}