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

make graph display for incomplete mucus and cervix values

Browse Source
This commit is contained in:
mashazyu
2019-09-01 20:28:02 +02:00
committed by Sofiya Tepikin
parent 5d3950ca5c
commit 889e0e36d7
1 changed files with 104 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/day-column.js
+105 -160
View File
@@ -26,40 +26,55 @@ const label = styles.column.label
class DayColumn extends Component {
constructor(props) {
super()
const dateString = props.dateString
const columnHeight = props.columnHeight
this.getCycleDayNumber = cycleModule().getCycleDayNumber
const cycleDay = getCycleDay(dateString)
const { dateString, columnHeight, chartSymptoms } = props
const cycleDayData = getCycleDay(dateString)
this.data = {}
if (cycleDay) {
this.data = props.chartSymptoms.reduce((acc, symptom) => {
if (['bleeding', 'temperature', 'mucus', 'desire', 'note'].includes(symptom)) {
acc[symptom] = cycleDay[symptom] && cycleDay[symptom].value
if (symptom === 'temperature' && acc.temperature) {
acc.y = normalizeToScale(acc.temperature, columnHeight)
const neighbor = getInfoForNeighborColumns(dateString, columnHeight)
for (const key in neighbor) {
acc[key] = neighbor[key]
if (cycleDayData) {
this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
const symptomData = cycleDayData[symptom]
if (symptomData && !this.isSymptomExcluded(symptomData)) {
symptomDataToDisplay[symptom] = {}
switch (symptom) {
case 'temperature': {
symptomDataToDisplay[symptom].data = symptomData.value
symptomDataToDisplay.y =
normalizeToScale(symptomData.value, columnHeight)
const neighbourTemperatureValue =
getInfoForNeighborColumns(dateString, columnHeight)
for (const key in neighbourTemperatureValue) {
symptomDataToDisplay[key] = neighbourTemperatureValue[key]
}
break
}
case 'cervix':
symptomDataToDisplay[symptom].data =
(symptomData.opening + symptomData.firmness) > 0 ? 2 : 0
symptomDataToDisplay[symptom].isComplete =
this.isCervixDataComplete(symptomData)
break
case 'mucus':
symptomDataToDisplay[symptom].data =
(symptomData.feeling + symptomData.texture) > 0 ? 2 : 0
symptomDataToDisplay[symptom].isComplete =
this.isMucusDataComplete(symptomData)
break
case 'sex':
symptomDataToDisplay[symptom].data =
symptomData.solo + 2 * symptomData.partner - 1
break
case 'bleeding':
case 'desire':
symptomDataToDisplay[symptom].data = symptomData.value
break
default: // pain, mood, note
symptomDataToDisplay[symptom].data = 0
}
}
} else if (symptom === 'cervix') {
acc.cervix = cycleDay.cervix &&
(cycleDay.cervix.opening + cycleDay.cervix.firmness)
} else if (symptom === 'sex') {
// solo = 1 + partner = 2
acc.sex = cycleDay.sex &&
(cycleDay.sex.solo + 2 * cycleDay.sex.partner)
} else if (symptom === 'pain') {
// is any pain documented?
acc.pain = cycleDay.pain &&
Object.values({...cycleDay.pain}).some(x => x === true)
} else if (symptom === 'mood') {
// is mood documented?
acc.mood = cycleDay.mood &&
Object.values({...cycleDay.mood}).some(x => x === true)
}
acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
return acc
return symptomDataToDisplay
}, this.data)
}
@@ -70,6 +85,16 @@ class DayColumn extends Component {
)
}
isSymptomExcluded = (symptomData) => {
return symptomData && symptomData.exclude ? symptomData.exclude : false
}
isCervixDataComplete = (symptomData) =>
(symptomData.opening != null) && (symptomData.firmness != null)
isMucusDataComplete = (symptomData) =>
(symptomData.feeling != null) && (symptomData.texture != null)
onDaySelect = (date) => {
this.props.setDate(date)
this.props.navigate('CycleDay')
@@ -79,10 +104,50 @@ class DayColumn extends Component {
return false
}
drawSypmtom = (symptom) => {
const { symptomHeight } = this.props
const shouldDrawSymptom = this.data.hasOwnProperty(symptom)
const styleParent = [styles.symptomRow, {height: symptomHeight}]
if (shouldDrawSymptom) {
const styleSymptom = styles.iconShades[symptom]
const symptomData = this.data[symptom]
const isDataIncomplete = !symptomData.isComplete
const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
const backgroundColor = ( isMucusOrCervix && isDataIncomplete) ?
'white' : styleSymptom[symptomData.data]
const borderWidth = ( isMucusOrCervix && isDataIncomplete) ? 2 : 0
const borderColor = styleSymptom[0]
const styleChild = [styles.symptomIcon, {
backgroundColor,
borderColor,
borderWidth
}]
return (
<View style={styleParent} key={symptom}>
{shouldDrawSymptom && <View style={styleChild} />}
</View>
)
} else {
return (
<View style={styleParent} key={symptom} />
)
}
}
render() {
const columnElements = []
const dateString = this.props.dateString
const symptomHeight = this.props.symptomHeight
const { dateString,
symptomRowSymptoms,
chartHeight,
columnHeight,
xAxisHeight } = this.props
if(this.fhmAndLtl.drawLtlAt) {
const ltlLine = (<Shape
@@ -103,16 +168,12 @@ class DayColumn extends Component {
fill="red"
stroke={styles.nfpLine.stroke}
strokeWidth={styles.nfpLine.strokeWidth}
d={new Path()
.moveTo(x, x)
.lineTo(x, this.props.columnHeight)
}
d={new Path().moveTo(x, x).lineTo(x, columnHeight)}
key='fhm'
/>)
columnElements.push(fhmLine)
}
if (this.data.y) {
columnElements.push(
<DotAndLine
@@ -127,13 +188,14 @@ class DayColumn extends Component {
)
}
const cycleDayNumber = this.getCycleDayNumber(dateString)
const cycleDayNumber = cycleModule().getCycleDayNumber(dateString)
const dayDate = LocalDate.parse(dateString)
const shortDate = dayDate.dayOfMonth() === 1 ?
moment(dateString, "YYYY-MM-DD").format('MMM')
:
moment(dateString, "YYYY-MM-DD").format('Do')
const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
const cycleDayLabel = (
<Text style = {label.number}>
{cycleDayNumber ? cycleDayNumber : ' '}
@@ -149,131 +211,26 @@ class DayColumn extends Component {
<Shape
stroke={styles.column.stroke.color}
strokeWidth={styles.column.stroke.width}
d={new Path().lineTo(0, this.props.chartHeight)}
d={new Path().lineTo(0, chartHeight)}
/>
{ columnElements }
</G>
)
const symptomIconViews = {
bleeding: (
<SymptomIconView
value={this.data.bleeding}
symptomHeight={symptomHeight}
key='bleeding'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.bleeding[this.data.bleeding]}
/>
</SymptomIconView>
),
mucus: (
<SymptomIconView
value={this.data.mucus}
symptomHeight={symptomHeight}
key='mucus'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.mucus[this.data.mucus]}
/>
</SymptomIconView>
),
cervix: (
<SymptomIconView
value={this.data.cervix}
symptomHeight={symptomHeight}
key='cervix'
>
<View
{...styles.symptomIcon}
// cervix is sum of openess and firmness - fertile only when closed and hard (=0)
backgroundColor={this.data.cervix > 0 ?
styles.iconShades.cervix[2] :
styles.iconShades.cervix[0]
}
/>
</SymptomIconView>
),
sex: (
<SymptomIconView
value={this.data.sex}
symptomHeight={symptomHeight}
key='sex'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.sex[this.data.sex - 1]}
/>
</SymptomIconView>
),
desire: (
<SymptomIconView
value={this.data.desire}
symptomHeight={symptomHeight}
key='desire'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.desire[this.data.desire]}
/>
</SymptomIconView>
),
pain: (
<SymptomIconView
value={this.data.pain}
symptomHeight={symptomHeight}
key='pain'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.pain}
/>
</SymptomIconView>
),
mood: (
<SymptomIconView
value={this.data.mood}
symptomHeight={symptomHeight}
key='mood'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.mood}
/>
</SymptomIconView>
),
note: (
<SymptomIconView
value={this.data.note}
symptomHeight={symptomHeight}
key='note'
>
<View
{...styles.symptomIcon}
backgroundColor={styles.iconShades.note}
/>
</SymptomIconView>
)
}
return (
<TouchableOpacity
onPress={() => this.onDaySelect(dateString)}
activeOpacity={1}
>
<View>
{this.props.symptomRowSymptoms.map(symptomName => {
return symptomIconViews[symptomName]
})}
{symptomRowSymptoms.map(symptom => this.drawSypmtom(symptom))}
</View>
<Surface width={config.columnWidth} height={this.props.columnHeight}>
<Surface width={config.columnWidth} height={columnHeight}>
{column}
</Surface>
<View style={{height: this.props.xAxisHeight}}>
<View style={{height: xAxisHeight}}>
{cycleDayLabel}
{dateLabel}
</View>
@@ -294,18 +251,6 @@ export default connect(
)(DayColumn)
function SymptomIconView(props) {
const style = [styles.symptomRow, {height: props.symptomHeight}]
return (
<View style={style}>
{(typeof props.value === 'number' || props.value === true || typeof props.value === 'string') &&
props.children
}
</View>
)
}
function getInfoForNeighborColumns(dateString, columnHeight) {
const ret = {
rightY: null,