diff --git a/components/chart/chart.js b/components/chart/chart.js
index 201f0f866a29805107e8890f73ae1fcf37b31282..ccffbba3b9f7096f1450f38fcf914305996bd68d 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -10,6 +10,7 @@ import styles from './styles'
import { scaleObservable } from '../../local-storage'
import config from '../../config'
import { AppText } from '../app-text'
+import { shared as labels } from '../labels'
export default class CycleChart extends Component {
constructor(props) {
@@ -111,7 +112,7 @@ export default class CycleChart extends Component {
(cycleDay.cervix.opening + cycleDay.cervix.firmness)
} else if (symptom === 'sex') {
// solo = 1 + partner = 2
- acc.sex = cycleDay.sex && (cycleDay.sex.solo + cycleDay.sex.partner)
+ acc.sex = cycleDay.sex && (cycleDay.sex.solo + 2 * cycleDay.sex.partner)
} else if (symptom === 'pain') {
// is any pain documented?
acc.pain = cycleDay.pain &&
@@ -144,20 +145,33 @@ export default class CycleChart extends Component {
>
{!this.state.chartLoaded &&
<View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
- <AppText>Loading...</AppText>
+ <AppText>{labels.loading}</AppText>
</View>
}
{this.state.chartHeight && this.state.chartLoaded &&
- <View
- style={[styles.yAxis, {
- height: this.columnHeight,
- marginTop: this.symptomRowHeight
- }]}
- >
- {makeYAxisLabels(this.columnHeight)}
+ <View>
+ <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
+ {this.symptomRowSymptoms.map(symptomName => {
+ return <View key={symptomName} style={{flex: 1}}>
+ <AppText>{symptomName[0]}</AppText>
+ </View>
+ })}
+ </View>
+ <View style={[styles.yAxis, {height: this.columnHeight}]}>
+ {makeYAxisLabels(this.columnHeight)}
+ </View>
+ <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
+ <AppText style = {[styles.column.label.number, styles.yAxisLabels.cycleDayLabel]}>
+ {labels.cycleDayWithLinebreak}
+ </AppText>
+ <AppText style={[styles.column.label.date,styles.yAxisLabels.dateLabel]}>
+ {labels.date}
+ </AppText>
+ </View>
</View>}
+
{this.state.chartHeight && this.state.chartLoaded &&
makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index f2ed95b54bc2ff783e76b03fcd80ed55ad9ca0f9..ec3dd9595407a35c92c48ec6dc1dcf800ee68fb4 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -3,7 +3,8 @@ import {
Text, View, TouchableOpacity
} from 'react-native'
import Svg,{ G, Rect, Line } from 'react-native-svg'
-import Icon from 'react-native-vector-icons/Entypo'
+import { LocalDate } from 'js-joda'
+import moment from 'moment'
import styles from './styles'
import config from '../../config'
import { getOrCreateCycleDay } from '../../db'
@@ -88,13 +89,18 @@ export default class DayColumn extends Component {
}
const cycleDayNumber = this.getCycleDayNumber(dateString)
- const shortDate = dateString.split('-').slice(1).join('-')
+ const dayDate = LocalDate.parse(dateString)
+ const shortDate = dayDate.dayOfMonth() === 1 ?
+ moment(dateString, "YYYY-MM-DD").format('MMM')
+ :
+ moment(dateString, "YYYY-MM-DD").format('Do')
+ const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
const cycleDayLabel = (
<Text style = {label.number}>
{cycleDayNumber ? cycleDayNumber : ' '}
</Text>)
const dateLabel = (
- <Text style = {label.date}>
+ <Text style = {[label.date, boldDateLabel]}>
{shortDate}
</Text>
)
@@ -116,10 +122,9 @@ export default class DayColumn extends Component {
symptomHeight={symptomHeight}
key='bleeding'
>
- <Icon
- name='drop'
- size={12}
- color={styles.bleedingIconShades[this.props.bleeding]}
+ <View
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.bleeding[this.props.bleeding]}
/>
</SymptomIconView>
),
@@ -130,8 +135,8 @@ export default class DayColumn extends Component {
key='mucus'
>
<View
- {...styles.mucusIcon}
- backgroundColor={styles.mucusIconShades[this.props.mucus]}
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.mucus[this.props.mucus]}
/>
</SymptomIconView>
),
@@ -142,9 +147,9 @@ export default class DayColumn extends Component {
key='cervix'
>
<View
- {...styles.mucusIcon}
+ {...styles.symptomIcon}
// cervix is sum of openess and firmness - fertile only when closed and hard (=0)
- backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'}
+ backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[2] : styles.iconShades.cervix[0]}
/>
</SymptomIconView>
),
@@ -155,8 +160,8 @@ export default class DayColumn extends Component {
key='sex'
>
<View
- {...styles.mucusIcon}
- backgroundColor='orange'
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.sex[this.props.sex - 1]}
/>
</SymptomIconView>
),
@@ -167,8 +172,8 @@ export default class DayColumn extends Component {
key='desire'
>
<View
- {...styles.mucusIcon}
- backgroundColor='red'
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.desire[this.props.desire]}
/>
</SymptomIconView>
),
@@ -179,8 +184,8 @@ export default class DayColumn extends Component {
key='pain'
>
<View
- {...styles.mucusIcon}
- backgroundColor='blue'
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.pain}
/>
</SymptomIconView>
),
@@ -191,8 +196,8 @@ export default class DayColumn extends Component {
key='note'
>
<View
- {...styles.mucusIcon}
- backgroundColor='green'
+ {...styles.symptomIcon}
+ backgroundColor={styles.iconShades.note}
/>
</SymptomIconView>
)
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 8441f9b2db7ea78de4d4a00cb9fc8164982cb8cb..8cc044fbd854b4021743923511acf6ed42f1f0c4 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -8,6 +8,7 @@ const lineWidth = 1.5
const colorLtl = '#feb47b'
const gridColor = 'lightgrey'
const gridLineWidth = 0.5
+const numberLabelFontSize = 13
const styles = {
curve: {
@@ -32,10 +33,11 @@ const styles = {
color: 'grey',
fontSize: 9,
fontWeight: '100',
+ textAlign: 'center',
},
number: {
color: primaryColor,
- fontSize: 13,
+ fontSize: numberLabelFontSize,
textAlign: 'center',
}
},
@@ -48,37 +50,62 @@ const styles = {
fill: 'transparent'
}
},
- bleedingIcon: {
- fill: '#fb2e01',
- scale: 0.6,
- x: 6,
- y: 3
- },
- bleedingIconShades: shadesOfRed,
- mucusIcon: {
+ symptomIcon: {
width: 12,
height: 12,
borderRadius: 50,
},
- mucusIconShades: [
- '#fef0e4',
- '#fee1ca',
- '#fed2af',
- '#fec395',
- '#feb47b'
- ],
+ iconShades: {
+ 'bleeding': shadesOfRed,
+ 'mucus': [
+ '#e3e7ed',
+ '#c8cfdc',
+ '#acb8cb',
+ '#91a0ba',
+ '#7689a9'
+ ],
+ 'cervix': [
+ '#f0e19d',
+ '#e9d26d',
+ '#e2c33c',
+ '#dbb40c',
+ ],
+ 'sex': [
+ '#a87ca2',
+ '#8b5083',
+ '#6f2565',
+ ],
+ 'desire': [
+ '#c485a6',
+ '#b15c89',
+ '#9e346c',
+ ],
+ 'pain': ['#bccd67'],
+ 'note': ['#6CA299']
+ },
yAxis: {
width: 27,
- borderRightWidth: 0.5,
+ borderRightWidth: 1,
borderColor: 'lightgrey',
borderStyle: 'solid'
},
- yAxisLabel: {
- position: 'absolute',
- left: 3,
- color: 'grey',
- fontSize: 11,
- textAlign: 'left'
+ yAxisLabels: {
+ tempScale: {
+ position: 'absolute',
+ right: 2,
+ color: 'grey',
+ fontSize: 9,
+ textAlign: 'left'
+ },
+ cycleDayLabel: {
+ textAlign: 'center',
+ justifyContent: 'center',
+ fontSize: Math.ceil(numberLabelFontSize / 2)
+ },
+ dateLabel: {
+ textAlign: 'center',
+ justifyContent: 'center'
+ }
},
horizontalGrid: {
position:'absolute',
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 12fa08c9a230ac7fe196fac400d41ae78fc7ce5c..e1e0d6f0a1d9a6dffa238adb345d013ed694e7e1 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -8,7 +8,7 @@ import { AppText } from '../app-text'
export function makeYAxisLabels(columnHeight) {
const units = unitObservable.value
const scaleMax = scaleObservable.value.max
- const style = styles.yAxisLabel
+ const style = styles.yAxisLabels.tempScale
return getTickPositions(columnHeight).map((y, i) => {
const tick = scaleMax - i * units
@@ -17,10 +17,10 @@ export function makeYAxisLabels(columnHeight) {
let tickBold
if (units === 0.1) {
showTick = (tick * 10 % 2) ? false : true
- tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+ tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
} else {
showTick = (tick * 10 % 5) ? false : true
- tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
+ tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
}
// this eyeballing is sadly necessary because RN does not
// support percentage values for transforms, which we'd need
diff --git a/components/labels.js b/components/labels.js
index 7fde2b803482f9b78b683c4352d2e8bda8605400..5ebae600568e258d6ddb1f19a973c030b7bc5549 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -8,7 +8,10 @@ export const shared = {
incorrectPasswordMessage: 'That password is incorrect.',
tryAgain: 'Try again',
ok: 'OK',
- unlock: 'Unlock'
+ unlock: 'Unlock',
+ date: 'Date',
+ cycleDayWithLinebreak: 'Cycle\nday',
+ loading: 'Loading ...'
}
export const settings = {
diff --git a/styles/index.js b/styles/index.js
index ee63b83cb349ba7716827c8c74183b85b8fdc1d7..28b6ff016c68650aeacf50582594faac4735a5cb 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -4,7 +4,12 @@ export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export const secondaryColorLight = '#91749d'
export const fontOnPrimaryColor = 'white'
-export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
+export const shadesOfRed = [
+ '#e7999e',
+ '#db666d',
+ '#cf323d',
+ '#c3000d'
+] // light to dark
const defaultBottomMargin = 5
const defaultIndentation = 10