Merge branch '207-expand-y-axis' into 'master'

expands y-axis, adds some color and formating

Closes #207

See merge request bloodyhealth/drip!85

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) {
@@ -111,7 +112,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 &&
@@ -144,20 +145,33 @@ 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, {
+            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
-              height: this.columnHeight,
+              {this.symptomRowSymptoms.map(symptomName => {
-              marginTop: this.symptomRowHeight
+                return <View key={symptomName} style={{flex: 1}}>
-            }]}
+                  <AppText>{symptomName[0]}</AppText>
-          >
+                </View>
-            {makeYAxisLabels(this.columnHeight)}
+              })}
+            </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, styles.yAxisLabels.cycleDayLabel]}>
+                {labels.cycleDayWithLinebreak}
+              </AppText>
+              <AppText style={[styles.column.label.date,styles.yAxisLabels.dateLabel]}>
+                {labels.date}
+              </AppText>
+            </View>
           </View>}
 
+
         {this.state.chartHeight && this.state.chartLoaded &&
           makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
         }

components/chart/day-column.js

@@ -3,7 +3,8 @@ 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 { LocalDate } from 'js-joda'
+import moment from 'moment'
 import styles from './styles'
 import config from '../../config'
 import { getOrCreateCycleDay } from '../../db'
@@ -88,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>
     )
@@ -116,10 +122,9 @@ export default class DayColumn extends Component {
           symptomHeight={symptomHeight}
           key='bleeding'
         >
-          <Icon
+          <View
-            name='drop'
+            {...styles.symptomIcon}
-            size={12}
+            backgroundColor={styles.iconShades.bleeding[this.props.bleeding]}
-            color={styles.bleedingIconShades[this.props.bleeding]}
           />
         </SymptomIconView>
       ),
@@ -130,8 +135,8 @@ export default class DayColumn extends Component {
           key='mucus'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor={styles.mucusIconShades[this.props.mucus]}
+            backgroundColor={styles.iconShades.mucus[this.props.mucus]}
           />
         </SymptomIconView>
       ),
@@ -142,9 +147,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[2] : styles.iconShades.cervix[0]}
           />
         </SymptomIconView>
       ),
@@ -155,8 +160,8 @@ export default class DayColumn extends Component {
           key='sex'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='orange'
+            backgroundColor={styles.iconShades.sex[this.props.sex - 1]}
           />
         </SymptomIconView>
       ),
@@ -167,8 +172,8 @@ export default class DayColumn extends Component {
           key='desire'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='red'
+            backgroundColor={styles.iconShades.desire[this.props.desire]}
           />
         </SymptomIconView>
       ),
@@ -179,8 +184,8 @@ export default class DayColumn extends Component {
           key='pain'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='blue'
+            backgroundColor={styles.iconShades.pain}
           />
         </SymptomIconView>
       ),
@@ -191,8 +196,8 @@ export default class DayColumn extends Component {
           key='note'
         >
           <View
-            {...styles.mucusIcon}
+            {...styles.symptomIcon}
-            backgroundColor='green'
+            backgroundColor={styles.iconShades.note}
           />
         </SymptomIconView>
       )

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: {
@@ -32,10 +33,11 @@ const styles = {
         color: 'grey',
         fontSize: 9,
         fontWeight: '100',
+        textAlign: 'center',
       },
       number: {
         color: primaryColor,
-        fontSize: 13,
+        fontSize: numberLabelFontSize,
         textAlign: 'center',
       }
     },
@@ -48,37 +50,62 @@ const styles = {
       fill: 'transparent'
     }
   },
-  bleedingIcon: {
+  symptomIcon: {
-    fill: '#fb2e01',
-    scale: 0.6,
-    x: 6,
-    y: 3
-  },
-  bleedingIconShades: shadesOfRed,
-  mucusIcon: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
-  mucusIconShades: [
+  iconShades: {
-    '#fef0e4',
+    'bleeding': shadesOfRed,
-    '#fee1ca',
+    'mucus': [
-    '#fed2af',
+      '#e3e7ed',
-    '#fec395',
+      '#c8cfdc',
-    '#feb47b'
+      '#acb8cb',
-  ],
+      '#91a0ba',
+      '#7689a9'
+    ],
+    'cervix': [
+      '#f0e19d',
+      '#e9d26d',
+      '#e2c33c',
+      '#dbb40c',
+    ],
+    'sex': [
+      '#a87ca2',
+      '#8b5083',
+      '#6f2565',
+    ],
+    'desire': [
+      '#c485a6',
+      '#b15c89',
+      '#9e346c',
+    ],
+    'pain': ['#bccd67'],
+    'note': ['#6CA299']
+  },
   yAxis: {
     width: 27,
-    borderRightWidth: 0.5,
+    borderRightWidth: 1,
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
-  yAxisLabel: {
+  yAxisLabels: {
-    position: 'absolute',
+    tempScale: {
-    left: 3,
+      position: 'absolute',
-    color: 'grey',
+      right: 2,
-    fontSize: 11,
+      color: 'grey',
-    textAlign: 'left'
+      fontSize: 9,
+      textAlign: 'left'
+    },
+    cycleDayLabel: {
+      textAlign: 'center',
+      justifyContent: 'center',
+      fontSize: Math.ceil(numberLabelFontSize / 2)
+    },
+    dateLabel: {
+      textAlign: 'center',
+      justifyContent: 'center'
+    }
   },
   horizontalGrid: {
     position:'absolute',

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
@@ -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

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 = {

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