adds stats button on home screen, and creates stats screen, length still needs to be calculated

app.js

@@ -5,6 +5,7 @@ import Calendar from './components/calendar'
 import CycleDay from './components/cycle-day'
 import Chart from './components/chart/chart'
 import Settings from './components/settings'
+import Stats from './components/stats'
 
 // this is until react native fixes this bugg, see
 // https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
@@ -16,5 +17,6 @@ export default createStackNavigator({
   calendar: { screen: Calendar },
   cycleDay: { screen: CycleDay },
   chart: { screen: Chart },
-  settings: { screen: Settings }
+  settings: { screen: Settings },
+  stats: { screen: Stats}
 })

components/home.js

@@ -87,6 +87,12 @@ export default class Home extends Component {
               title="delete everything">
             </Button>
           </View>
+          <View style={styles.homeButton}>
+            <Button
+              onPress={() => navigate('stats')}
+              title="Go to stats">
+            </Button>
+          </View>
         </View>
       </ScrollView>
     )

components/stats.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  ScrollView
+} from 'react-native'
+import { LocalDate } from 'js-joda'
+import styles from '../styles/index'
+import cycleModule from '../lib/cycle'
+import getPeriodInfo from '../lib/period-length'
+
+export default class Stats extends Component {
+  constructor(props) {
+    super(props)
+    const lastMensStart = cycleModule().getLastMensesStart(
+      LocalDate.now().toString()
+    )
+    const completedCycles = cycleModule().getCyclesBefore(lastMensStart)
+    this.numberOfCycles = completedCycles.length
+    // TODO get first days, compare with joda
+    const periodLengths = completedCycles.map(cycle => {
+      return cycle.length
+    })
+    // until this point
+    this.periodInfo = getPeriodInfo(periodLengths)
+
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <Text style={styles.welcome}>based on {this.numberOfCycles} periods:</Text>
+        <Text style={styles.welcome}>min: {this.periodInfo.minimum}</Text>
+        <Text style={styles.welcome}>mean: {this.periodInfo.mean}</Text>
+        <Text style={styles.welcome}>max: {this.periodInfo.maximum}</Text>
+        <Text style={styles.welcome}>median: {this.periodInfo.median}</Text>
+        <Text style={styles.welcome}>standard deviation: {this.periodInfo.stdDeviation}</Text>
+      </ScrollView>
+    )
+  }
+}

lib/cycle.js

@@ -134,6 +134,7 @@ export default function config(opts) {
     getCycleDayNumber,
     getCycleForDay,
     getPreviousCycle,
-    getCyclesBefore
+    getCyclesBefore,
+    getLastMensesStart
   }
 }