From c54581d6446a72633a0b9b95cbbeab1955da5242 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Fri, 24 Aug 2018 10:30:40 +0200 Subject: [PATCH] Introduce symptom row (WIP) --- components/chart/chart.js | 22 ++++++++++---- components/chart/day-column.js | 53 +++++++++++++++------------------- components/chart/y-axis.js | 33 ++++++++++++--------- config.js | 6 ++-- 4 files changed, 64 insertions(+), 50 deletions(-) diff --git a/components/chart/chart.js b/components/chart/chart.js index d8a9713..c56b77a 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 ( Loading...} {this.state.chartHeight && - {makeYAxisLabels(this.state.chartHeight)} + {makeYAxisLabels(columnHeight)} } - {this.state.chartHeight && makeHorizontalGrid(this.state.chartHeight)} + {this.state.chartHeight && makeHorizontalGrid(columnHeight, symptomRowHeight)} {this.state.chartHeight && item.dateString} initialNumToRender={15} maxToRenderPerBatch={5} - > - + /> } ) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index b6bf2d5..2f623a9 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( - - ) - } - - if (typeof mucus === 'number') { - const mucusIcon = ( - - ) - columnElements.push(mucusIcon) - } if(drawFhmLine) { const fhmLine = ( ) - 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 ( + + {typeof mucus === 'number' && + + } + {typeof bleeding === 'number' && + + } + + {column} + {cycleDayLabel} {dateLabel} diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index e65449b..b215da0 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 ( { +export function makeHorizontalGrid(columnHeight, symptomRowHeight) { + return getTickPositions(columnHeight).map(tick => { return ( @@ -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 ffb8f60..772e828 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 } }