Introduce symptom row (WIP)

components/chart/chart.js

@@ -8,6 +8,7 @@ import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
+import config from '../../config'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -70,9 +71,10 @@ export default class CycleChart extends Component {
       }, {})
 
       const temp = symptoms.temperature
+      const columnHeight = this.state.chartHeight * config.columnHeightPercentage
       return {
         dateString,
-        y: temp ? normalizeToScale(temp, this.state.chartHeight) : null,
+        y: temp ? normalizeToScale(temp, columnHeight) : null,
         ...symptoms,
         ...getFhmAndLtlInfo(dateString, temp)
       }
@@ -85,6 +87,12 @@ 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}
@@ -93,12 +101,15 @@ export default class CycleChart extends Component {
         {!this.state.chartHeight && <Text>Loading...</Text>}
         {this.state.chartHeight &&
           <View
-            style={[styles.yAxis, {height: this.state.chartHeight}]}
+            style={[styles.yAxis, {
+              height: columnHeight,
+              marginTop: symptomRowHeight
+            }]}
           >
-            {makeYAxisLabels(this.state.chartHeight)}
+            {makeYAxisLabels(columnHeight)}
           </View>}
 
-        {this.state.chartHeight && makeHorizontalGrid(this.state.chartHeight)}
+        {this.state.chartHeight && makeHorizontalGrid(columnHeight, symptomRowHeight)}
 
         {this.state.chartHeight &&
           <FlatList
@@ -110,8 +121,7 @@ export default class CycleChart extends Component {
             keyExtractor={item => item.dateString}
             initialNumToRender={15}
             maxToRenderPerBatch={5}
-          >
-          </FlatList>
+          />
         }
       </View>
     )

components/chart/day-column.js

@@ -34,36 +34,11 @@ export default class DayColumn extends Component {
       rightY,
       rightTemperatureExclude,
       leftY,
-      leftTemperatureExclude
+      leftTemperatureExclude,
+      chartHeight
     } = this.props
 
     const columnElements = []
-    if (typeof bleeding === 'number') {
-      columnElements.push(
-        <Icon
-          name='drop'
-          position='absolute'
-          size={18}
-          color='#900'
-          style={{ marginTop: 10, marginLeft: 3 }}
-          key='bleeding'
-        />
-      )
-    }
-
-    if (typeof mucus === 'number') {
-      const mucusIcon = (
-        <View
-          position='absolute'
-          top = {40}
-          left = {config.columnMiddle - styles.mucusIcon.width / 2}
-          {...styles.mucusIcon}
-          backgroundColor={styles.mucusIconShades[mucus]}
-          key='mucus'
-        />
-      )
-      columnElements.push(mucusIcon)
-    }
 
     if(drawFhmLine) {
       const fhmLine = (<View
@@ -114,8 +89,9 @@ export default class DayColumn extends Component {
       </Text>
     )
 
-    const columnHeight = this.props.chartHeight * config.columnHeightPercentage
-    const xAxisHeight = this.props.chartHeight * config.xAxisHeightPercentage
+    const columnHeight = chartHeight * config.columnHeightPercentage
+    const xAxisHeight = chartHeight * config.xAxisHeightPercentage
+    const symptomHeight = chartHeight * config.symptomRowHeightPercentage
 
     const column = React.createElement(
       TouchableOpacity,
@@ -132,7 +108,26 @@ export default class DayColumn extends Component {
 
     return (
       <View>
+        <View style={{ height: symptomHeight }}>
+          {typeof mucus === 'number' &&
+            <View
+              {...styles.mucusIcon}
+              backgroundColor={styles.mucusIconShades[mucus]}
+              key='mucus'
+            />
+          }
+          {typeof bleeding === 'number' &&
+            <Icon
+              name='drop'
+              size={18}
+              color='#900'
+              key='bleeding'
+            />
+          }
+        </View>
+
         {column}
+
         <View style={{height: xAxisHeight}}>
           {cycleDayLabel}
           {dateLabel}

components/chart/y-axis.js

@@ -4,15 +4,16 @@ import config from '../../config'
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 
-export function makeYAxisLabels(chartHeight) {
+export function makeYAxisLabels(columnHeight) {
   const units = config.temperatureScale.units
   const scaleMax = scaleObservable.value.max
   const style = styles.yAxisLabel
 
-  return getTickPositions(chartHeight).map((y, i) => {
+  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
+    if (scaleMax - i * units === 37) console.log(y)
     return (
       <Text
         style={[style, {top: y - 8}]}
@@ -23,11 +24,11 @@ export function makeYAxisLabels(chartHeight) {
   })
 }
 
-export function makeHorizontalGrid(chartHeight) {
-  return getTickPositions(chartHeight).map(tick => {
+export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
+  return getTickPositions(columnHeight).map(tick => {
     return (
       <View
-        top={tick}
+        top={tick + symptomRowHeight}
         {...styles.horizontalGrid}
         key={tick}
       />
@@ -35,25 +36,31 @@ export function makeHorizontalGrid(chartHeight) {
   })
 }
 
-function getTickPositions(chartHeight) {
+function getTickPositions(columnHeight) {
   const units = config.temperatureScale.units
   const scaleMin = scaleObservable.value.min
   const scaleMax = scaleObservable.value.max
   const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
-  const columnHeight = chartHeight * config.columnHeightPercentage
-  const tickDistance = columnHeight / numberOfTicks
+  const tickDistance = 1 / (numberOfTicks - 1)
 
   const tickPositions = []
-  const margin = tickDistance / 2
   for (let i = 0; i < numberOfTicks; i++) {
-    tickPositions.push(tickDistance * i + margin)
+    const position = getAbsoluteValue(tickDistance * i, columnHeight)
+    tickPositions.push(position)
   }
   return tickPositions
 }
 
-export function normalizeToScale(temp, chartHeight) {
+export function normalizeToScale(temp, columnHeight) {
   const scale = scaleObservable.value
   const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
-  const scaleHeight = chartHeight * config.columnHeightPercentage
-  return scaleHeight * valueRelativeToScale
+  return getAbsoluteValue(valueRelativeToScale, columnHeight)
+}
+
+function getAbsoluteValue(relative, columnHeight) {
+  // we add some height to have some breathing room
+  const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
+  const scaleHeight = columnHeight - verticalPadding
+  return scaleHeight * relative + verticalPadding
+
 }

config.js

@@ -1,13 +1,15 @@
 const config = {
   columnWidth: 25,
-  columnHeightPercentage: 0.92,
+  columnHeightPercentage: 0.84,
   xAxisHeightPercentage: 0.08,
+  symptomRowHeightPercentage: 0.08,
   temperatureScale: {
     defaultLow: 35,
     defaultHigh: 38,
     min: 34,
     max: 40,
-    units: 0.1
+    units: 0.1,
+    verticalPadding: 0.03
   }
 }