From c184485c1da49a148f904a7ddd90acfc8aa0523d Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 20 Jul 2018 12:52:10 +0200
Subject: [PATCH] Add mucus icon to chart
---
components/chart/chart.js | 6 ++++++
components/chart/styles.js | 14 +++++++++++++-
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 3d37139f..32983c1c 100644
--- a/components/chart/chart.js
+++ b/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>
)
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 9fa26339..4e06b732 100644
--- a/components/chart/styles.js
+++ b/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,
--
GitLab