Merge branch 'master' into 73-implement-nfp-logic-for-mucus-mode

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Text as ReactNativeText, View, FlatList } from 'react-native'
+import { Text as ReactNativeText, View, FlatList, ScrollView } from 'react-native'
 import range from 'date-range'
 import Svg,{
   G,
@@ -109,6 +109,13 @@ export default class CycleChart extends Component {
           this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
           : null
         }
+        {cycleDay && cycleDay.mucus ?
+          <Circle
+            {...styles.mucusIcon}
+            fill={styles.mucusIconShades[cycleDay.mucus.value]}
+          /> : null}
+
+        {y ? this.drawDotAndLines(y, cycleDay.temperature.exclude, index) : null}
       </G>
     )
   }
@@ -160,7 +167,7 @@ export default class CycleChart extends Component {
 
   render() {
     return (
-      <View style={{flex: 1, flexDirection: 'row'}}>
+      <ScrollView contentContainerStyle={{flexDirection: 'row'}}>
         <View {...styles.yAxis}>{yAxis.labels}</View>
         <FlatList
           horizontal={true}
@@ -177,7 +184,7 @@ export default class CycleChart extends Component {
           keyExtractor={item => item.dateString}
         >
         </FlatList>
-      </View>
+      </ScrollView>
     )
   }
 }

components/chart/styles.js

@@ -45,9 +45,21 @@ const styles = {
   bleedingIcon: {
     fill: '#fb2e01',
     scale: 0.6,
-    x: 7,
+    x: 6,
     y: 3
   },
+  mucusIcon: {
+    cx: config.columnWidth / 2,
+    cy: 50,
+    r: 10
+  },
+  mucusIconShades: [
+    '#cc99cc',
+    '#bf7fbf',
+    '#b266b2',
+    '#a64ca6',
+    '#993299'
+  ],
   yAxis: {
     height: config.chartHeight,
     width: config.columnWidth,