lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Determine chart height dynamically and fill the window

Browse Source
This commit is contained in:
Julia Friesel
2018-08-24 09:53:57 +02:00
parent 654dbf5e98
commit 2471b92eaf
9 changed files with 126 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/chart.js
+73 -56
View File
@@ -1,9 +1,9 @@
import React, { Component } from 'react'
import { View, FlatList, ScrollView } from 'react-native'
import { View, FlatList, Text } from 'react-native'
import range from 'date-range'
import { LocalDate } from 'js-joda'
import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
import setUpFertilityStatusFunc from './nfp-lines'
import nfpLines from './nfp-lines'
import DayColumn from './day-column'
import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
import styles from './styles'
@@ -12,24 +12,27 @@ import { scaleObservable } from '../../local-storage'
export default class CycleChart extends Component {
constructor(props) {
super(props)
this.state = {
columns: makeColumnInfo(setUpFertilityStatusFunc()),
}
this.state = {}
this.renderColumn = ({item, index}) => {
return (
<DayColumn
{...item}
index={index}
navigate={this.props.navigate}
chartHeight={this.state.chartHeight}
/>
)
}
}
this.reCalculateChartInfo = (function(Chart) {
return function() {
Chart.setState({columns: makeColumnInfo(setUpFertilityStatusFunc())})
}
})(this)
onLayout = ({ nativeEvent }) => {
if (this.state.chartHeight) return
const height = nativeEvent.layout.height
this.setState({ chartHeight: height })
this.reCalculateChartInfo = () => {
this.setState({ columns: this.makeColumnInfo(nfpLines(height)) })
}
cycleDaysSortedByDate.addListener(this.reCalculateChartInfo)
this.removeObvListener = scaleObservable(this.reCalculateChartInfo, false)
@@ -40,13 +43,65 @@ export default class CycleChart extends Component {
this.removeObvListener()
}
makeColumnInfo(getFhmAndLtlInfo) {
let amountOfCycleDays = getAmountOfCycleDays()
// if there's not much data yet, we want to show at least 30 days on the chart
if (amountOfCycleDays < 30) {
amountOfCycleDays = 30
} else {
// we don't want the chart to end abruptly before the first data day
amountOfCycleDays += 5
}
const jsDates = getTodayAndPreviousDays(amountOfCycleDays)
const xAxisDates = jsDates.map(jsDate => {
return LocalDate.of(
jsDate.getFullYear(),
jsDate.getMonth() + 1,
jsDate.getDate()
).toString()
})
const columns = xAxisDates.map(dateString => {
const cycleDay = getCycleDay(dateString)
const symptoms = ['temperature', 'mucus', 'bleeding'].reduce((acc, symptom) => {
acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
acc[`${symptom}Exclude`] = cycleDay && cycleDay[symptom] && cycleDay[symptom].exclude
return acc
}, {})
const temp = symptoms.temperature
return {
dateString,
y: temp ? normalizeToScale(temp, this.state.chartHeight) : null,
...symptoms,
...getFhmAndLtlInfo(dateString, temp)
}
})
return columns.map((col, i) => {
const info = getInfoForNeighborColumns(i, columns)
return Object.assign(col, info)
})
}
render() {
return (
<ScrollView>
<View style={{ flexDirection: 'row', marginTop: 50 }}>
<View {...styles.yAxis}>{makeYAxisLabels()}</View>
{makeHorizontalGrid()}
{<FlatList
<View
onLayout={this.onLayout}
style={{ flexDirection: 'row', flex: 1 }}
>
{!this.state.chartHeight && <Text>Loading...</Text>}
{this.state.chartHeight &&
<View
style={[styles.yAxis, {height: this.state.chartHeight}]}
>
{makeYAxisLabels(this.state.chartHeight)}
</View>}
{this.state.chartHeight && makeHorizontalGrid(this.state.chartHeight)}
{this.state.chartHeight &&
<FlatList
horizontal={true}
inverted={true}
showsHorizontalScrollIndicator={false}
@@ -56,51 +111,13 @@ export default class CycleChart extends Component {
initialNumToRender={15}
maxToRenderPerBatch={5}
>
</FlatList>}
</View>
</ScrollView>
</FlatList>
}
</View>
)
}
}
function makeColumnInfo(getFhmAndLtlInfo) {
let amountOfCycleDays = getAmountOfCycleDays()
// if there's not much data yet, we want to show at least 30 days on the chart
if (amountOfCycleDays < 30) {
amountOfCycleDays = 30
} else {
// we don't want the chart to end abruptly before the first data day
amountOfCycleDays += 5
}
const xAxisDates = getTodayAndPreviousDays(amountOfCycleDays).map(jsDate => {
return LocalDate.of(
jsDate.getFullYear(),
jsDate.getMonth() + 1,
jsDate.getDate()
).toString()
})
const columns = xAxisDates.map(dateString => {
const cycleDay = getCycleDay(dateString)
const symptoms = ['temperature', 'mucus', 'bleeding'].reduce((acc, symptom) => {
acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
acc[`${symptom}Exclude`] = cycleDay && cycleDay[symptom] && cycleDay[symptom].exclude
return acc
}, {})
return {
dateString,
y: symptoms.temperature ? normalizeToScale(symptoms.temperature) : null,
...symptoms,
...getFhmAndLtlInfo(dateString, symptoms.temperature)
}
})
return columns.map((col, i) => {
const info = getInfoForNeighborColumns(i, columns)
return Object.assign(col, info)
})
}
function getTodayAndPreviousDays(n) {
const today = new Date()
components/chart/day-column.js
+17 -10
View File
@@ -105,25 +105,22 @@ export default class DayColumn extends Component {
const cycleDayNumber = getCycleDayNumber(dateString)
const shortDate = dateString.split('-').slice(1).join('-')
const cycleDayLabel = (
<Text style={label.number} y={config.cycleDayNumberRowY}>
<Text style={label.number}>
{cycleDayNumber}
</Text>)
const dateLabel = (
<Text style = {label.date} y={config.dateRowY}>
<Text style = {label.date}>
{shortDate}
</Text>
)
columnElements.push(
<View position='absolute' bottom={0} key='date'>
{cycleDayLabel}
{dateLabel}
</View>
)
return React.createElement(
const columnHeight = this.props.chartHeight * config.columnHeightPercentage
const xAxisHeight = this.props.chartHeight * config.xAxisHeightPercentage
const column = React.createElement(
TouchableOpacity,
{
style: styles.column.rect,
style: [styles.column.rect, {height: columnHeight}],
key: this.props.index.toString(),
onPress: () => {
this.passDateToDayView(dateString)
@@ -132,5 +129,15 @@ export default class DayColumn extends Component {
},
columnElements
)
return (
<View>
{column}
<View style={{height: xAxisHeight}}>
{cycleDayLabel}
{dateLabel}
</View>
</View>
)
}
}
components/chart/nfp-lines.js
+2 -2
View File
@@ -1,7 +1,7 @@
import { getCycleStatusForDay } from '../../lib/sympto-adapter'
import { normalizeToScale } from './y-axis'
export default function () {
export default function (chartHeight) {
const cycle = {
status: null
}
@@ -71,7 +71,7 @@ export default function () {
dateIsInPeriOrPostPhase(dateString) &&
isInTempMeasuringPhase(temperature, dateString)
) {
ret.drawLtlAt = normalizeToScale(tempShift.ltl)
ret.drawLtlAt = normalizeToScale(tempShift.ltl, chartHeight)
}
}
components/chart/styles.js
+2 -3
View File
@@ -38,10 +38,10 @@ const styles = {
},
rect: {
width: config.columnWidth,
height: config.chartHeight,
borderStyle: 'solid',
borderColor: 'grey',
borderWidth: 0.5
borderLeftWidth: 0.5,
borderRightWidth: 0.5,
}
},
bleedingIcon: {
@@ -63,7 +63,6 @@ const styles = {
'#993299'
],
yAxis: {
height: config.chartHeight,
width: config.columnWidth,
borderRightWidth: 0.5,
borderColor: 'lightgrey',
components/chart/y-axis.js
+15 -15
View File
@@ -4,19 +4,18 @@ import config from '../../config'
import styles from './styles'
import { scaleObservable } from '../../local-storage'
export function makeYAxisLabels() {
export function makeYAxisLabels(chartHeight) {
const units = config.temperatureScale.units
const scaleMax = scaleObservable.value.max
const style = styles.yAxisLabel
return getTickPositions().map((y, i) => {
const style = styles.yAxisLabel
return getTickPositions(chartHeight).map((y, i) => {
// 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
return (
<Text
style={{ ...style }}
style={[style, {top: y - 8}]}
key={i}>
{scaleMax - i * units}
</Text>
@@ -24,8 +23,8 @@ export function makeYAxisLabels() {
})
}
export function makeHorizontalGrid() {
return getTickPositions().map(tick => {
export function makeHorizontalGrid(chartHeight) {
return getTickPositions(chartHeight).map(tick => {
return (
<View
top={tick}
@@ -36,24 +35,25 @@ export function makeHorizontalGrid() {
})
}
function getTickPositions() {
function getTickPositions(chartHeight) {
const units = config.temperatureScale.units
const scaleMin = scaleObservable.value.min
const scaleMax = scaleObservable.value.max
const numberOfTicks = (scaleMax - scaleMin) * (1 / units)
const tickDistance = config.chartHeight / numberOfTicks
const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
const columnHeight = chartHeight * config.columnHeightPercentage
const tickDistance = columnHeight / 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)
const margin = tickDistance / 2
for (let i = 0; i < numberOfTicks; i++) {
tickPositions.push(tickDistance * i + margin)
}
return tickPositions
}
export function normalizeToScale(temp) {
export function normalizeToScale(temp, chartHeight) {
const scale = scaleObservable.value
const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
const scaleHeight = config.chartHeight
const scaleHeight = chartHeight * config.columnHeightPercentage
return scaleHeight * valueRelativeToScale
}