Use settings from observable in chart

components/chart/chart.js

@@ -2,13 +2,12 @@ import React, { Component } from 'react'
 import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
-import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
+import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
 import setUpFertilityStatusFunc from './nfp-lines'
 import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
 
-const yAxisView = <View {...styles.yAxis}>{yAxis.labels}</View>
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -25,6 +24,7 @@ export default class CycleChart extends Component {
         />
       )
     }
+    this.yAxisView = <View {...styles.yAxis}>{makeYAxisLabels()}</View>
 
     this.reCalculateChartInfo = (function(Chart) {
       return function() {
@@ -42,8 +42,8 @@ export default class CycleChart extends Component {
   render() {
     return (
       <View style={{ flexDirection: 'row', marginTop: 50 }}>
-        {yAxisView}
-        {horizontalGrid}
+        {this.yAxisView}
+        {makeHorizontalGrid()}
         {<FlatList
           horizontal={true}
           inverted={true}

components/chart/y-axis.js

@@ -2,48 +2,54 @@ import React from 'react'
 import { Text, View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
+import { tempScaleObservable } from '../../local-storage'
 
-function makeYAxis() {
-  const scale = config.temperatureScale
-  const scaleMin = scale.low
-  const scaleMax = scale.high
-  const numberOfTicks = (scaleMax - scaleMin) * (1 / scale.units)
-  const tickDistance = config.chartHeight / numberOfTicks
+export function makeYAxisLabels() {
+  const units = config.temperatureScale.units
+  const scaleMax = tempScaleObservable.value.max
 
-  const tickPositions = []
-  const labels = []
-  // for style reasons, we don't want the first and last tick
-  for (let i = 1; i < numberOfTicks - 1; i++) {
-    const y = tickDistance * i
+  return getTickPositions().map((y, i) => {
     const style = styles.yAxisLabel
     // 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
     style.top = y - 8
-    labels.push(
+    return (
       <Text
-        style={{...style}}
+        style={{ ...style }}
         key={i}>
-        {scaleMax - i * scale.units}
+        {scaleMax - i * units}
       </Text>
     )
-    tickPositions.push(y)
-  }
-
-  return {labels, tickPositions}
+  })
 }
 
-export const yAxis = makeYAxis()
+export function makeHorizontalGrid() {
+  return getTickPositions().map(tick => {
+    return (
+      <View
+        top={tick}
+        {...styles.horizontalGrid}
+        key={tick}
+      />
+    )
+  })
+}
 
-export const horizontalGrid = yAxis.tickPositions.map(tick => {
-  return (
-    <View
-      top={tick}
-      {...styles.horizontalGrid}
-      key={tick}
-    />
-  )
-})
+function getTickPositions() {
+  const units = config.temperatureScale.units
+  const scaleMin = tempScaleObservable.value.min
+  const scaleMax = tempScaleObservable.value.max
+  const numberOfTicks = (scaleMax - scaleMin) * (1 / units)
+  const tickDistance = config.chartHeight / numberOfTicks
+
+  const tickPositions = []
+  // for style reasons, we don't want the first and last tick
+  for (let i = 1; i < numberOfTicks - 1; i++) {
+    tickPositions.push(tickDistance * i)
+  }
+  return tickPositions
+}
 
 export function normalizeToScale(temp) {
   const scale = config.temperatureScale