From 2977a552dca375557fa04c9e5ffb48665c41ec89 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Sun, 23 Sep 2018 14:59:40 +0200
Subject: [PATCH] extends y-axis with placeholders for symptom symbols and date
labels
---
components/chart/chart.js | 54 +++++++++++++++++++++++++++++++++-----
components/chart/styles.js | 6 ++---
components/chart/y-axis.js | 4 +--
3 files changed, 52 insertions(+), 12 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 201f0f86..cc03963c 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -137,6 +137,7 @@ export default class CycleChart extends Component {
}
render() {
+ console.log(this.symptomRowSymptoms)
return (
<View
onLayout={this.onLayout}
@@ -149,15 +150,54 @@ export default class CycleChart extends Component {
}
{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,
+ {
+ textAlign: 'center',
+ justifyContent: 'center',
+ fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
+ }
+ ]}>{'Cycle\nday'}</AppText>
+ <AppText style={[
+ styles.column.label.date,
+ {
+ textAlign: 'center',
+ justifyContent: 'center'
+ }
+ ]}>{'Date'}</AppText>
+ </View>
</View>}
+
{this.state.chartHeight && this.state.chartLoaded &&
makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
}
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 8441f9b2..9d5901aa 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -69,15 +69,15 @@ const styles = {
],
yAxis: {
width: 27,
- borderRightWidth: 0.5,
+ borderRightWidth: 1,
borderColor: 'lightgrey',
borderStyle: 'solid'
},
yAxisLabel: {
position: 'absolute',
- left: 3,
+ right: 2,
color: 'grey',
- fontSize: 11,
+ fontSize: 9,
textAlign: 'left'
},
horizontalGrid: {
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 12fa08c9..3ede6c61 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -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
--
GitLab