Rerender chart on scale observable change

components/chart/chart.js

@@ -7,7 +7,7 @@ import setUpFertilityStatusFunc from './nfp-lines'
 import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
-
+import { scaleObservable } from '../../local-storage'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -24,7 +24,6 @@ export default class CycleChart extends Component {
         />
       )
     }
-    this.yAxisView = <View {...styles.yAxis}>{makeYAxisLabels()}</View>
 
     this.reCalculateChartInfo = (function(Chart) {
       return function() {
@@ -33,16 +32,18 @@ export default class CycleChart extends Component {
     })(this)
 
     cycleDaysSortedByDate.addListener(this.reCalculateChartInfo)
+    this.removeObvListener = scaleObservable(this.reCalculateChartInfo, false)
   }
 
   componentWillUnmount() {
     cycleDaysSortedByDate.removeListener(this.reCalculateChartInfo)
+    this.removeObvListener()
   }
 
   render() {
     return (
       <View style={{ flexDirection: 'row', marginTop: 50 }}>
-        {this.yAxisView}
+        <View {...styles.yAxis}>{makeYAxisLabels()}</View>
         {makeHorizontalGrid()}
         {<FlatList
           horizontal={true}

components/chart/day-column.js

@@ -15,7 +15,7 @@ const label = styles.column.label
 export default class DayColumn extends Component {
   passDateToDayView(dateString) {
     const cycleDay = getOrCreateCycleDay(dateString)
-    this.props.navigate('cycleDay', { cycleDay })
+    this.props.navigate('CycleDay', { cycleDay })
   }
 
   shouldComponentUpdate(newProps) {

components/chart/y-axis.js

@@ -2,11 +2,11 @@ import React from 'react'
 import { Text, View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
-import { tempScaleObservable } from '../../local-storage'
+import { scaleObservable } from '../../local-storage'
 
 export function makeYAxisLabels() {
   const units = config.temperatureScale.units
-  const scaleMax = tempScaleObservable.value.max
+  const scaleMax = scaleObservable.value.max
 
   return getTickPositions().map((y, i) => {
     const style = styles.yAxisLabel
@@ -38,8 +38,8 @@ export function makeHorizontalGrid() {
 
 function getTickPositions() {
   const units = config.temperatureScale.units
-  const scaleMin = tempScaleObservable.value.min
-  const scaleMax = tempScaleObservable.value.max
+  const scaleMin = scaleObservable.value.min
+  const scaleMax = scaleObservable.value.max
   const numberOfTicks = (scaleMax - scaleMin) * (1 / units)
   const tickDistance = config.chartHeight / numberOfTicks
 
@@ -52,8 +52,8 @@ function getTickPositions() {
 }
 
 export function normalizeToScale(temp) {
-  const scale = config.temperatureScale
-  const valueRelativeToScale = (scale.high - temp) / (scale.high - scale.low)
+  const scale = scaleObservable.value
+  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
   const scaleHeight = config.chartHeight
   return scaleHeight * valueRelativeToScale
 }

components/settings.js

@@ -15,7 +15,7 @@ import config from '../config'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
 import importCsv from '../lib/import-export/import-from-csv'
-import { tempScaleObservable, saveTempScale } from '../local-storage'
+import { scaleObservable, saveTempScale } from '../local-storage'
 
 export default class Settings extends Component {
   render() {
@@ -62,7 +62,7 @@ export default class Settings extends Component {
 class TempSlider extends Component {
   constructor(props) {
     super(props)
-    this.state = Object.assign({}, tempScaleObservable.value)
+    this.state = Object.assign({}, scaleObservable.value)
   }
 
   onValuesChange = (values) => {

local-storage/index.js

@@ -2,7 +2,7 @@ import { AsyncStorage } from 'react-native'
 import Observable from 'obv'
 import config from '../config'
 
-export const tempScaleObservable = Observable()
+export const scaleObservable = Observable()
 setTempScaleInitially()
 
 async function setTempScaleInitially() {
@@ -16,11 +16,11 @@ async function setTempScaleInitially() {
       max: config.temperatureScale.defaultHigh
     }
   }
-  tempScaleObservable.set(value)
+  scaleObservable.set(value)
 }
 
 export async function saveTempScale(scale) {
   await AsyncStorage.setItem('tempScale', JSON.stringify(scale))
-  tempScaleObservable.set(scale)
+  scaleObservable.set(scale)
 }