From 2977a552dca375557fa04c9e5ffb48665c41ec89 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Sun, 23 Sep 2018 14:59:40 +0200
Subject: [PATCH 1/4] extends y-axis with placeholders for symptom symbols and
 date labels

---
 components/chart/chart.js  | 54 +++++++++++++++++++++++++++++++++-----
 components/chart/styles.js |  6 ++---
 components/chart/y-axis.js |  4 +--
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/components/chart/chart.js b/components/chart/chart.js
index 201f0f8..cc03963 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -137,6 +137,7 @@ export default class CycleChart extends Component {
   }
 
   render() {
+    console.log(this.symptomRowSymptoms)
     return (
       <View
         onLayout={this.onLayout}
@@ -149,15 +150,54 @@ export default class CycleChart extends Component {
         }
 
         {this.state.chartHeight && this.state.chartLoaded &&
-          <View
-            style={[styles.yAxis, {
-              height: this.columnHeight,
-              marginTop: this.symptomRowHeight
-            }]}
-          >
-            {makeYAxisLabels(this.columnHeight)}
+          <View>
+            <View
+              style={[
+                styles.yAxis,
+                {
+                  height: this.symptomRowHeight,
+                }
+              ]}
+            >
+              {this.symptomRowSymptoms.map(symptomName => {
+                return <View key={symptomName} style={{flex: 1}}>
+                  <AppText>{symptomName[0]}</AppText>
+                </View>
+              })
+              }
+            </View>
+            <View
+              style={[styles.yAxis, {
+                height: this.columnHeight,
+              }]}
+            >
+              {makeYAxisLabels(this.columnHeight)}
+            </View>
+            <View style={[
+              styles.yAxis,
+              {
+                height: this.xAxisHeight
+              }
+            ]}>
+              <AppText style = {[
+                styles.column.label.number,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center',
+                  fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
+                }
+              ]}>{'Cycle\nday'}</AppText>
+              <AppText style={[
+                styles.column.label.date,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center'
+                }
+              ]}>{'Date'}</AppText>
+            </View>
           </View>}
 
+
         {this.state.chartHeight && this.state.chartLoaded &&
           makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
         }
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 8441f9b..9d5901a 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -69,15 +69,15 @@ const styles = {
   ],
   yAxis: {
     width: 27,
-    borderRightWidth: 0.5,
+    borderRightWidth: 1,
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
   yAxisLabel: {
     position: 'absolute',
-    left: 3,
+    right: 2,
     color: 'grey',
-    fontSize: 11,
+    fontSize: 9,
     textAlign: 'left'
   },
   horizontalGrid: {
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 12fa08c..3ede6c6 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -17,10 +17,10 @@ export function makeYAxisLabels(columnHeight) {
     let tickBold
     if (units === 0.1) {
       showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
     } else {
       showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
     }
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need

From 501454919b7cf379311335783ed7a574413200c5 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Sun, 23 Sep 2018 18:31:28 +0200
Subject: [PATCH 2/4] adds colors for symptoms

---
 components/chart/chart.js      |  2 +-
 components/chart/day-column.js | 32 ++++++++++++-------------
 components/chart/styles.js     | 44 ++++++++++++++++++++++------------
 styles/index.js                |  7 +++++-
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/components/chart/chart.js b/components/chart/chart.js
index cc03963..ce5a9e5 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -111,7 +111,7 @@ export default class CycleChart extends Component {
             (cycleDay.cervix.opening + cycleDay.cervix.firmness)
         } else if (symptom === 'sex') {
           // solo = 1 + partner = 2
-          acc.sex = cycleDay.sex && (cycleDay.sex.solo + cycleDay.sex.partner)
+          acc.sex = cycleDay.sex && (cycleDay.sex.solo + 2 * cycleDay.sex.partner)
         } else if (symptom === 'pain') {
           // is any pain documented?
           acc.pain = cycleDay.pain &&
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index f2ed95b..30f8cdc 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -3,7 +3,6 @@ import {
   Text, View, TouchableOpacity
 } from 'react-native'
 import Svg,{ G, Rect, Line } from 'react-native-svg'
-import Icon from 'react-native-vector-icons/Entypo'
 import styles from './styles'
 import config from '../../config'
 import { getOrCreateCycleDay } from '../../db'
@@ -116,10 +115,9 @@ export default class DayColumn extends Component {
           symptomHeight={symptomHeight}
           key='bleeding'
         >
-          <Icon
-            name='drop'
-            size={12}
-            color={styles.bleedingIconShades[this.props.bleeding]}
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.bleeding[this.props.bleeding]}
           />
         </SymptomIconView>
       ),
@@ -130,8 +128,8 @@ export default class DayColumn extends Component {
           key='mucus'
         >
           <View
-            {...styles.mucusIcon}
-            backgroundColor={styles.mucusIconShades[this.props.mucus]}
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.mucus[this.props.mucus]}
           />
         </SymptomIconView>
       ),
@@ -142,9 +140,9 @@ export default class DayColumn extends Component {
           key='cervix'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
             // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-            backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'}
+            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]}
           />
         </SymptomIconView>
       ),
