extracts stats strings and improves copy

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