Determine heights of chart areas in chart and pass them to children

components/chart/chart.js

@@ -21,7 +21,10 @@ export default class CycleChart extends Component {
           {...item}
           index={index}
           navigate={this.props.navigate}
+          symptomHeight={this.symptomHeight}
+          columnHeight={this.columnHeight}
           chartHeight={this.state.chartHeight}
+          symptomRowSymptoms={this.symptomRowSymptoms}
         />
       )
     }
@@ -33,7 +36,34 @@ export default class CycleChart extends Component {
     const height = nativeEvent.layout.height
     this.setState({ chartHeight: height })
     this.reCalculateChartInfo = () => {
-      this.setState({ columns: this.makeColumnInfo(nfpLines()) })
+      // how many symptoms need to be displayed on the chart's upper symptom row?
+      this.symptomRowSymptoms = [
+        'bleeding',
+        'mucus',
+        'cervix',
+        'sex',
+        'desire',
+        'pain',
+        'note'
+      ].filter((symptomName) => {
+        return this.cycleDaysSortedByDate.some(cycleDay => {
+          return cycleDay[symptomName]
+        })
+      })
+
+      this.xAxisHeight = this.state.chartHeight * config.xAxisHeightPercentage
+      const remainingHeight = this.state.chartHeight - this.xAxisHeight
+      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
+      this.symptomRowHeight = this.symptomRowSymptoms.length * this.symptomHeight
+      this.columnHeight = remainingHeight - this.symptomRowHeight
+
+      const chartSymptoms = [...this.symptomRowSymptoms]
+      if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+        chartSymptoms.push('temperature')
+      }
+
+      const columnData = this.makeColumnInfo(nfpLines(), chartSymptoms)
+      this.setState({ columns: columnData })
     }
 
     this.cycleDaysSortedByDate.addListener(this.reCalculateChartInfo)
@@ -45,7 +75,7 @@ export default class CycleChart extends Component {
     this.removeObvListener()
   }
 
