Merge branch '302-bug-stats-crash' into 'master'

Resolve "bug: stats crash"

Closes #302

See merge request bloodyhealth/drip!177

components/stats.js

@@ -9,11 +9,12 @@ import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from '../i18n/en/labels'
 import AppText from './app-text'
+import FramedSegment from './framed-segment'
 
 export default class Stats extends Component {
   render() {
     const cycleLengths = cycleModule().getAllCycleLengths()
-    const atLeastOneCycle = cycleLengths.length > 1
+    const atLeastOneCycle = cycleLengths.length >= 1
     let numberOfCycles
     let cycleInfo
     if (atLeastOneCycle) {
@@ -24,44 +25,53 @@ export default class Stats extends Component {
     }
     return (
       <ScrollView>
-        <View style={[styles.textWrappingView]}>
-          <AppText style={styles.title}>{labels.cycleLengthTitle}</AppText>
-          <AppText style={styles.paragraph}>{labels.cycleLengthExplainer}</AppText>
+        <FramedSegment
+          style={styles.framedSegmentLast}
+          title={labels.cycleLengthTitle}
+        >
+          <AppText style={styles.paragraph}>
+            {labels.cycleLengthExplainer}
+          </AppText>
+
           {!atLeastOneCycle &&
             <AppText>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <AppText>
-              {labels.oneCycleStats}
+            <View style={[styles.statsRow, styles.paragraph]}>
+              <AppText>{labels.oneCycleStats}</AppText>
               <AppText style={styles.emphasis}> {cycleLengths[0]} </AppText>
-              {labels.daysLabel + '.'}
-            </AppText>
+              <AppText>{labels.daysLabel}.</AppText>
+            </View>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <View style={styles.statsRow}>
-              <AppText style={[styles.statsLabelLeft, styles.emphasis]}>{labels.averageLabel}</AppText>
-              <AppText style={[styles.statsLabelRight, styles.emphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+            <View style={styles.paragraph}>
+              <AppText style={styles.emphasis}>
+                {labels.averageLabel}: {cycleInfo.mean} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={styles.statsRow}>
-              <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
+            <View>
+              <AppText>
+                {labels.minLabel}: {cycleInfo.minimum} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={styles.statsRow}>
-              <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
+            <View>
+              <AppText>
+                {labels.maxLabel}: {cycleInfo.maximum} {labels.daysLabel}
+              </AppText>
             </View>
-            <View style={[styles.statsRow, styles.paragraph]}>
-              <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
-              <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
+            <View style={styles.paragraph}>
+              <AppText>
+                {labels.stdLabel}: {cycleInfo.stdDeviation} {labels.daysLabel}
+              </AppText>
             </View>
-            <AppText>
-              {labels.basisOfStatsBeginning}
+            <View style={styles.statsRow}>
+              <AppText>{labels.basisOfStatsBeginning}</AppText>
               <AppText style={styles.emphasis}> {numberOfCycles} </AppText>
-              {labels.basisOfStatsEnd}
-            </AppText>
+              <AppText>{labels.basisOfStatsEnd}</AppText>
+            </View>
           </View>}
-        </View>
+        </FramedSegment>
       </ScrollView>
     )
   }
-}
\ No newline at end of file
+}

styles/index.js

@@ -45,7 +45,8 @@ export default StyleSheet.create({
   },
   emphasis: {
     fontWeight: 'bold',
-    fontFamily: textFontBold
+    fontFamily: textFontBold,
+    color: secondaryColor,
   },
   link: {
     color: cycleDayColor,
@@ -308,17 +309,7 @@ export default StyleSheet.create({
   },
   statsRow: {
     flexDirection: 'row',
-    width: '100%'
-  },
-  statsLabelLeft: {
-    width: '60%',
-    textAlign: 'left',
-    textAlignVertical: 'center',
-    marginLeft: 10
-  },
-  statsLabelRight: {
-    textAlign: 'left',
-    textAlignVertical: 'center'
+    flexWrap: 'wrap'
   },
   menuLabel: {
     fontSize: 15,