diff --git a/components/chart/chart.js b/components/chart/chart.js index ded01cfecaa565fc8d89374f17d76e7c28d8a080..dd2c29b92fca45f1917ed3310976b53386ce074c 100644 --- a/components/chart/chart.js +++ b/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} diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 997dfbac0e91e5cbbeca8ee7866982ac79a5f087..61f0c2d8ffce71f19ad986dfd900d10b63c5eff4 100644 --- a/components/chart/y-axis.js +++ b/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 function makeHorizontalGrid() { + return getTickPositions().map(tick => { + return ( + <View + top={tick} + {...styles.horizontalGrid} + key={tick} + /> + ) + }) } -export const yAxis = makeYAxis() +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 -export const horizontalGrid = yAxis.tickPositions.map(tick => { - return ( - <View - top={tick} - {...styles.horizontalGrid} - key={tick} - /> - ) -}) + 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 diff --git a/components/settings.js b/components/settings.js index f92ff333d9d9266d7a4cd8422dece6fb7e767e64..f5fa29f84a1ce42a8a473f58670f9ddfaaef95bb 100644 --- a/components/settings.js +++ b/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 { getTempScale, saveTempScale } from '../local-storage' +import { tempScaleObservable, saveTempScale } from '../local-storage' export default class Settings extends Component { render() { @@ -62,23 +62,7 @@ export default class Settings extends Component { class TempSlider extends Component { constructor(props) { super(props) - this.state = { - min: config.temperatureScale.defaultLow, - max: config.temperatureScale.defaultHigh - } - this.getStoredScale() - } - - async getStoredScale() { - let storedScale - try { - storedScale = await getTempScale() - } catch(err) { - alertError(labels.tempScale.loadError) - return - } - if (!storedScale) return - this.setState(storedScale) + this.state = Object.assign({}, tempScaleObservable.value) } onValuesChange = (values) => { diff --git a/local-storage/index.js b/local-storage/index.js index e64bc1865060bdb84f719cbe842f4be7986e504b..21ac57cbd6abc5e23ae3ed41873bd673e8b31760 100644 --- a/local-storage/index.js +++ b/local-storage/index.js @@ -1,13 +1,22 @@ import { AsyncStorage } from 'react-native' import Observable from 'obv' +import config from '../config' export const tempScaleObservable = Observable() -getTempScale() +setTempScaleInitially() -async function getTempScale() { +async function setTempScaleInitially() { const result = await AsyncStorage.getItem('tempScale') - if (!result) return result - tempScaleObservable.set(JSON.parse(result)) + let value + if (result) { + value = JSON.parse(result) + } else { + value = { + min: config.temperatureScale.defaultLow, + max: config.temperatureScale.defaultHigh + } + } + tempScaleObservable.set(value) } export async function saveTempScale(scale) {