diff --git a/components/chart/chart.js b/components/chart/chart.js index 201f0f866a29805107e8890f73ae1fcf37b31282..cc03963c9526eb1fd9b4a28f5252de9b7324d98c 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 8441f9b2db7ea78de4d4a00cb9fc8164982cb8cb..9d5901aa65734cde3ff2dfb89d6c96af6c7958f1 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 12fa08c9a230ac7fe196fac400d41ae78fc7ce5c..3ede6c61759eeeeffffd9f731db381db23884412 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