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

expands y-axis, adds some color and formating Closes #207 See merge request bloodyhealth/drip!85
2018-09-26 09:13:58 +00:00
parent d30afd5514 cdef99d616
commit 57989aac8a
6 changed files with 110 additions and 56 deletions
@@ -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
-            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, 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)
        }
@@ -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
-            name='drop'
-            size={12}
-            color={styles.bleedingIconShades[this.props.bleeding]}
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.bleeding[this.props.bleeding]}
          />
        </SymptomIconView>
      ),
@@ -130,8 +135,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 +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}
-            backgroundColor='orange'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.sex[this.props.sex - 1]}
          />
        </SymptomIconView>
      ),
@@ -167,8 +172,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 +184,8 @@ export default class DayColumn extends Component {
          key='pain'
        >
          <View
-            {...styles.mucusIcon}
-            backgroundColor='blue'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.pain}
          />
        </SymptomIconView>
      ),
@@ -191,8 +196,8 @@ export default class DayColumn extends Component {
          key='note'
        >
          <View
-            {...styles.mucusIcon}
-            backgroundColor='green'
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.note}
          />
        </SymptomIconView>
      )
@@ -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: {
-    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': [
+      '#e3e7ed',
+      '#c8cfdc',
+      '#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: {
-    position: 'absolute',
-    left: 3,
-    color: 'grey',
-    fontSize: 11,
-    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',
@@ -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
@@ -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 = {
@@ -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