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

Add more data to stats

Browse Source
This commit is contained in:
Maria Zadnepryanets
2022-09-19 14:23:55 +00:00
parent c847270159
commit 974d081f40
10 changed files with 229 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/table.js → components/common/StatsOverview.js
+8 -17
View File
@@ -6,14 +6,12 @@ import AppText from './app-text'
import { Sizes, Spacing, Typography } from '../../styles'
const Table = ({ tableContent }) => {
return tableContent.map((rowContent, i) => (
<Row key={i} rowContent={rowContent} />
))
const StatsOverview = ({ data }) => {
return data.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
}
Table.propTypes = {
tableContent: PropTypes.array.isRequired,
StatsOverview.propTypes = {
data: PropTypes.array.isRequired,
}
const Row = ({ rowContent }) => {
@@ -65,18 +63,11 @@ const styles = StyleSheet.create({
},
cellLeft: {
alignItems: 'flex-end',
flex: 5,
flex: 3,
justifyContent: 'center',
},
cellRight: {
flex: 5,
justifyContent: 'center',
},
row: {
flexDirection: 'row',
marginBottom: Spacing.tiny,
marginLeft: Spacing.tiny,
},
cellRight: { flex: 5 },
row: { flexDirection: 'row' },
})
export default Table
export default StatsOverview
components/common/StatsTable.js
+107
View File
@@ -0,0 +1,107 @@
import React from 'react'
import { FlatList, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import AppText from './app-text'
import cycleModule from '../../lib/cycle'
import { Spacing, Typography, Colors } from '../../styles'
import { humanizeDate } from '../helpers/format-date'
const Item = ({ data }) => {
const { t } = useTranslation(null, { keyPrefix: 'plurals' })
if (!data) return false
const { date, cycleLength, bleedingLength } = data
return (
<View style={styles.row}>
<View style={styles.accentCell}>
<AppText>{humanizeDate(date)}</AppText>
</View>
<View style={styles.cell}>
<AppText>{t('day', { count: cycleLength })}</AppText>
</View>
<View style={styles.cell}>
<AppText>{t('day', { count: bleedingLength })}</AppText>
</View>
</View>
)
}
Item.propTypes = {
data: PropTypes.object.isRequired,
}
const StatsTable = () => {
const renderItem = ({ item }) => <Item data={item} />
const data = cycleModule().getStats()
if (!data || data.length === 0) return false
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.date}
ItemSeparatorComponent={ItemDivider}
ListHeaderComponent={FlatListHeader}
ListHeaderComponentStyle={styles.headerDivider}
stickyHeaderIndices={[0]}
contentContainerStyle={styles.container}
/>
)
}
const ItemDivider = () => <View style={styles.divider} />
const FlatListHeader = () => (
<View style={styles.row}>
<View style={styles.accentCell}>
<AppText style={styles.header}>{'Cycle Start'}</AppText>
</View>
<View style={styles.cell}>
<AppText style={styles.header}>{'Cycle Length'}</AppText>
</View>
<View style={styles.cell}>
<AppText style={styles.header}>{'Bleeding'}</AppText>
</View>
</View>
)
const styles = StyleSheet.create({
divider: {
height: 1,
width: '100%',
backgroundColor: Colors.grey,
},
header: {
...Typography.accentOrange,
paddingVertical: Spacing.small,
},
headerDivider: {
borderBottomColor: Colors.purple,
borderBottomWidth: 2,
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: Spacing.tiny,
backgroundColor: Colors.turquoiseLight,
},
cell: {
flex: 2,
justifyContent: 'center',
},
accentCell: {
flex: 3,
justifyContent: 'center',
},
container: {
paddingHorizontal: Spacing.base,
},
})
export default StatsTable
components/common/app-page.js
+2 -5
View File
@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
import AppText from '../common/app-text'
import { Colors, Typography } from '../../styles'
import { Colors, Containers, Typography } from '../../styles'
const AppPage = ({
children,
@@ -35,10 +35,7 @@ AppPage.propTypes = {
}
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.turquoiseLight,
flex: 1,
},
container: { ...Containers.pageContainer },
scrollView: {
backgroundColor: Colors.turquoiseLight,
flexGrow: 1,
components/common/segment.js
+3 -8
View File
@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
import AppText from './app-text'
import { Colors, Spacing, Typography } from '../../styles'
import { Colors, Containers, Spacing, Typography } from '../../styles'
const Segment = ({ children, last, title }) => {
const containerStyle = last ? styles.containerLast : styles.container
@@ -25,21 +25,16 @@ Segment.propTypes = {
title: PropTypes.string,
}
const segmentContainer = {
marginHorizontal: Spacing.base,
marginBottom: Spacing.base,
}
const styles = StyleSheet.create({
container: {
borderStyle: 'solid',
borderBottomWidth: 1,
borderBottomColor: Colors.greyLight,
paddingBottom: Spacing.base,
...segmentContainer,
...Containers.segmentContainer,
},
containerLast: {
...segmentContainer,
...Containers.segmentContainer,
},
title: {
...Typography.subtitle,
components/helpers/format-date.js
+15
View File
@@ -22,3 +22,18 @@ export function dateToTitle(dateString) {
? labels.today
: moment(dateString).format('ddd DD. MMM YY')
}
export function humanizeDate(dateString) {
if (!dateString) return ''
const today = LocalDate.now()
try {
const dateToDisplay = LocalDate.parse(dateString)
return today.equals(dateToDisplay)
? labels.today
: moment(dateString).format('DD. MMM YY')
} catch (e) {
return ''
}
}
components/stats.js
+26 -22
View File
@@ -2,16 +2,15 @@ import React from 'react'
import { ImageBackground, View } from 'react-native'
import { ScaledSheet } from 'react-native-size-matters'
import AppPage from './common/app-page'
import AppText from './common/app-text'
import Segment from './common/segment'
import Table from './common/table'
import StatsOverview from './common/StatsOverview'
import StatsTable from './common/StatsTable'
import cycleModule from '../lib/cycle'
import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
import {stats as labels} from '../i18n/en/labels'
import { getCycleLengthStats as getCycleInfo } from '../lib/cycle-length'
import { stats as labels } from '../i18n/en/labels'
import { Sizes, Spacing, Typography } from '../styles'
import { Containers, Sizes, Spacing, Typography } from '../styles'
const image = require('../assets/cycle-icon.png')
@@ -19,21 +18,22 @@ const Stats = () => {
const cycleLengths = cycleModule().getAllCycleLengths()
const numberOfCycles = cycleLengths.length
const hasAtLeastOneCycle = numberOfCycles >= 1
const cycleData = hasAtLeastOneCycle ? getCycleInfo(cycleLengths)
const cycleData = hasAtLeastOneCycle
? getCycleInfo(cycleLengths)
: { minimum: '—', maximum: '—', stdDeviation: '—' }
const statsData = [
[cycleData.minimum, labels.minLabel],
[cycleData.maximum, labels.maxLabel],
[cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel],
[numberOfCycles, labels.basisOfStatsEnd]
[numberOfCycles, labels.basisOfStatsEnd],
]
return (
<AppPage contentContainerStyle={styles.pageContainer}>
<Segment last style={styles.pageContainer}>
<View style={styles.pageContainer}>
<View style={styles.overviewContainer}>
<AppText>{labels.cycleLengthExplainer}</AppText>
{!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>}
{hasAtLeastOneCycle &&
{hasAtLeastOneCycle && (
<View style={styles.container}>
<View style={styles.columnLeft}>
<ImageBackground
@@ -57,12 +57,13 @@ const Stats = () => {
</AppText>
</View>
<View style={styles.columnRight}>
<Table tableContent={statsData} />
<StatsOverview data={statsData} />
</View>
</View>
}
</Segment>
</AppPage>
)}
</View>
<StatsTable />
</View>
)
}
@@ -77,25 +78,24 @@ const styles = ScaledSheet.create({
},
accentPurpleGiant: {
...Typography.accentPurpleGiant,
marginTop: Spacing.base * (-2),
marginTop: Spacing.base * -2,
},
accentPurpleHuge: {
...Typography.accentPurpleHuge,
marginTop: Spacing.base * (-1),
marginTop: Spacing.base * -1,
},
container: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: Spacing.base
},
columnLeft: {
...column,
flex: 2,
flex: 3,
},
columnRight: {
...column,
flex: 3,
flex: 5,
paddingTop: Spacing.small,
},
image: {
@@ -105,9 +105,13 @@ const styles = ScaledSheet.create({
paddingTop: Spacing.large * 2.5,
marginBottom: Spacing.large,
},
overviewContainer: {
paddingHorizontal: Spacing.base,
paddingTop: Spacing.base,
},
pageContainer: {
marginTop: Spacing.base * 2,
}
...Containers.pageContainer,
},
})
export default Stats
i18n/en.json
+4
View File
@@ -60,5 +60,9 @@
"text": "You can read through the source code of drip. to ensure the given information is correct. The source code is like a recipe: It tells you how much and what kind of ingredients you need and how you prepare them to cook a tasty meal or program a funky app.\n\nBuon appetito!"
}
}
},
"plurals": {
"day": "{{count}} day",
"day_plural": "{{count}} days"
}
}
lib/cycle.js
+23 -3
View File
@@ -3,6 +3,8 @@ import { getCycleLengthStats } from './cycle-length'
const LocalDate = joda.LocalDate
const DAYS = joda.ChronoUnit.DAYS
const toJSON = (realmObj) => JSON.parse(JSON.stringify(realmObj))
export default function config(opts) {
let bleedingDaysSortedByDate
let cycleStartsSortedByDate
@@ -14,9 +16,13 @@ export default function config(opts) {
if (!opts) {
// we only want to require (and run) the db module
// when not running the tests
bleedingDaysSortedByDate = require('../db').getBleedingDaysSortedByDate()
cycleStartsSortedByDate = require('../db').getCycleStartsSortedByDate()
cycleDaysSortedByDate = require('../db').getCycleDaysSortedByDate()
bleedingDaysSortedByDate = toJSON(
require('../db').getBleedingDaysSortedByDate()
)
cycleStartsSortedByDate = toJSON(
require('../db').getCycleStartsSortedByDate()
)
cycleDaysSortedByDate = toJSON(require('../db').getCycleDaysSortedByDate())
maxBreakInBleeding = 1
maxCycleLength = 99
minCyclesForPrediction = 3
@@ -222,6 +228,19 @@ export default function config(opts) {
return predictedMenses
}
const getStats = () =>
cycleStartsSortedByDate.map((day, i) => {
const today = getTodayDate()
const cycleLength =
i === 0 ? getCycleDayNumber(today) : getAllCycleLengths()[i - 1]
return {
date: day.date,
cycleLength,
bleedingLength: ++getMensesDaysRightAfter(day).length,
}
})
return {
getCycleDayNumber,
getCycleForDay,
@@ -232,5 +251,6 @@ export default function config(opts) {
isMensesStart,
getMensesDaysRightAfter,
getCycleByStartDay,
getStats,
}
}
styles/containers.js
+14 -6
View File
@@ -9,7 +9,7 @@ export default {
marginTop: Spacing.small,
marginRight: Spacing.small,
paddingHorizontal: Spacing.small,
paddingVertical: Spacing.tiny
paddingVertical: Spacing.tiny,
},
boxActive: {
backgroundColor: Colors.orange,
@@ -17,17 +17,25 @@ export default {
centerItems: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
justifyContent: 'center',
},
pageContainer: {
backgroundColor: Colors.turquoiseLight,
flex: 1,
},
rowContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between'
justifyContent: 'space-between',
},
selectGroupContainer: {
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
marginVertical: Spacing.small
}
}
marginVertical: Spacing.small,
},
segmentContainer: {
marginHorizontal: Spacing.base,
marginBottom: Spacing.base,
},
}
test/helpers/format-date.spec.js
+27
View File
@@ -0,0 +1,27 @@
import { humanizeDate } from '../../components/helpers/format-date'
describe('humanizeDate', () => {
test('if receives null, returns empty string', () => {
const result = humanizeDate(null)
expect(result).toEqual('')
})
test('if receives undefined, returns empty string', () => {
const result = humanizeDate(undefined)
expect(result).toEqual('')
})
test('if receives incorrectly formatted date, returns empty string', () => {
const result = humanizeDate('abc')
expect(result).toEqual('')
})
test('if receives correct date string, returns date in humanized format', () => {
const result = humanizeDate('2022-01-07')
expect(result).toEqual('07. Jan 22')
})
})