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

Merge branch '150-apply-design-to-chart' into 'master'

Browse Source 
changes y-ticks and labels, cycle day display and colors of symbols

Closes #146 and #150

See merge request bloodyhealth/drip!72
This commit is contained in:
tina
2018-09-14 12:02:54 +00:00
parent e4b6cfabdc 1e220ef9e3
commit ae18e19ffa
9 changed files with 170 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar.js
+1 -2
View File
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { CalendarList } from 'react-native-calendars'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
import cycleModule from '../lib/cycle'
import {shadesOfRed, shadesOfGrey} from '../styles/index'
export default class CalendarView extends Component {
constructor(props) {
@@ -53,7 +54,6 @@ export default class CalendarView extends Component {
}
function toCalFormat(bleedingDaysSortedByDate) {
const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
return bleedingDaysSortedByDate.reduce((acc, day) => {
acc[day.date] = {
startingDay: true,
@@ -66,7 +66,6 @@ function toCalFormat(bleedingDaysSortedByDate) {
function predictionToCalFormat(predictedDays) {
if (!predictedDays.length) return {}
const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
const middleIndex = (predictedDays[0].length - 1) / 2
return predictedDays.reduce((acc, setOfDays) => {
setOfDays.reduce((accSet, day, i) => {
components/chart/chart.js
+30 -4
View File
@@ -29,7 +29,6 @@ export default class CycleChart extends Component {
onLayout = ({ nativeEvent }) => {
if (this.state.chartHeight) return
const height = nativeEvent.layout.height
this.setState({ chartHeight: height })
this.reCalculateChartInfo = () => {
@@ -62,11 +61,38 @@ export default class CycleChart extends Component {
jsDate.getDate()
).toString()
})
const chartSymptoms = [
'bleeding',
'temperature',
'mucus',
'cervix',
'sex',
'desire',
'pain',
'note'
].filter((symptomName) => {
return cycleDaysSortedByDate.some(cycleDay => cycleDay[symptomName])
})
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
const symptoms = chartSymptoms.reduce((acc, symptom) => {
if (symptom === 'bleeding' ||
symptom === 'temperature' ||
symptom === 'mucus' ||
symptom === 'desire' ||
symptom === 'note'
) {
acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
} else if (symptom === 'cervix') {
acc[symptom] = cycleDay && cycleDay['cervix'] && (cycleDay['cervix'].opening + cycleDay['cervix'].firmness)
} else if (symptom === 'sex') {
// solo = 1 + partner = 2
acc[symptom] = cycleDay && cycleDay['sex'] && (cycleDay['sex'].solo + cycleDay['sex'].partner)
} else if (symptom === 'pain') {
// is any pain documented?
acc[symptom] = cycleDay && cycleDay['pain'] && Object.values(cycleDay['pain']).some(x => x === true)
}
acc[`${symptom}Exclude`] = cycleDay && cycleDay[symptom] && cycleDay[symptom].exclude
return acc
}, {})
@@ -76,7 +102,7 @@ export default class CycleChart extends Component {
return {
dateString,
y: temp ? normalizeToScale(temp, columnHeight) : null,
...symptoms,
symptoms,
...getFhmAndLtlInfo(dateString, temp)
}
})
components/chart/day-column.js
+73 -26
View File
@@ -27,8 +27,7 @@ export default class DayColumn extends Component {
dateString,
y,
temperatureExclude,
bleeding,
mucus,
symptoms,
drawFhmLine,
drawLtlAt,
rightY,
@@ -72,8 +71,8 @@ export default class DayColumn extends Component {
const cycleDayNumber = getCycleDayNumber(dateString)
const shortDate = dateString.split('-').slice(1).join('-')
const cycleDayLabel = (
<Text style={label.number}>
{cycleDayNumber}
<Text style = {label.number}>
{cycleDayNumber ? cycleDayNumber : ' '}
</Text>)
const dateLabel = (
<Text style = {label.date}>
@@ -83,20 +82,19 @@ export default class DayColumn extends Component {
// we merge the colors here instead of from the stylesheet because of a RN
// bug that doesn't apply borderLeftColor otherwise
const customStyle = {
const potentialCustomStyle = {
height: columnHeight,
borderLeftColor: 'grey',
borderRightColor: 'grey'
}
if (drawFhmLine) {
customStyle.borderLeftColor = styles.nfpLine.borderColor
customStyle.borderLeftWidth = 3
potentialCustomStyle.borderLeftColor = styles.nfpLine.borderColor
potentialCustomStyle.borderLeftWidth = 3
}
const column = React.createElement(
TouchableOpacity,
{
style: [styles.column.rect, customStyle],
style: [styles.column.rect, potentialCustomStyle],
key: this.props.index.toString(),
onPress: () => {
this.passDateToDayView(dateString)
@@ -108,24 +106,73 @@ export default class DayColumn extends Component {
return (
<View>
<View style={[styles.symptomRow, {height: symptomHeight}]}>
{typeof mucus === 'number' &&
<View
{...styles.mucusIcon}
backgroundColor={styles.mucusIconShades[mucus]}
key='mucus'
/>
}
{typeof bleeding === 'number' &&
<Icon
name='drop'
size={18}
color='#900'
key='bleeding'
/>
}
<View height={symptomHeight}>
<View style={styles.symptomRow}>
{typeof symptoms.bleeding === 'number' &&
<Icon
name='drop'
size={12}
color={styles.bleedingIconShades[symptoms.bleeding]}
key='bleeding'
/>
}
</View>
<View style={styles.symptomRow}>
{typeof symptoms.mucus === 'number' &&
<View
{...styles.mucusIcon}
backgroundColor={styles.mucusIconShades[symptoms.mucus]}
key='mucus'
/>
}
</View>
<View style={styles.symptomRow}>
{typeof symptoms.cervix === 'number' &&
<View
{...styles.mucusIcon}
// cervix is sum of openess and firmness - fertile only when closed and hard (=0)
backgroundColor={symptoms.cervix > 0 ? 'blue' : 'green'}
key='cervix'
/>
}
</View>
<View style={styles.symptomRow}>
{typeof symptoms.sex === 'number' &&
<View
{...styles.mucusIcon}
backgroundColor='orange'
key='sex'
/>
}
</View>
<View style={styles.symptomRow}>
{typeof symptoms.desire === 'number' &&
<View
{...styles.mucusIcon}
backgroundColor='red'
key='desire'
/>
}
</View>
<View style={styles.symptomRow}>
{symptoms.pain &&
<View
{...styles.mucusIcon}
backgroundColor='blue'
key='pain'
/>
}
</View>
<View style={styles.symptomRow}>
{symptoms.note &&
<View
{...styles.mucusIcon}
backgroundColor='green'
key='note'
/>
}
</View>
</View>
{column}
<View style={{height: xAxisHeight}}>
components/chart/dot-and-line.js
+1 -1
View File
@@ -41,7 +41,7 @@ export default class DotAndLine extends Component {
function makeLine(leftY, rightY, direction, excludeLine) {
const colWidth = config.columnWidth
const heightDiff = -leftY - -rightY
const heightDiff = -(leftY - rightY)
const angle = Math.atan2(heightDiff, colWidth / 2)
const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
// hypotenuse, we add 3px for good measure, because otherwise the lines
components/chart/styles.js
+33 -24
View File
@@ -1,26 +1,33 @@
import config from '../../config'
import {primaryColor, shadesOfRed} from '../../styles/index'
const colorTemperature = '#765285'
const colorTemperatureLight = '#a67fb5'
const dotWidth = 10
const lineWidth = 2
const colorLtl = '#feb47b'
const styles = {
curve: {
borderStyle: 'solid',
borderColor: '#ffc425',
borderWidth: 2,
borderColor: colorTemperature,
borderWidth: lineWidth,
},
curveExcluded: {
borderColor: 'lightgrey',
borderWidth: 2,
borderStyle: 'solid'
borderColor: colorTemperatureLight,
borderWidth: lineWidth,
borderStyle: 'dotted'
},
curveDots: {
backgroundColor: '#00aedb',
width: 12,
height: 12,
backgroundColor: colorTemperature,
width: dotWidth,
height: dotWidth,
borderRadius: 50
},
curveDotsExcluded: {
backgroundColor: 'lightgrey',
width: 12,
height: 12,
backgroundColor: colorTemperatureLight,
width: dotWidth,
height: dotWidth,
borderRadius: 50
},
column: {
@@ -28,19 +35,18 @@ const styles = {
date: {
color: 'grey',
fontSize: 9,
fontWeight: '100'
fontWeight: '100',
},
number: {
color: '#00b159',
color: primaryColor,
fontSize: 13,
textAlign: 'center'
textAlign: 'center',
}
},
rect: {
width: config.columnWidth,
borderStyle: 'solid',
borderLeftWidth: 0.5,
borderRightWidth: 0.5,
}
},
bleedingIcon: {
@@ -49,20 +55,21 @@ const styles = {
x: 6,
y: 3
},
bleedingIconShades: shadesOfRed,
mucusIcon: {
width: 12,
height: 12,
borderRadius: 50,
},
mucusIconShades: [
'#cc99cc',
'#bf7fbf',
'#b266b2',
'#a64ca6',
'#993299'
'#fef0e4',
'#fee1ca',
'#fed2af',
'#fec395',
'#feb47b'
],
yAxis: {
width: config.columnWidth,
width: 27,
borderRightWidth: 0.5,
borderColor: 'lightgrey',
borderStyle: 'solid'
@@ -83,13 +90,15 @@ const styles = {
left: config.columnWidth
},
nfpLine: {
borderColor: '#00b159',
borderWidth: 2,
borderColor: colorLtl,
borderWidth: lineWidth,
borderStyle: 'solid'
},
symptomRow: {
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
width: '100%',
flex: 1
}
}
components/chart/y-axis.js
+16 -8
View File
@@ -2,24 +2,34 @@ import React from 'react'
import { View } from 'react-native'
import config from '../../config'
import styles from './styles'
import { scaleObservable } from '../../local-storage'
import { scaleObservable, unitObservable } from '../../local-storage'
import { AppText } from '../app-text'
export function makeYAxisLabels(columnHeight) {
const units = config.temperatureScale.units
const units = unitObservable.value
const scaleMax = scaleObservable.value.max
const style = styles.yAxisLabel
return getTickPositions(columnHeight).map((y, i) => {
const tick = scaleMax - i * units
const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
let showTick
let tickBold
if (units === 0.1) {
showTick = (tick * 10 % 2) ? false : true
tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
} else {
showTick = (tick * 10 % 5) ? false : true
tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
}
// 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
if (scaleMax - i * units === 37) console.log(y)
return (
<AppText
style={[style, {top: y - 8}]}
style={[style, {top: y - 8}, tickBold]}
key={i}>
{scaleMax - i * units}
{showTick && tickLabel}
</AppText>
)
})
@@ -38,12 +48,11 @@ export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
}
function getTickPositions(columnHeight) {
const units = config.temperatureScale.units
const units = unitObservable.value
const scaleMin = scaleObservable.value.min
const scaleMax = scaleObservable.value.max
const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
const tickDistance = 1 / (numberOfTicks - 1)
const tickPositions = []
for (let i = 0; i < numberOfTicks; i++) {
const position = getAbsoluteValue(tickDistance * i, columnHeight)
@@ -63,5 +72,4 @@ function getAbsoluteValue(relative, columnHeight) {
const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
const scaleHeight = columnHeight - 2 * verticalPadding
return scaleHeight * relative + verticalPadding
}
config.js
+2 -2
View File
@@ -1,8 +1,8 @@
const config = {
columnWidth: 25,
columnHeightPercentage: 0.84,
columnHeightPercentage: 0.62,
xAxisHeightPercentage: 0.08,
symptomRowHeightPercentage: 0.08,
symptomRowHeightPercentage: 0.30,
temperatureScale: {
defaultLow: 35,
defaultHigh: 38,
local-storage/index.js
+12
View File
@@ -8,6 +8,18 @@ setObvWithInitValue('tempScale', scaleObservable, {
max: config.temperatureScale.defaultHigh
})
export const unitObservable = Observable()
unitObservable.set(config.temperatureScale.units)
scaleObservable((scale) => {
const scaleRange = scale.max - scale.min
if (scaleRange <= 3) {
unitObservable.set(0.1)
} else {
unitObservable.set(0.5)
}
})
export const tempReminderObservable = Observable()
setObvWithInitValue('tempReminder', tempReminderObservable, {
enabled: false
styles/index.js
+2
View File
@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export const fontOnPrimaryColor = 'white'
export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
const defaultBottomMargin = 5
const defaultIndentation = 10