From 58adeff56a88083a699394283163f4ec8676f0c9 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 14 Aug 2018 13:58:04 +0200
Subject: [PATCH] Position date label correctly
---
components/chart/day-column.js | 31 +++++++++++++++++--------------
components/chart/styles.js | 12 +++++-------
2 files changed, 22 insertions(+), 21 deletions(-)
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 1717c426..a1ec1584 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -26,20 +26,8 @@ export default class DayColumn extends Component {
bleeding,
mucus
} = data
- const cycleDayNumber = getCycleDayNumber(dateString)
- const shortDate = dateString.split('-').slice(1).join('-')
const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
- //TODO move these so they are visible
- const cycleDayLabel = (
- <Text {...label.number} y={config.cycleDayNumberRowY}>
- {cycleDayNumber}
- </Text>)
- const dateLabel = (
- <Text {...label.date} y={config.dateRowY}>
- {shortDate}
- </Text>
- )
const columnElements = []
if (typeof bleeding === 'number') {
columnElements.push(
@@ -68,8 +56,6 @@ export default class DayColumn extends Component {
columnElements.push(mucusIcon)
}
- columnElements.push(cycleDayLabel, dateLabel)
-
if(nfpLineInfo.drawFhmLine) {
const fhmLine = (<View
position = 'absolute'
@@ -95,6 +81,23 @@ export default class DayColumn extends Component {
columnElements.push(...this.drawDotAndLine(y, temperatureExclude, index))
}
+ const cycleDayNumber = getCycleDayNumber(dateString)
+ const shortDate = dateString.split('-').slice(1).join('-')
+ const cycleDayLabel = (
+ <Text style={label.number} y={config.cycleDayNumberRowY}>
+ {cycleDayNumber}
+ </Text>)
+ const dateLabel = (
+ <Text style = {label.date} y={config.dateRowY}>
+ {shortDate}
+ </Text>
+ )
+ columnElements.push(
+ <View position='absolute' bottom={0}>
+ {cycleDayLabel}
+ {dateLabel}
+ </View>
+ )
return React.createElement(
TouchableOpacity,
diff --git a/components/chart/styles.js b/components/chart/styles.js
index b85d115c..c018eb11 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -26,16 +26,14 @@ const styles = {
column: {
label: {
date: {
- stroke: 'grey',
- fontSize: 10,
- fontWeight: '100',
- color: 'red'
+ color: 'grey',
+ fontSize: 9,
+ fontWeight: '100'
},
number: {
- stroke: '#00b159',
+ color: '#00b159',
fontSize: 13,
- marginLeft: 1,
- marginTop: 10
+ textAlign: 'center'
}
},
rect: {
--
GitLab