diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 541377da668f1e882ecbe8b60b586f9eb18bcc97..425f293917d4d7a5b4608cba962e9d15eaebac24 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -19,7 +19,7 @@ import config from '../../config' import cycleModule from '../../lib/cycle' import { getCycleDay } from '../../db' import DotAndLine from './dot-and-line' -import { normalizeToScale } from './y-axis' +import { normalizeToScale } from '../helpers/chart' const label = styles.column.label diff --git a/components/chart/nfp-lines.js b/components/chart/nfp-lines.js index cf73c52234c75521369ce6a7dda7cd2fcf778231..853dde54f634dc27c330be9d05a3fbf31b88a977 100644 --- a/components/chart/nfp-lines.js +++ b/components/chart/nfp-lines.js @@ -1,5 +1,5 @@ import { getCycleStatusForDay } from '../../lib/sympto-adapter' -import { normalizeToScale } from './y-axis' +import { normalizeToScale } from '../helpers/chart' export default function () { const cycle = { diff --git a/components/chart/tick-list.js b/components/chart/tick-list.js index 299517e7d8b932d3ec1200597036be318782f0f0..16fba0af4065148a95ae0d743748d25e15e42cf7 100644 --- a/components/chart/tick-list.js +++ b/components/chart/tick-list.js @@ -4,7 +4,7 @@ import { View } from 'react-native' import Tick from './tick' -import { getTickList } from './y-axis' +import { getTickList } from '../helpers/chart' import styles from './styles' diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 88133ec6c0bf9368cde6d40144477b591ac9dce6..09a5210e84c2c4fdc3d3c822325c777446e7fe69 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -2,8 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { View } from 'react-native' -import config from '../../config' -import { scaleObservable, unitObservable } from '../../local-storage' +import { getTickPositions } from '../helpers/chart' import SymptomIcon from './symptom-icon' import TickList from './tick-list' @@ -11,44 +10,6 @@ import ChartLegend from './chart-legend' import styles from './styles' -export function getTickList(columnHeight) { - - const units = unitObservable.value - const scaleMax = scaleObservable.value.max - - return getTickPositions(columnHeight).map((tickPosition, i) => { - - const tick = scaleMax - i * units - let isBold, label, shouldShowLabel - - if (Number.isInteger(tick)) { - isBold = true - label = tick.toString() + '.0' - } else { - isBold = false - label = tick.toString() - } - - // when temp range <= 3, units === 0.1 we show temp values with step 0.2 - // when temp range > 3, units === 0.5 we show temp values with step 0.5 - - if (units === 0.1) { - // show label with step 0.2 - shouldShowLabel = !(tick * 10 % 2) - } else { - // show label with step 0.5 - shouldShowLabel = !(tick * 10 % 5) - } - - return { - position: tickPosition, - label, - isBold, - shouldShowLabel, - } - }) -} - export function makeHorizontalGrid(columnHeight, symptomRowHeight) { return getTickPositions(columnHeight).map(tick => { return ( @@ -61,33 +22,6 @@ export function makeHorizontalGrid(columnHeight, symptomRowHeight) { }) } -function getTickPositions(columnHeight) { - const units = unitObservable.value - const scaleMin = scaleObservable.value.min - const scaleMax = scaleObservable.value.max - const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1 - const tickDistance = 1 / (numberOfTicks - 1) - const tickPositions = [] - for (let i = 0; i < numberOfTicks; i++) { - const position = getAbsoluteValue(tickDistance * i, columnHeight) - tickPositions.push(position) - } - return tickPositions -} - -export function normalizeToScale(temp, columnHeight) { - const scale = scaleObservable.value - const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min) - 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 - 2 * verticalPadding - return scaleHeight * relative + verticalPadding -} - const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length return ( diff --git a/components/helpers/chart.js b/components/helpers/chart.js new file mode 100644 index 0000000000000000000000000000000000000000..24a563cb1ab291bd0606a9b1ff813293f2d12fde --- /dev/null +++ b/components/helpers/chart.js @@ -0,0 +1,67 @@ +import { scaleObservable, unitObservable } from '../../local-storage' +import config from '../../config' + +export function normalizeToScale(temp, columnHeight) { + const scale = scaleObservable.value + const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min) + 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 - 2 * verticalPadding + return scaleHeight * relative + verticalPadding +} + +export function getTickPositions(columnHeight) { + const units = unitObservable.value + const scaleMin = scaleObservable.value.min + const scaleMax = scaleObservable.value.max + const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1 + const tickDistance = 1 / (numberOfTicks - 1) + const tickPositions = [] + for (let i = 0; i < numberOfTicks; i++) { + const position = getAbsoluteValue(tickDistance * i, columnHeight) + tickPositions.push(position) + } + return tickPositions +} + +export function getTickList(columnHeight) { + + const units = unitObservable.value + const scaleMax = scaleObservable.value.max + + return getTickPositions(columnHeight).map((tickPosition, i) => { + + const tick = scaleMax - i * units + let isBold, label, shouldShowLabel + + if (Number.isInteger(tick)) { + isBold = true + label = tick.toString() + '.0' + } else { + isBold = false + label = tick.toString() + } + + // when temp range <= 3, units === 0.1 we show temp values with step 0.2 + // when temp range > 3, units === 0.5 we show temp values with step 0.5 + + if (units === 0.1) { + // show label with step 0.2 + shouldShowLabel = !(tick * 10 % 2) + } else { + // show label with step 0.5 + shouldShowLabel = !(tick * 10 % 5) + } + + return { + position: tickPosition, + label, + isBold, + shouldShowLabel, + } + }) +}