Chore: add translations to stats

components/stats/StatsOverview.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import AppText from './app-text'
+import AppText from '../common/app-text'
 
 import { Sizes, Spacing, Typography } from '../../styles'
 

components/stats/StatsTable.js

@@ -3,7 +3,7 @@ import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-import AppText from './app-text'
+import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { Spacing, Typography, Colors } from '../../styles'

components/stats/index.js

@@ -1,39 +1,45 @@
 import React from 'react'
 import { ImageBackground, View } from 'react-native'
 import { ScaledSheet } from 'react-native-size-matters'
+import { useTranslation } from 'react-i18next'
 
-import AppText from './common/app-text'
+import AppText from '../common/app-text'
-import StatsOverview from './common/StatsOverview'
+import StatsOverview from './StatsOverview'
-import StatsTable from './common/StatsTable'
+import StatsTable from './StatsTable'
 
-import cycleModule from '../lib/cycle'
+import cycleModule from '../../lib/cycle'
-import { getCycleLengthStats as getCycleInfo } from '../lib/cycle-length'
+import { getCycleLengthStats as getCycleInfo } from '../../lib/cycle-length'
-import { stats as labels } from '../i18n/en/labels'
 
-import { Containers, Sizes, Spacing, Typography } from '../styles'
+import { Containers, Sizes, Spacing, Typography } from '../../styles'
 
-const image = require('../assets/cycle-icon.png')
+const image = require('../../assets/cycle-icon.png')
 
 const Stats = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
   const cycleLengths = cycleModule().getAllCycleLengths()
   const numberOfCycles = cycleLengths.length
-  const hasAtLeastOneCycle = numberOfCycles >= 1
+  const cycleData =
-  const cycleData = hasAtLeastOneCycle
+    numberOfCycles > 0
-    ? getCycleInfo(cycleLengths)
+      ? getCycleInfo(cycleLengths)
-    : { minimum: '—', maximum: '—', stdDeviation: '—' }
+      : { minimum: '—', maximum: '—', stdDeviation: '—' }
+  const standardDeviation = cycleData.stdDeviation
+    ? cycleData.stdDeviation
+    : '—'
   const statsData = [
-    [cycleData.minimum, labels.minLabel],
+    [cycleData.minimum, t('overview.min')],
-    [cycleData.maximum, labels.maxLabel],
+    [cycleData.maximum, t('overview.max')],
-    [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel],
+    [standardDeviation, t('overview.standardDeviation')],
-    [numberOfCycles, labels.basisOfStatsEnd],
+    [numberOfCycles, t('overview.completedCycles')],
   ]
 
   return (
     <View style={styles.pageContainer}>
       <View style={styles.overviewContainer}>
-        <AppText>{labels.cycleLengthExplainer}</AppText>
+        <AppText>{t('intro')}</AppText>
-        {!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>}
+        {numberOfCycles === 0 ? (
-        {hasAtLeastOneCycle && (
+          <AppText>{t('noData')}</AppText>
+        ) : (
           <View style={styles.container}>
             <View style={styles.columnLeft}>
               <ImageBackground
@@ -49,11 +55,11 @@ const Stats = () => {
                   {cycleData.mean}
                 </AppText>
                 <AppText style={styles.accentPurpleHuge}>
-                  {labels.daysLabel}
+                  {t('overview.days')}
                 </AppText>
               </ImageBackground>
               <AppText style={styles.accentOrange}>
-                {labels.averageLabel}
+                {t('overview.average')}
               </AppText>
             </View>
             <View style={styles.columnRight}>

i18n/en.json

@@ -61,6 +61,25 @@
       }
     }
   },
+  "stats": {
+    "noData": "At least one completed cycle is needed to display stats.",
+    "intro": "Basic statistics about the length of your cycles.",
+    "overview": {
+      "average": "Average cycle",
+      "days": "days",
+      "min": "Shortest",
+      "max": "Longest",
+      "standardDeviation": "Standard\ndeviation",
+      "completedCycles": "completed\ncycles"
+    },
+    "showStats": "Show period details",
+    "details": {
+      "cycleStart": "Cycle start",
+      "cycleLength": "Cycle length",
+      "bleedingDays": "Bleeding"
+    },
+    "footnote": "Based on the standard deviation of all your tracked periods drip. calculates a range for the starting day of the upcoming 3 periods. The range will be 3 days if your standard deviation is smaller than 1.5 and 5 days if the value is bigger.\n\nThe standard deviation tells you how much the length of your periods vary, 0 means all your periods are exactly the same length and the bigger the value the more the period length varies."
+  },
   "plurals": {
     "day": "{{count}} day",
     "day_plural": "{{count}} days"