@@ -155,8 +153,8 @@ export default class DayColumn extends Component {
           key='sex'
         >
           <View
-            {...styles.mucusIcon}
-            backgroundColor='orange'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.sex[this.props.sex - 1]}
           />
         </SymptomIconView>
       ),
@@ -167,8 +165,8 @@ export default class DayColumn extends Component {
           key='desire'
         >
           <View
-            {...styles.mucusIcon}
-            backgroundColor='red'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.desire[this.props.desire]}
           />
         </SymptomIconView>
       ),
@@ -179,8 +177,8 @@ export default class DayColumn extends Component {
           key='pain'
         >
           <View
-            {...styles.mucusIcon}
-            backgroundColor='blue'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.pain}
           />
         </SymptomIconView>
       ),
@@ -191,8 +189,8 @@ export default class DayColumn extends Component {
           key='note'
         >
           <View
-            {...styles.mucusIcon}
-            backgroundColor='green'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.note}
           />
         </SymptomIconView>
       )
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 9d5901a..bdf0211 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -48,25 +48,39 @@ const styles = {
       fill: 'transparent'
     }
   },
-  bleedingIcon: {
-    fill: '#fb2e01',
-    scale: 0.6,
-    x: 6,
-    y: 3
-  },
-  bleedingIconShades: shadesOfRed,
-  mucusIcon: {
+  symptomIcon: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
-  mucusIconShades: [
-    '#fef0e4',
-    '#fee1ca',
-    '#fed2af',
-    '#fec395',
-    '#feb47b'
-  ],
+  iconShades: {
+    'bleeding': shadesOfRed,
+    'mucus': [
+      '#e8f6a4',
+      '#bccd67',
+      '#91a437',
+      '#6a7b15',
+      '#445200',
+    ],
+    'cervix': [
+      '#f0e19d',
+      '#e9d26d',
+      '#e2c33c',
+      '#dbb40c',
+    ],
+    'sex': [
+      '#A66FA6',
+      '#8A458A',
+      '#6f2565',
+    ],
+    'desire': [
+      '#68113f',
+      '#8b2e5f',
+      '#ad5784',
+    ],
+    'pain': ['#7689A9'],
+    'note': ['#6CA299']
+  },
   yAxis: {
     width: 27,
     borderRightWidth: 1,
diff --git a/styles/index.js b/styles/index.js
index ee63b83..28b6ff0 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -4,7 +4,12 @@ export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
 export const secondaryColorLight = '#91749d'
 export const fontOnPrimaryColor = 'white'
-export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
+export const shadesOfRed = [
+  '#e7999e',
+  '#db666d',
+  '#cf323d',
+  '#c3000d'
+] // light to dark
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10

From 545c334654ab5f518feb5a46f97c492c75715086 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Sun, 23 Sep 2018 19:54:55 +0200
Subject: [PATCH 3/4] formats dates

---
 components/chart/day-column.js | 11 +++++++++--
 components/chart/styles.js     |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 30f8cdc..a5fe820 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -3,6 +3,8 @@ import {
   Text, View, TouchableOpacity
 } from 'react-native'
 import Svg,{ G, Rect, Line } from 'react-native-svg'
+import { LocalDate } from 'js-joda'
+import moment from 'moment'
 import styles from './styles'
 import config from '../../config'
 import { getOrCreateCycleDay } from '../../db'
@@ -87,13 +89,18 @@ export default class DayColumn extends Component {
     }
 
     const cycleDayNumber = this.getCycleDayNumber(dateString)
-    const shortDate = dateString.split('-').slice(1).join('-')
+    const dayDate = LocalDate.parse(dateString)
+    const shortDate = dayDate.dayOfMonth() === 1 ?
+      moment(dateString, "YYYY-MM-DD").format('MMM')
+      :
+      moment(dateString, "YYYY-MM-DD").format('Do')
+    const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
     const cycleDayLabel = (
       <Text style = {label.number}>
         {cycleDayNumber ? cycleDayNumber : ' '}
       </Text>)
     const dateLabel = (
-      <Text style = {label.date}>
+      <Text style = {[label.date, boldDateLabel]}>
         {shortDate}
       </Text>
     )
diff --git a/components/chart/styles.js b/components/chart/styles.js
index bdf0211..ef8d0ac 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -32,6 +32,7 @@ const styles = {
         color: 'grey',
         fontSize: 9,
         fontWeight: '100',
+        textAlign: 'center',
       },
       number: {
         color: primaryColor,

From cdef99d616b863f0e70ba7f31ed1ce2873bd7919 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 26 Sep 2018 11:02:40 +0200
Subject: [PATCH 4/4] little improvements after review

---
 components/chart/chart.js      | 50 ++++++++--------------------------
 components/chart/day-column.js |  2 +-
 components/chart/styles.js     | 48 ++++++++++++++++++++------------
 components/chart/y-axis.js     |  2 +-
 components/labels.js           |  5 +++-
 5 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/components/chart/chart.js b/components/chart/chart.js
index ce5a9e5..ccffbba 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -10,6 +10,7 @@ import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
 import { AppText } from '../app-text'
+import { shared as labels } from '../labels'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -137,7 +138,6 @@ export default class CycleChart extends Component {
   }
 
   render() {
-    console.log(this.symptomRowSymptoms)
     return (
       <View
         onLayout={this.onLayout}
@@ -145,55 +145,29 @@ export default class CycleChart extends Component {
       >
         {!this.state.chartLoaded &&
           <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <AppText>Loading...</AppText>
+            <AppText>{labels.loading}</AppText>
           </View>
         }
 
         {this.state.chartHeight && this.state.chartLoaded &&
           <View>
-            <View
-              style={[
-                styles.yAxis,
-                {
-                  height: this.symptomRowHeight,
-                }
-              ]}
-            >
+            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
               {this.symptomRowSymptoms.map(symptomName => {
                 return <View key={symptomName} style={{flex: 1}}>
                   <AppText>{symptomName[0]}</AppText>
                 </View>
-              })
-              }
+              })}
             </View>
-            <View
-              style={[styles.yAxis, {
-                height: this.columnHeight,
-              }]}
-            >
+            <View style={[styles.yAxis, {height: this.columnHeight}]}>
               {makeYAxisLabels(this.columnHeight)}
             </View>
-            <View style={[
-              styles.yAxis,
-              {
-                height: this.xAxisHeight
-              }
-            ]}>
-              <AppText style = {[
-                styles.column.label.number,
-                {
-                  textAlign: 'center',
-                  justifyContent: 'center',
-                  fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
-                }
-              ]}>{'Cycle\nday'}</AppText>
-              <AppText style={[
-                styles.column.label.date,
-                {
-                  textAlign: 'center',
-                  justifyContent: 'center'
-                }
-              ]}>{'Date'}</AppText>
+            <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
+              <AppText style = {[styles.column.label.number, styles.yAxisLabels.cycleDayLabel]}>
+                {labels.cycleDayWithLinebreak}
+              </AppText>
+              <AppText style={[styles.column.label.date,styles.yAxisLabels.dateLabel]}>
+                {labels.date}
+              </AppText>
             </View>
           </View>}
 
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index a5fe820..ec3dd95 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -149,7 +149,7 @@ export default class DayColumn extends Component {
           <View
             {...styles.symptomIcon}
             // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]}
+            backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[2] : styles.iconShades.cervix[0]}
           />
         </SymptomIconView>
       ),
diff --git a/components/chart/styles.js b/components/chart/styles.js
index ef8d0ac..8cc044f 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -8,6 +8,7 @@ const lineWidth = 1.5
 const colorLtl = '#feb47b'
 const gridColor = 'lightgrey'
 const gridLineWidth = 0.5
+const numberLabelFontSize = 13
 
 const styles = {
   curve: {
@@ -36,7 +37,7 @@ const styles = {
       },
       number: {
         color: primaryColor,
-        fontSize: 13,
+        fontSize: numberLabelFontSize,
         textAlign: 'center',
       }
     },
@@ -57,11 +58,11 @@ const styles = {
   iconShades: {
     'bleeding': shadesOfRed,
     'mucus': [
-      '#e8f6a4',
-      '#bccd67',
-      '#91a437',
-      '#6a7b15',
-      '#445200',
+      '#e3e7ed',
+      '#c8cfdc',
+      '#acb8cb',
+      '#91a0ba',
+      '#7689a9'
     ],
     'cervix': [
       '#f0e19d',
@@ -70,16 +71,16 @@ const styles = {
       '#dbb40c',
     ],
     'sex': [
-      '#A66FA6',
-      '#8A458A',
+      '#a87ca2',
+      '#8b5083',
       '#6f2565',
     ],
     'desire': [
-      '#68113f',
-      '#8b2e5f',
-      '#ad5784',
+      '#c485a6',
+      '#b15c89',
+      '#9e346c',
     ],
-    'pain': ['#7689A9'],
+    'pain': ['#bccd67'],
     'note': ['#6CA299']
   },
   yAxis: {
@@ -88,12 +89,23 @@ const styles = {
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
-  yAxisLabel: {
-    position: 'absolute',
-    right: 2,
-    color: 'grey',
-    fontSize: 9,
-    textAlign: 'left'
+  yAxisLabels: {
+    tempScale: {
+      position: 'absolute',
+      right: 2,
+      color: 'grey',
+      fontSize: 9,
+      textAlign: 'left'
+    },
+    cycleDayLabel: {
+      textAlign: 'center',
+      justifyContent: 'center',
+      fontSize: Math.ceil(numberLabelFontSize / 2)
+    },
+    dateLabel: {
+      textAlign: 'center',
+      justifyContent: 'center'
+    }
   },
   horizontalGrid: {
     position:'absolute',
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 3ede6c6..e1e0d6f 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -8,7 +8,7 @@ import { AppText } from '../app-text'
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value
   const scaleMax = scaleObservable.value.max
-  const style = styles.yAxisLabel
+  const style = styles.yAxisLabels.tempScale
 
   return getTickPositions(columnHeight).map((y, i) => {
     const tick = scaleMax - i * units
diff --git a/components/labels.js b/components/labels.js
index 7fde2b8..5ebae60 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -8,7 +8,10 @@ export const shared = {
   incorrectPasswordMessage: 'That password is incorrect.',
   tryAgain: 'Try again',
   ok: 'OK',
-  unlock: 'Unlock'
+  unlock: 'Unlock',
+  date: 'Date',
+  cycleDayWithLinebreak: 'Cycle\nday',
+  loading: 'Loading ...'
 }
 
 export const settings = {