every symptom has its own row

components/chart/chart.js

@@ -28,7 +28,6 @@ export default class CycleChart extends Component {
 
   onLayout = ({ nativeEvent }) => {
     if (this.state.chartHeight) return
-
     const height = nativeEvent.layout.height
     this.setState({ chartHeight: height })
     this.reCalculateChartInfo = () => {
@@ -61,11 +60,38 @@ export default class CycleChart extends Component {
         jsDate.getDate()
       ).toString()
     })
+    const chartSymptoms = [
+      'bleeding',
+      'temperature',
+      'mucus',
+      'cervix',
+      'sex',
+      'desire',
+      'pain',
+      'note'
+    ].filter((symptomName) => {
+      return cycleDaysSortedByDate.some(cycleDay => cycleDay[symptomName])
+    })
 
     const columns = xAxisDates.map(dateString => {
       const cycleDay = getCycleDay(dateString)
-      const symptoms = ['temperature', 'mucus', 'bleeding'].reduce((acc, symptom) => {
-        acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
+      const symptoms = chartSymptoms.reduce((acc, symptom) => {
+        if (symptom === 'bleeding' ||
+          symptom === 'temperature' ||
+          symptom === 'mucus' ||
+          symptom === 'desire' ||
+          symptom === 'note'
+        ) {
+          acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
+        } else if (symptom === 'cervix') {
+          acc[symptom] = cycleDay && cycleDay['cervix'] && (cycleDay['cervix'].opening + cycleDay['cervix'].firmness)
+        } else if (symptom === 'sex') {
+          // solo = 1 + partner = 2
+          acc[symptom] = cycleDay && cycleDay['sex'] && (cycleDay['sex'].solo + cycleDay['sex'].partner)
+        } else if (symptom === 'pain') {
+          // is any pain documented?
+          acc[symptom] = cycleDay && cycleDay['pain'] && Object.values(cycleDay['pain']).some(x => x === true)
+        }
         acc[`${symptom}Exclude`] = cycleDay && cycleDay[symptom] && cycleDay[symptom].exclude
         return acc
       }, {})
@@ -75,7 +101,7 @@ export default class CycleChart extends Component {
       return {
         dateString,
         y: temp ? normalizeToScale(temp, columnHeight) : null,
-        ...symptoms,
+        symptoms,
         ...getFhmAndLtlInfo(dateString, temp)
       }
     })

components/chart/day-column.js

@@ -27,8 +27,7 @@ export default class DayColumn extends Component {
       dateString,
       y,
       temperatureExclude,
-      bleeding,
-      mucus,
+      symptoms,
       drawFhmLine,
       drawLtlAt,
       rightY,
@@ -108,24 +107,73 @@ export default class DayColumn extends Component {
 
     return (
       <View>
-        <View style={[styles.symptomRow, {height: symptomHeight}]}>
-          {typeof mucus === 'number' &&
-            <View
-              {...styles.mucusIcon}
-              backgroundColor={styles.mucusIconShades[mucus]}
-              key='mucus'
-            />
-          }
-          {typeof bleeding === 'number' &&
-            <Icon
-              name='drop'
-              size={18}
-              color={styles.bleedingIconShades[bleeding]}
-              key='bleeding'
-            />
-          }
+        <View height={symptomHeight}>
+          <View style={styles.symptomRow}>
+            {typeof symptoms.bleeding === 'number' &&
+              <Icon
+                name='drop'
+                size={12}
+                color={styles.bleedingIconShades[symptoms.bleeding]}
+                key='bleeding'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {typeof symptoms.mucus === 'number' &&
+              <View
+                {...styles.mucusIcon}
+                backgroundColor={styles.mucusIconShades[symptoms.mucus]}
+                key='mucus'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {typeof symptoms.cervix === 'number' &&
+              <View
+                {...styles.mucusIcon}
+                // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
+                backgroundColor={symptoms.cervix > 0 ? 'blue' : 'green'}
+                key='cervix'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {typeof symptoms.sex === 'number' &&
+              <View
+                {...styles.mucusIcon}
+                backgroundColor={styles.mucusIconShades[symptoms.mucus]}
+                key='sex'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {typeof symptoms.desire === 'number' &&
+              <View
+                {...styles.mucusIcon}
+                backgroundColor='red'
+                key='desire'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {symptoms.pain &&
+              <View
+                {...styles.mucusIcon}
+                backgroundColor='blue'
+                key='pain'
+              />
+            }
+          </View>
+          <View style={styles.symptomRow}>
+            {symptoms.note &&
+              <View
+                {...styles.mucusIcon}
+                backgroundColor='green'
+                key='note'
+              />
+            }
+          </View>
         </View>
-
         {column}
 
         <View style={{height: xAxisHeight}}>

components/chart/dot-and-line.js

@@ -41,7 +41,7 @@ export default class DotAndLine extends Component {
 
 function makeLine(leftY, rightY, direction, excludeLine) {
   const colWidth = config.columnWidth
-  const heightDiff = -leftY - -rightY
+  const heightDiff = -(leftY - rightY)
   const angle = Math.atan2(heightDiff, colWidth / 2)
   const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
   // hypotenuse, we add 3px for good measure, because otherwise the lines

components/chart/styles.js

@@ -46,8 +46,7 @@ const styles = {
     rect: {
       width: config.columnWidth,
       borderStyle: 'solid',
-      borderLeftWidth: 0.5,
-      borderRightWidth: 0.5,
+      borderRightWidth: 0.25,
     }
   },
   bleedingIcon: {
@@ -85,7 +84,7 @@ const styles = {
   horizontalGrid: {
     position:'absolute',
     borderColor: 'lightgrey',
-    borderWidth: 0.5,
+    borderTopWidth: 0.25,
     width: '100%',
     borderStyle: 'solid',
     left: config.columnWidth
@@ -97,7 +96,9 @@ const styles = {
   },
   symptomRow: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    width: '100%',
+    flex: 1
   }
 }
 

components/chart/y-axis.js

@@ -2,34 +2,20 @@ import React from 'react'
 import { Text, View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
-import { scaleObservable } from '../../local-storage'
+import { scaleObservable, unitObservable } from '../../local-storage'
 
 export function makeYAxisLabels(columnHeight) {
-  const units = config.temperatureScale.units
+  const units = unitObservable.value
   const scaleMax = scaleObservable.value.max
-  const scaleMin = scaleObservable.value.min
   const style = styles.yAxisLabel
 
   return getTickPositions(columnHeight).map((y, i) => {
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need
     // to reliably place the label vertically centered to the grid
-    let tickLabelDistance
-    let tickUnit
-    if (scaleMax - scaleMin <= 3) {
-      tickLabelDistance = 2
-      tickUnit = 1
-    } else if (scaleMax - scaleMin <= 5) {
-      tickLabelDistance = 2
-      tickUnit = 2
-    } else {
-      tickLabelDistance = 5
-      tickUnit = 5
-    }
-    if (scaleMax - i * tickUnit * units === 37) console.log(y)
-    const tick = scaleMax - i * tickUnit * units
+    const tick = scaleMax - i * units
     const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
-    const showTick =  tick * 10 % tickLabelDistance ? false : true
+    const showTick =  (tick * 10 % 2) ? false : true
     const tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
     return (
       <Text
@@ -54,19 +40,11 @@ export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
 }
 
 function getTickPositions(columnHeight) {
-  const units = config.temperatureScale.units
+  const units = unitObservable.value
   const scaleMin = scaleObservable.value.min
   const scaleMax = scaleObservable.value.max
   const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
-  let tickDistance
-  if (numberOfTicks <= 31) {
-    tickDistance = 1 / (numberOfTicks - 1)
-  } else if (numberOfTicks <= 51) {
-    tickDistance = 2 / (numberOfTicks - 1)
-  } else {
-    tickDistance = 5 / (numberOfTicks - 1)
-  }
-
+  const tickDistance = 1 / (numberOfTicks - 1)
   const tickPositions = []
   for (let i = 0; i < numberOfTicks; i++) {
     const position = getAbsoluteValue(tickDistance * i, columnHeight)
@@ -86,5 +64,4 @@ function getAbsoluteValue(relative, columnHeight) {
   const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
   const scaleHeight = columnHeight - 2 * verticalPadding
   return scaleHeight * relative + verticalPadding
-
 }

config.js

@@ -1,8 +1,8 @@
 const config = {
   columnWidth: 25,
-  columnHeightPercentage: 0.84,
+  columnHeightPercentage: 0.62,
   xAxisHeightPercentage: 0.08,
-  symptomRowHeightPercentage: 0.08,
+  symptomRowHeightPercentage: 0.30,
   temperatureScale: {
     defaultLow: 35,
     defaultHigh: 38,

local-storage/index.js

@@ -8,6 +8,20 @@ setObvWithInitValue('tempScale', scaleObservable, {
   max: config.temperatureScale.defaultHigh
 })
 
+export const unitObservable = Observable()
+unitObservable.set(config.temperatureScale.units)
+scaleObservable((scale) => {
+  const scaleRange = scale.max - scale.min
+  if (scaleRange <= 3) {
+    unitObservable.set(0.1)
+  } else if (scaleRange <= 5) {
+    unitObservable.set(0.2)
+  } else {
+    unitObservable.set(0.5)
+  }
+})
+
+
 export const tempReminderObservable = Observable()
 setObvWithInitValue('tempReminder', tempReminderObservable, {
   enabled: false