diff --git a/components/chart/chart.js b/components/chart/chart.js
index d8a971340eaeda4c18b301bf4f05ffd9819f9f97..c56b77aeaa614099c27a12c454eca937931e269b 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -8,6 +8,7 @@ import DayColumn from './day-column'
import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
import styles from './styles'
import { scaleObservable } from '../../local-storage'
+import config from '../../config'
export default class CycleChart extends Component {
constructor(props) {
@@ -70,9 +71,10 @@ export default class CycleChart extends Component {
}, {})
const temp = symptoms.temperature
+ const columnHeight = this.state.chartHeight * config.columnHeightPercentage
return {
dateString,
- y: temp ? normalizeToScale(temp, this.state.chartHeight) : null,
+ y: temp ? normalizeToScale(temp, columnHeight) : null,
...symptoms,
...getFhmAndLtlInfo(dateString, temp)
}
@@ -85,6 +87,12 @@ export default class CycleChart extends Component {
}
render() {
+ let columnHeight
+ let symptomRowHeight
+ if (this.state.chartHeight) {
+ columnHeight = this.state.chartHeight * config.columnHeightPercentage
+ symptomRowHeight = this.state.chartHeight * config.symptomRowHeightPercentage
+ }
return (
<View
onLayout={this.onLayout}
@@ -93,12 +101,15 @@ export default class CycleChart extends Component {
{!this.state.chartHeight && <Text>Loading...</Text>}
{this.state.chartHeight &&
<View
- style={[styles.yAxis, {height: this.state.chartHeight}]}
+ style={[styles.yAxis, {
+ height: columnHeight,
+ marginTop: symptomRowHeight
+ }]}
>
- {makeYAxisLabels(this.state.chartHeight)}
+ {makeYAxisLabels(columnHeight)}
</View>}
- {this.state.chartHeight && makeHorizontalGrid(this.state.chartHeight)}
+ {this.state.chartHeight && makeHorizontalGrid(columnHeight, symptomRowHeight)}
{this.state.chartHeight &&
<FlatList
@@ -110,8 +121,7 @@ export default class CycleChart extends Component {
keyExtractor={item => item.dateString}
initialNumToRender={15}
maxToRenderPerBatch={5}
- >
- </FlatList>
+ />
}
</View>
)
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index b6bf2d53f7328942c913d55d1a14b272398e8030..2f623a93ccf18e229e315771b45ef26b3d35871c 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -34,36 +34,11 @@ export default class DayColumn extends Component {
rightY,
rightTemperatureExclude,
leftY,
- leftTemperatureExclude
+ leftTemperatureExclude,
+ chartHeight
} = this.props
const columnElements = []
- if (typeof bleeding === 'number') {
- columnElements.push(
- <Icon
- name='drop'
- position='absolute'
- size={18}
- color='#900'
- style={{ marginTop: 10, marginLeft: 3 }}
- key='bleeding'
- />
- )
- }
-
- if (typeof mucus === 'number') {
- const mucusIcon = (
- <View
- position='absolute'
- top = {40}
- left = {config.columnMiddle - styles.mucusIcon.width / 2}
- {...styles.mucusIcon}
- backgroundColor={styles.mucusIconShades[mucus]}
- key='mucus'
- />
- )
- columnElements.push(mucusIcon)
- }
if(drawFhmLine) {
const fhmLine = (<View
@@ -114,8 +89,9 @@ export default class DayColumn extends Component {
</Text>
)
- const columnHeight = this.props.chartHeight * config.columnHeightPercentage
- const xAxisHeight = this.props.chartHeight * config.xAxisHeightPercentage
+ const columnHeight = chartHeight * config.columnHeightPercentage
+ const xAxisHeight = chartHeight * config.xAxisHeightPercentage
+ const symptomHeight = chartHeight * config.symptomRowHeightPercentage
const column = React.createElement(
TouchableOpacity,
@@ -132,7 +108,26 @@ export default class DayColumn extends Component {
return (
<View>
+ <View style={{ height: symptomHeight }}>
+ {typeof mucus === 'number' &&
+ <View
+ {...styles.mucusIcon}
+ backgroundColor={styles.mucusIconShades[mucus]}
+ key='mucus'
+ />
+ }
+ {typeof bleeding === 'number' &&
+ <Icon
+ name='drop'
+ size={18}
+ color='#900'
+ key='bleeding'
+ />
+ }
+ </View>
+
{column}
+
<View style={{height: xAxisHeight}}>
{cycleDayLabel}
{dateLabel}
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index e65449b97d4711f8890f2b36d1123f5f96daa0db..b215da08f6cbb613e34217e056110d50e96f2c0e 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -4,15 +4,16 @@ import config from '../../config'
import styles from './styles'
import { scaleObservable } from '../../local-storage'
-export function makeYAxisLabels(chartHeight) {
+export function makeYAxisLabels(columnHeight) {
const units = config.temperatureScale.units
const scaleMax = scaleObservable.value.max
const style = styles.yAxisLabel
- return getTickPositions(chartHeight).map((y, i) => {
+ return getTickPositions(columnHeight).map((y, i) => {
// this eyeballing is sadly necessary because RN does not
// support percentage values for transforms, which we'd need
// to reliably place the label vertically centered to the grid
+ if (scaleMax - i * units === 37) console.log(y)
return (
<Text
style={[style, {top: y - 8}]}
@@ -23,11 +24,11 @@ export function makeYAxisLabels(chartHeight) {
})
}
-export function makeHorizontalGrid(chartHeight) {
- return getTickPositions(chartHeight).map(tick => {
+export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
+ return getTickPositions(columnHeight).map(tick => {
return (
<View
- top={tick}
+ top={tick + symptomRowHeight}
{...styles.horizontalGrid}
key={tick}
/>
@@ -35,25 +36,31 @@ export function makeHorizontalGrid(chartHeight) {
})
}
-function getTickPositions(chartHeight) {
+function getTickPositions(columnHeight) {
const units = config.temperatureScale.units
const scaleMin = scaleObservable.value.min
const scaleMax = scaleObservable.value.max
const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
- const columnHeight = chartHeight * config.columnHeightPercentage
- const tickDistance = columnHeight / numberOfTicks
+ const tickDistance = 1 / (numberOfTicks - 1)
const tickPositions = []
- const margin = tickDistance / 2
for (let i = 0; i < numberOfTicks; i++) {
- tickPositions.push(tickDistance * i + margin)
+ const position = getAbsoluteValue(tickDistance * i, columnHeight)
+ tickPositions.push(position)
}
return tickPositions
}
-export function normalizeToScale(temp, chartHeight) {
+export function normalizeToScale(temp, columnHeight) {
const scale = scaleObservable.value
const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
- const scaleHeight = chartHeight * config.columnHeightPercentage
- return scaleHeight * valueRelativeToScale
+ return getAbsoluteValue(valueRelativeToScale, columnHeight)
+}
+
+function getAbsoluteValue(relative, columnHeight) {
+ // we add some height to have some breathing room
+ const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
+ const scaleHeight = columnHeight - verticalPadding
+ return scaleHeight * relative + verticalPadding
+
}
\ No newline at end of file
diff --git a/config.js b/config.js
index ffb8f6041a48c25379df2d8217e345458672571b..772e8282121b76b3e8f1dff970b68f25c64d3a8d 100644
--- a/config.js
+++ b/config.js
@@ -1,13 +1,15 @@
const config = {
columnWidth: 25,
- columnHeightPercentage: 0.92,
+ columnHeightPercentage: 0.84,
xAxisHeightPercentage: 0.08,
+ symptomRowHeightPercentage: 0.08,
temperatureScale: {
defaultLow: 35,
defaultHigh: 38,
min: 34,
max: 40,
- units: 0.1
+ units: 0.1,
+ verticalPadding: 0.03
}
}