-  makeColumnInfo(getFhmAndLtlInfo) {
+  makeColumnInfo(getFhmAndLtlInfo, chartSymptoms) {
     let amountOfCycleDays = getAmountOfCycleDays()
     // if there's not much data yet, we want to show at least 30 days on the chart
     if (amountOfCycleDays < 30) {
@@ -63,21 +93,11 @@ export default class CycleChart extends Component {
       ).toString()
     })
 
-    const chartSymptoms = [
-      'bleeding',
-      'temperature',
-      'mucus',
-      'cervix',
-      'sex',
-      'desire',
-      'pain',
-      'note'
-    ].filter((symptomName) => {
-      return this.cycleDaysSortedByDate.some(cycleDay => cycleDay[symptomName])
-    })
-
     const columns = xAxisDates.map(dateString => {
+      const column = { dateString }
       const cycleDay = getCycleDay(dateString)
+      if (!cycleDay) return column
+
       const symptoms = chartSymptoms.reduce((acc, symptom) => {
         if (symptom === 'bleeding' ||
           symptom === 'temperature' ||
@@ -85,28 +105,29 @@ export default class CycleChart extends Component {
           symptom === 'desire' ||
           symptom === 'note'
         ) {
-          acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
+          acc[symptom] = cycleDay[symptom] && cycleDay[symptom].value
         } else if (symptom === 'cervix') {
-          acc[symptom] = cycleDay && cycleDay['cervix'] && (cycleDay['cervix'].opening + cycleDay['cervix'].firmness)
+          acc.cervix = 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)
+          acc.sex = 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.pain = cycleDay.pain &&
+            Object.values(cycleDay.pain).some(x => x === true)
         }
-        acc[`${symptom}Exclude`] = cycleDay && cycleDay[symptom] && cycleDay[symptom].exclude
+        acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
         return acc
       }, {})
 
       const temp = symptoms.temperature
-      const columnHeight = this.state.chartHeight * config.columnHeightPercentage
-      return {
-        dateString,
-        y: temp ? normalizeToScale(temp, columnHeight) : null,
-        ...symptoms,
-        ...getFhmAndLtlInfo(dateString, temp, columnHeight)
+      if (temp) {
+        column.y = normalizeToScale(temp, this.columnHeight)
       }
+
+      const fhmAndLtl = getFhmAndLtlInfo(dateString, temp, this.columnHeight)
+      return Object.assign(column, symptoms, fhmAndLtl)
     })
 
     return columns.map((col, i) => {
@@ -116,12 +137,6 @@ export default class CycleChart extends Component {
   }
 
   render() {
-    let columnHeight
-    let symptomRowHeight
-    if (this.state.chartHeight) {
-      columnHeight = this.state.chartHeight * config.columnHeightPercentage
-      symptomRowHeight = this.state.chartHeight * config.symptomRowHeightPercentage
-    }
     return (
       <View
         onLayout={this.onLayout}
@@ -136,14 +151,16 @@ export default class CycleChart extends Component {
         {this.state.chartHeight && this.state.chartLoaded &&
           <View
             style={[styles.yAxis, {
-              height: columnHeight,
-              marginTop: symptomRowHeight
+              height: this.columnHeight,
+              marginTop: this.symptomRowHeight
             }]}
           >
-            {makeYAxisLabels(columnHeight)}
+            {makeYAxisLabels(this.columnHeight)}
           </View>}
 
-        {this.state.chartHeight && this.state.chartLoaded && makeHorizontalGrid(columnHeight, symptomRowHeight)}
+        {this.state.chartHeight && this.state.chartLoaded &&
+          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
+        }
 
         {this.state.chartHeight &&
           <FlatList

components/chart/day-column.js

@@ -37,12 +37,13 @@ export default class DayColumn extends Component {
       rightTemperatureExclude,
       leftY,
       leftTemperatureExclude,
-      chartHeight
+      columnHeight,
+      symptomHeight,
+      chartHeight,
+      symptomRowSymptoms,
+      xAxisHeight
     } = this.props
 
-    const columnHeight = chartHeight * config.columnHeightPercentage
-    const xAxisHeight = chartHeight * config.xAxisHeightPercentage
-    const symptomHeight = chartHeight * config.symptomRowHeightPercentage
 
     const columnElements = []
 
@@ -108,77 +109,102 @@ export default class DayColumn extends Component {
       </G>
     )
 
+    const symptomIconViews = {
+      bleeding: (
+        <SymptomIconView
+          value={this.props.bleeding}
+          symptomHeight={symptomHeight}
+          key='bleeding'
+        >
+          <Icon
+            name='drop'
+            size={12}
+            color={styles.bleedingIconShades[this.props.bleeding]}
+          />
+        </SymptomIconView>
+      ),
+      mucus: (
+        <SymptomIconView
+          value={this.props.mucus}
+          symptomHeight={symptomHeight}
+          key='mucus'
+        >
+          <View
+            {...styles.mucusIcon}
+            backgroundColor={styles.mucusIconShades[this.props.mucus]}
+          />
+        </SymptomIconView>
+      ),
+      cervix: (
+        <SymptomIconView
+          value={this.props.cervix}
+          symptomHeight={symptomHeight}
+          key='cervix'
+        >
+          <View
+            {...styles.mucusIcon}
+            // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
+            backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'}
+          />
+        </SymptomIconView>
+      ),
+      sex: (
+        <SymptomIconView
+          value={this.props.sex}
+          symptomHeight={symptomHeight}
+          key='sex'
+        >
+          <View
+            {...styles.mucusIcon}
+            backgroundColor='orange'
+          />
+        </SymptomIconView>
+      ),
+      desire: (
+        <SymptomIconView
+          value={this.props.desire}
+          symptomHeight={symptomHeight}
+          key='desire'
+        >
+          <View
+            {...styles.mucusIcon}
+            backgroundColor='red'
+          />
+        </SymptomIconView>
+      ),
+      pain: (
+        <SymptomIconView
+          value={this.props.pain}
+          symptomHeight={symptomHeight}
+          key='pain'
+        >
+          <View
+            {...styles.mucusIcon}
+            backgroundColor='blue'
+          />
+        </SymptomIconView>
+      ),
+      note: (
+        <SymptomIconView
+          value={this.props.note}
+          symptomHeight={symptomHeight}
+          key='note'
+        >
+          <View
+            {...styles.mucusIcon}
+            backgroundColor='green'
+          />
+        </SymptomIconView>
+      )
+    }
+
     return (
       <TouchableOpacity
         onPress={() => this.passDateToDayView(dateString)}
         activeOpacity={1}
       >
-        <View height={symptomHeight}>
-          <View style={styles.symptomRow}>
-            {typeof this.props.bleeding === 'number' &&
-              <Icon
-                name='drop'
-                size={12}
-                color={styles.bleedingIconShades[this.props.bleeding]}
-                key='bleeding'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {typeof this.props.mucus === 'number' &&
-              <View
-                {...styles.mucusIcon}
-                backgroundColor={styles.mucusIconShades[this.props.mucus]}
-                key='mucus'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {typeof this.props.cervix === 'number' &&
-              <View
-                {...styles.mucusIcon}
-                // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
-                backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'}
-                key='cervix'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {typeof this.props.sex === 'number' &&
-              <View
-                {...styles.mucusIcon}
-                backgroundColor='orange'
-                key='sex'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {typeof this.props.desire === 'number' &&
-              <View
-                {...styles.mucusIcon}
-                backgroundColor='red'
-                key='desire'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {this.props.pain &&
-              <View
-                {...styles.mucusIcon}
-                backgroundColor='blue'
-                key='pain'
-              />
-            }
-          </View>
-          <View style={styles.symptomRow}>
-            {this.props.note &&
-              <View
-                {...styles.mucusIcon}
-                backgroundColor='green'
-                key='note'
-              />
-            }
-          </View>
+        <View>
+          {symptomRowSymptoms.map(symptomName => symptomIconViews[symptomName])}
         </View>
 
         <Svg width={config.columnWidth} height={columnHeight}>
@@ -193,3 +219,16 @@ export default class DayColumn extends Component {
     )
   }
 }
+
+
+function SymptomIconView(props) {
+  const style = [styles.symptomRow, {height: props.symptomHeight}]
+  return (
+    <View style={style}>
+      {(typeof props.value === 'number' || props.value === true || typeof props.value === 'string') &&
+        props.children
+      }
+    </View>
+  )
+}
+

components/chart/styles.js

@@ -95,8 +95,6 @@ const styles = {
   symptomRow: {
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
-    flex: 1
   }
 }
 

config.js

 const config = {
   columnWidth: 25,
-  columnHeightPercentage: 0.62,
   xAxisHeightPercentage: 0.08,
-  symptomRowHeightPercentage: 0.30,
+  symptomHeightPercentage: 0.05,
   temperatureScale: {
     defaultLow: 35,
     defaultHigh: 38,