diff --git a/components/labels.js b/components/labels.js index cd361c8499803cd2d6cd83d1d961a710891646c7..1c0cb4fe37815525175a4b4fbed0cbe1323c5356 100644 --- a/components/labels.js +++ b/components/labels.js @@ -7,4 +7,15 @@ export const settings = { exportTitle: 'My Drip data export', exportSubject: 'My Drip data export', buttonLabel: 'Export data' +} + +export const stats = { + emptyStats: 'At least one completed cycle is needed to present you with stats here.', + oneCycleStats: (number) => `You have documented one cycle of ${number} days.`, + getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`, + daysLabel: 'days', + averageLabel: 'Average cycle length', + minLabel: 'Shortest cycle', + maxLabel: 'Longest cycle', + stdLabel: 'Standard deviation' } \ No newline at end of file diff --git a/components/stats.js b/components/stats.js index 4021fdee0af44ab2fb229e565988014ba4a4d99f..f3f136c78b2cbf5da4238590a7f76dad7b979526 100644 --- a/components/stats.js +++ b/components/stats.js @@ -8,15 +8,50 @@ import { LocalDate, ChronoUnit } from 'js-joda' import styles from '../styles/index' import cycleModule from '../lib/cycle' import getCycleInfo from '../lib/cycle-length' +import {stats as labels} from './labels' export default class Stats extends Component { render() { const allMensesStarts = cycleModule().getAllMensesStarts() - const statsText = determineStatsText(allMensesStarts) + const atLeastOneCycle = allMensesStarts.length > 1 + let cycleLengths + let numberOfCycles + let cycleInfo + if (atLeastOneCycle) { + cycleLengths = getCycleLength(allMensesStarts) + numberOfCycles = cycleLengths.length + if (numberOfCycles > 1) { + cycleInfo = getCycleInfo(cycleLengths) + } + } return ( <ScrollView> <View> - <Text style={styles.stats}>{statsText}</Text> + {!atLeastOneCycle && + <Text style={styles.statsIntro}>{labels.emptyStats}</Text> + } + {atLeastOneCycle && numberOfCycles === 1 && + <Text style={styles.statsIntro}>{labels.oneCycleStats(cycleLengths[0])}</Text> + } + {atLeastOneCycle && numberOfCycles > 1 && <View> + <Text style={styles.statsIntro}>{labels.getBasisOfStats(numberOfCycles)}</Text> + <View style={styles.statsRow}> + <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text> + <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text> + </View> + <View style={styles.statsRow}> + <Text style={styles.statsLabelLeft}>{labels.minLabel}</Text> + <Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text> + </View> + <View style={styles.statsRow}> + <Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text> + <Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text> + </View> + <View style={styles.statsRow}> + <Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text> + <Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text> + </View> + </View>} </View> </ScrollView> ) @@ -31,21 +66,4 @@ function getCycleLength(cycleStartDates) { cycleLengths.push(cycleStart.until(nextCycleStart, ChronoUnit.DAYS)) } return cycleLengths -} - -function determineStatsText(allMensesStarts) { - const emptyStats = 'At least one completed cycle is needed to present you with stats here.' - if (allMensesStarts.length < 2) { - return emptyStats - } else { - const cycleLengths = getCycleLength(allMensesStarts) - const numberOfCycles = cycleLengths.length - if (numberOfCycles === 1) { - return `You have documented one cycle of ${cycleLengths[0]} days.` - } - const cycleInfo = getCycleInfo(cycleLengths) - const statsText = `Stats are based on ${numberOfCycles} completed cycles.\n\n\ - Average cycle length: ${cycleInfo.mean} days\n\nShortest cycle: ${cycleInfo.minimum} days\nLongest cycle: ${cycleInfo.maximum} days\nMedian length (meaning 50% of cycles are of this length or shorter): ${cycleInfo.median} days\nStandard deviation: ${cycleInfo.stdDeviation}` - return statsText - } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index fde1700a6900a5120d887c67c0830a20068bbf71..6e924207d24633400b872e9984e4e25cdef26063 100644 --- a/styles/index.js +++ b/styles/index.js @@ -83,9 +83,25 @@ export default StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto' }, - stats: { + statsIntro: { + fontSize: 18, + margin: 10, + textAlign: 'left', + textAlignVertical: 'center' + }, + statsRow: { + flexDirection: 'row', + width: '100%' + }, + statsLabelLeft: { + fontSize: 18, + width: '60%', + textAlign: 'left', + textAlignVertical: 'center', + marginLeft: 10 + }, + statsLabelRight: { fontSize: 18, - margin: 30, textAlign: 'left', textAlignVertical: 'center' }