Add mucus icon to chart

components/chart/chart.js

@@ -79,6 +79,12 @@ export default class CycleChart extends Component {
               Q13.5 6.8 15 3z" />
           : null}
 
+        {cycleDay && cycleDay.mucus ?
+          <Circle
+            {...styles.mucusIcon}
+            fill={styles.mucusIconShades[cycleDay.mucus.computedNfp]}
+          /> : null}
+
         {y ? this.drawDotAndLines(y, cycleDay.temperature.exclude, index) : null}
       </G>
     )

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,