From 9d6c0aa65c3fcc18fdb43efa6d35f01a66454cf2 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Wed, 22 Apr 2020 21:41:25 +0200 Subject: [PATCH] Introduces Stats page redesign --- assets/cycle-icon.png | Bin 0 -> 11866 bytes components/common/table.js | 79 +++++++++++++++++ components/stats.js | 175 ++++++++++++++++++++++--------------- i18n/en/labels.js | 15 ++-- styles/typography.js | 46 +++++++++- 5 files changed, 235 insertions(+), 80 deletions(-) create mode 100644 assets/cycle-icon.png create mode 100644 components/common/table.js diff --git a/assets/cycle-icon.png b/assets/cycle-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..aa225b33c335eb00adf59f5e181743f1439a9ead GIT binary patch literal 11866 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 ZLvof87yEv`K6nlska{BrFA~%D{U5E>fP?@5 literal 0 HcmV?d00001 diff --git a/components/common/table.js b/components/common/table.js new file mode 100644 index 0000000..f1e024f --- /dev/null +++ b/components/common/table.js @@ -0,0 +1,79 @@ +import React from 'react' +import { StyleSheet, View } from 'react-native' +import PropTypes from 'prop-types' + +import AppText from './app-text' + +import { Spacing, Typography } from '../../styles/redesign' + +const Table = ({ tableContent }) => { + return ( + tableContent.map((rowContent, i) => ) + ) +} + +Table.propTypes = { + tableContent: PropTypes.array.isRequired +} + +const Row = ({ rowContent }) => { + return( + + + + + ) +} + +Row.propTypes = { + rowContent: PropTypes.array.isRequired +} + +const Cell = ({ content, isLeft }) => { + const styleContainer = isLeft ? styles.cellLeft : styles.cellRight + const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange + const numberOfLines = isLeft ? 1 : 2 + const ellipsizeMode = isLeft ? 'clip' : 'tail' + + return( + + + {content} + + + ) +} + +Cell.propTypes = { + content: PropTypes.node.isRequired, + isLeft: PropTypes.bool +} + +const styles = StyleSheet.create({ + accentOrange: { + ...Typography.accentOrange + }, + accentPurpleBig: { + ...Typography.accentPurpleBig, + marginRight: Spacing.base + }, + cellLeft: { + alignItems: 'flex-end', + flex: 5, + justifyContent: 'center' + }, + cellRight: { + flex: 6, + justifyContent: 'center' + }, + row: { + flexDirection: 'row', + marginBottom: Spacing.tiny + } +}) + +export default Table \ No newline at end of file diff --git a/components/stats.js b/components/stats.js index a89ddcc..213ae7d 100644 --- a/components/stats.js +++ b/components/stats.js @@ -1,77 +1,114 @@ -import React, { Component } from 'react' -import { - View, - ScrollView -} from 'react-native' +import React from 'react' +import { ImageBackground, StyleSheet, View } from 'react-native' + +import AppPage from './common/app-page' +import AppText from './common/app-text' +import Segment from './common/segment' +import Table from './common/table' -import styles from '../styles/index' import cycleModule from '../lib/cycle' import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length' import {stats as labels} from '../i18n/en/labels' -import AppText from './common/app-text' -import Segment from './common/segment' -export default class Stats extends Component { - render() { - const cycleLengths = cycleModule().getAllCycleLengths() - const atLeastOneCycle = cycleLengths.length >= 1 - let numberOfCycles - let cycleInfo - if (atLeastOneCycle) { - numberOfCycles = cycleLengths.length - if (numberOfCycles > 1) { - cycleInfo = getCycleInfo(cycleLengths) - } - } - return ( - - - - {labels.cycleLengthExplainer} - +import { Sizes, Spacing, Typography } from '../styles/redesign' - {!atLeastOneCycle && - {labels.emptyStats} - } - {atLeastOneCycle && numberOfCycles === 1 && - - {labels.oneCycleStats} - {cycleLengths[0]} - {labels.daysLabel}. - - } - {atLeastOneCycle && numberOfCycles > 1 && - - - {labels.averageLabel}: {cycleInfo.mean} {labels.daysLabel} - - - - - {labels.minLabel}: {cycleInfo.minimum} {labels.daysLabel} - - - - - {labels.maxLabel}: {cycleInfo.maximum} {labels.daysLabel} - - - - - {labels.stdLabel}: {cycleInfo.stdDeviation} {labels.daysLabel} - - - - {labels.basisOfStatsBeginning} - {numberOfCycles} - {labels.basisOfStatsEnd} - - } - - - ) +const image = require('../assets/cycle-icon.png') + +const Stats = () => { + const cycleLengths = cycleModule().getAllCycleLengths() + const atLeastOneCycle = cycleLengths.length >= 1 + const numberOfCycles = cycleLengths.length + let cycleData + if (atLeastOneCycle) { + cycleData = getCycleInfo(cycleLengths) } + + const statsData = [ + [atLeastOneCycle ? cycleData.minimum : 0, labels.minLabel], + [atLeastOneCycle ? cycleData.maximum : 0, labels.maxLabel], + [atLeastOneCycle && cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel], + [numberOfCycles, labels.basisOfStatsEnd] + ] + return ( + + + {labels.cycleLengthExplainer} + {!atLeastOneCycle && {labels.emptyStats}} + {atLeastOneCycle && + + + + + {cycleData.mean} + + + {labels.daysLabel} + + + + {labels.averageLabel} + + + + + + + } + + + ) } + +const column = { + flexDirection: 'column' +} + +const styles = StyleSheet.create({ + accentOrange: { + ...Typography.accentOrange + }, + accentPurpleGiant: { + ...Typography.accentPurpleGiant, + marginVertical: Sizes.giant * (-0.5) + }, + accentPurpleHuge: { + ...Typography.accentPurpleHuge, + marginRight: Spacing.base + }, + container: { + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + }, + columnLeft: { + ...column, + flex: 4 + }, + columnRight: { + ...column, + flex: 5 + }, + image: { + height: Sizes.huge * 3, + marginLeft: Sizes.huge / 2, + resizeMode: 'contain', + width: Sizes.huge * 3 + }, + imageContainter: { + paddingTop: Sizes.huge, + marginBottom: Sizes.huge / 4 + }, + pageContainer: { + marginVertical: Spacing.large + } +}) + +export default Stats \ No newline at end of file diff --git a/i18n/en/labels.js b/i18n/en/labels.js index 4dd59fe..3b5e8df 100644 --- a/i18n/en/labels.js +++ b/i18n/en/labels.js @@ -61,19 +61,14 @@ export const menuTitles = { } export const stats = { - cycleLengthTitle: 'Cycle length', cycleLengthExplainer: 'Basic statistics about the length of your cycles.', emptyStats: 'At least one completed cycle is needed to display stats.', - //oneCycleStats: (number) => `You have documented one cycle of ${number} days.`, - oneCycleStats: 'You have documented one cycle of', daysLabel: 'days', - //getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`, - basisOfStatsBeginning: 'Stats are based on', - basisOfStatsEnd: 'completed cycles.', - averageLabel: 'Average cycle length', - minLabel: 'Shortest cycle', - maxLabel: 'Longest cycle', - stdLabel: 'Standard deviation' + basisOfStatsEnd: 'completed\ncycles', + averageLabel: 'Average cycle', + minLabel: `Shortest`, + maxLabel: `Longest`, + stdLabel: `Standard\ndeviation` } export const bleedingPrediction = { diff --git a/styles/typography.js b/styles/typography.js index 59892e8..bfc5173 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -12,7 +12,9 @@ export const sizes = { base: 18, subtitle: 22, title: 24, - huge: 40 + big: 30, + huge: 40, + giant: 50 } const title = { @@ -20,7 +22,49 @@ const title = { marginVertical: Spacing.large } +const accentText = { + fontFamily: fonts.bold, + textAlignVertical: 'center', + textTransform: 'uppercase' +} + +const accentTextBig = { + ...accentText, + fontSize: sizes.big, +} + +const accentTextGiant = { + ...accentText, + fontSize: sizes.giant, +} + +const accentTextHuge = { + ...accentText, + fontSize: sizes.huge, +} + +const accentTextSmall = { + ...accentText, + fontSize: sizes.small +} + export default { + accentOrange: { + ...accentTextSmall, + color: Colors.orange + }, + accentPurpleBig: { + ...accentTextBig, + color: Colors.purple + }, + accentPurpleGiant: { + ...accentTextGiant, + color: Colors.purple + }, + accentPurpleHuge: { + ...accentTextHuge, + color: Colors.purple + }, mainText: { fontFamily: fonts.main, fontSize: sizes.base