From 392e09fb8d39c97cac7fb1af35810ac6e4e34d9f Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 15 Aug 2018 18:49:45 +0200
Subject: [PATCH] extracts stats strings and improves copy
---
components/labels.js | 11 +++++++++
components/stats.js | 56 +++++++++++++++++++++++++++++---------------
styles/index.js | 20 ++++++++++++++--
3 files changed, 66 insertions(+), 21 deletions(-)
diff --git a/components/labels.js b/components/labels.js
index cd361c84..1c0cb4fe 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 4021fdee..f3f136c7 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 fde1700a..6e924207 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'
}
--
GitLab