lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add explainer text to stats page and move more stats to modal

Browse Source
This commit is contained in:
MariaZ
2022-09-19 21:31:17 +02:00
parent 499e2d0628
commit 6c1ee3e5e2
1 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/stats.js
+55 -37
View File
@@ -1,7 +1,11 @@
import React from 'react' import React, { useState } from 'react'
import { ImageBackground, View } from 'react-native' import { ImageBackground, SafeAreaView, ScrollView, View } from 'react-native'
import { ScaledSheet } from 'react-native-size-matters' import { ScaledSheet } from 'react-native-size-matters'
import { useTranslation } from 'react-i18next'
import Button from './common/button'
import AppHelp from './common/AppHelp'
import AppModal from './common/app-modal'
import AppText from './common/app-text' import AppText from './common/app-text'
import StatsOverview from './common/StatsOverview' import StatsOverview from './common/StatsOverview'
import StatsTable from './common/StatsTable' import StatsTable from './common/StatsTable'
@@ -15,6 +19,10 @@ import { Containers, Sizes, Spacing, Typography } from '../styles'
const image = require('../assets/cycle-icon.png') const image = require('../assets/cycle-icon.png')
const Stats = () => { const Stats = () => {
const [isStatsVisible, setIsStatsVisible] = useState(false)
const { t } = useTranslation(null, { keyPrefix: 'stats' })
const cycleLengths = cycleModule().getAllCycleLengths() const cycleLengths = cycleModule().getAllCycleLengths()
const numberOfCycles = cycleLengths.length const numberOfCycles = cycleLengths.length
const hasAtLeastOneCycle = numberOfCycles >= 1 const hasAtLeastOneCycle = numberOfCycles >= 1
@@ -22,48 +30,58 @@ const Stats = () => {
? getCycleInfo(cycleLengths) ? getCycleInfo(cycleLengths)
: { minimum: '—', maximum: '—', stdDeviation: '—' } : { minimum: '—', maximum: '—', stdDeviation: '—' }
const statsData = [ const statsData = [
[cycleData.minimum, labels.minLabel], [cycleData.minimum, t('min')],
[cycleData.maximum, labels.maxLabel], [cycleData.maximum, t('max')],
[cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel], [
[numberOfCycles, labels.basisOfStatsEnd], cycleData.stdDeviation ? cycleData.stdDeviation : '—',
t('standard_deviation'),
],
[numberOfCycles, t('completed_cycles')],
] ]
return ( return (
<View style={styles.pageContainer}> <SafeAreaView style={styles.pageContainer}>
<View style={styles.overviewContainer}> <ScrollView contentContainerStyle={styles.overviewContainer}>
<AppText>{labels.cycleLengthExplainer}</AppText> <AppText>{t('cycle_length_explainer')}</AppText>
{!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>} {!hasAtLeastOneCycle && <AppText>{t('no_data')}</AppText>}
{hasAtLeastOneCycle && ( {hasAtLeastOneCycle && (
<View style={styles.container}> <>
<View style={styles.columnLeft}> <View style={styles.container}>
<ImageBackground <View style={styles.columnLeft}>
source={image} <ImageBackground
imageStyle={styles.image} source={image}
style={styles.imageContainter} imageStyle={styles.image}
> style={styles.imageContainter}
<AppText
numberOfLines={1}
ellipsizeMode="clip"
style={styles.accentPurpleGiant}
> >
{cycleData.mean} <AppText
</AppText> numberOfLines={1}
<AppText style={styles.accentPurpleHuge}> ellipsizeMode="clip"
{labels.daysLabel} style={styles.accentPurpleGiant}
</AppText> >
</ImageBackground> {cycleData.mean}
<AppText style={styles.accentOrange}> </AppText>
{labels.averageLabel} <AppText style={styles.accentPurpleHuge}>{t('days')}</AppText>
</AppText> </ImageBackground>
<AppText style={styles.accentOrange}>{t('average')}</AppText>
</View>
<View style={styles.columnRight}>
<StatsOverview data={statsData} />
</View>
</View> </View>
<View style={styles.columnRight}> <Button isCTA onPress={() => setIsStatsVisible(true)}>
<StatsOverview data={statsData} /> {t('show_stats')}
</View> </Button>
</View> <AppHelp text={t('standard_deviation_help')} />
</>
)} )}
</View> </ScrollView>
<StatsTable />
</View> {isStatsVisible && (
<AppModal onClose={() => setIsStatsVisible(false)}>
<StatsTable onClose={() => setIsStatsVisible(false)} />
</AppModal>
)}
</SafeAreaView>
) )
} }