From c597a654d8e1e36c59f94449a8ab52b80a4f7e92 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Wed, 22 Aug 2018 08:43:41 +0200
Subject: [PATCH] Use settings from observable in chart
---
components/chart/chart.js | 8 ++---
components/chart/y-axis.js | 60 +++++++++++++++++++++-----------------
components/settings.js | 20 ++-----------
local-storage/index.js | 17 ++++++++---
4 files changed, 52 insertions(+), 53 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index ded01cfe..dd2c29b9 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 997dfbac..61f0c2d8 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 f92ff333..f5fa29f8 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 e64bc186..21ac57cb 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) {
--
GitLab