mashazyu
119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
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 SymptomIcon from './symptom-icon'
|
|
import TickList from './tick-list'
|
|
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 (
|
|
<View
|
|
top={tick + symptomRowHeight}
|
|
{...styles.horizontalGrid}
|
|
key={tick}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
|
|
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 (
|
|
<View>
|
|
<View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
|
|
{symptomsToDisplay.map(symptom => {
|
|
return (
|
|
<SymptomIcon
|
|
key={symptom}
|
|
symptom={symptom}
|
|
height={symptomIconHeight}
|
|
/>
|
|
)
|
|
})}
|
|
</View>
|
|
<TickList height={height} />
|
|
<ChartLegend />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
YAxis.propTypes = {
|
|
height: PropTypes.number,
|
|
symptomsToDisplay: PropTypes.array,
|
|
symptomsSectionHeight: PropTypes.number,
|
|
}
|
|
|
|
export default YAxis
|