Introduces SymptomIcon component

components/chart/day-column.js

@@ -157,7 +157,7 @@ class DayColumn extends Component {
         'white' : symptomColor
       const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0
       const borderColor = symptomColor
-      const styleChild = [styles.symptomIcon, {
+      const styleChild = [styles.symptomDot, {
         backgroundColor,
         borderColor,
         borderWidth

components/chart/styles.js

@@ -61,7 +61,7 @@ const styles = {
       width: gridLineWidthVertical,
     }
   },
-  symptomIcon: {
+  symptomDot: {
     width: 12,
     height: 12,
     borderRadius: 50,
@@ -127,6 +127,10 @@ const styles = {
       fontWeight: '100',
     }
   },
+  symptomIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   horizontalGrid: {
     position:'absolute',
     borderStyle: 'solid',

components/chart/symptom-icon.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import DripIcon from '../../assets/drip-icons'
+
+import styles from './styles'
+
+const SymptomIcon = ({ symptom, height }) => {
+  return (
+    <View style={styles.symptomIcon} width={styles.yAxis.width} height={height}>
+      <DripIcon
+        size={16}
+        name={`drip-icon-${symptom}`}
+        color={styles.iconColors[symptom].color}
+      />
+    </View>
+  )
+}
+
+SymptomIcon.propTypes = {
+  height: PropTypes.number,
+  symptom: PropTypes.string,
+}
+
+export default SymptomIcon

components/chart/y-axis.js

@@ -6,8 +6,8 @@ import config from '../../config'
 import { scaleObservable, unitObservable } from '../../local-storage'
 
 import AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
 import DripHomeIcon from '../../assets/drip-home-icons'
+import SymptomIcon from './symptom-icon'
 
 import styles from './styles'
 import { cycleDayColor } from '../../styles'
@@ -84,18 +84,18 @@ function getAbsoluteValue(relative, columnHeight) {
 }
 
 const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
+  const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
   return (
     <View>
       <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
         {symptomsToDisplay.map(symptom => {
-          return <View
+          return (
-            style={{ alignItems: 'center', justifyContent: 'center' }}
+            <SymptomIcon
-            key={symptom}
+              key={symptom}
-            width={styles.yAxis.width}
+              symptom={symptom}
-            height={symptomsSectionHeight / symptomsToDisplay.length}
+              height={symptomIconHeight}
-          >
+            />
-            <DripIcon size={16} name={`drip-icon-${symptom}`} color={styles.iconColors[symptom].color}/>
+          )
-          </View>
         })}
       </View>
       <View style={[styles.yAxis, { height }]}>{makeYAxisLabels(height)}</View>