Introduces ChartLegend component

components/chart/chart-legend.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import AppText from '../app-text'
+import DripHomeIcon from '../../assets/drip-home-icons'
+
+import styles from './styles'
+import { cycleDayColor } from '../../styles'
+
+import { shared as labels } from '../../i18n/en/labels'
+
+const ChartLegend = () => {
+  return (
+    <View style={[styles.yAxis, styles.chartLegend]}>
+      <DripHomeIcon
+        name="circle"
+        size={styles.yAxis.width - 7}
+        color={cycleDayColor}
+      />
+      <AppText style={styles.yAxisLabels.dateLabel}>
+        {labels.date.toLowerCase()}
+      </AppText>
+    </View>
+  )
+}
+
+export default ChartLegend

components/chart/styles.js

@@ -131,6 +131,10 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  chartLegend: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   horizontalGrid: {
     position:'absolute',
     borderStyle: 'solid',

components/chart/y-axis.js

@@ -6,13 +6,10 @@ import config from '../../config'
 import { scaleObservable, unitObservable } from '../../local-storage'
 
 import AppText from '../app-text'
-import DripHomeIcon from '../../assets/drip-home-icons'
 import SymptomIcon from './symptom-icon'
+import ChartLegend from './chart-legend'
 
 import styles from './styles'
-import { cycleDayColor } from '../../styles'
-
-import { shared as labels } from '../../i18n/en/labels'
 
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value
@@ -99,16 +96,7 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
         })}
       </View>
       <View style={[styles.yAxis, { height }]}>{makeYAxisLabels(height)}</View>
-      <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
+      <ChartLegend />
-        <DripHomeIcon
-          name="circle"
-          size={styles.yAxis.width - 7}
-          color={cycleDayColor}
-        />
-        <AppText style={[styles.yAxisLabels.dateLabel]}>
-          {labels.date.toLowerCase()}
-        </AppText>
-      </View>
     </View>
   )
 }