Use settings from observable in chart

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