extracts stats strings and improves copy

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'
 }

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
-  }
 }

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'
   }