Introduces Tick & TickList components

components/chart/styles.js

@@ -135,6 +135,10 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  boldTick: {
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
   horizontalGrid: {
     position:'absolute',
     borderStyle: 'solid',

components/chart/tick-list.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import Tick from './tick'
+
+import { getTickList } from './y-axis'
+
+import styles from './styles'
+
+const TickList = ({ height }) => {
+  return (
+    <View style={[styles.yAxis, { height }]}>{
+      getTickList(height)
+        .map(({ label, position, isBold, shouldShowLabel}) => {
+          return (
+            <Tick
+              key={label}
+              yPosition={position}
+              isBold={isBold}
+              shouldShowLabel={shouldShowLabel}
+              label={label}
+            />
+          )
+        })
+    }</View>
+  )
+}
+
+TickList.propTypes = {
+  height: PropTypes.number,
+}
+
+export default TickList

components/chart/tick.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import AppText from '../app-text'
+
+import styles from './styles'
+
+const Tick = ({ yPosition, isBold, shouldShowLabel, label }) => {
+  // 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
+  const topPosition = yPosition - 8
+  const style = [
+    styles.yAxisLabels.tempScale,
+    {top: topPosition},
+    isBold && styles.boldTick
+  ]
+
+  return <AppText style={style}>{shouldShowLabel && label}</AppText>
+}
+
+Tick.propTypes = {
+  yPosition: PropTypes.number,
+  isBold: PropTypes.bool,
+  shouldShowLabel: PropTypes.bool,
+  label: PropTypes.string,
+}
+
+export default Tick

components/chart/y-axis.js

@@ -5,39 +5,47 @@ import { View } from 'react-native'
 import config from '../../config'
 import { scaleObservable, unitObservable } from '../../local-storage'
 
-import AppText from '../app-text'
 import SymptomIcon from './symptom-icon'
+import TickList from './tick-list'
 import ChartLegend from './chart-legend'
 
 import styles from './styles'
 
-export function makeYAxisLabels(columnHeight) {
+export function getTickList(columnHeight) {
+
   const units = unitObservable.value
   const scaleMax = scaleObservable.value.max
-  const style = styles.yAxisLabels.tempScale
 
-  return getTickPositions(columnHeight).map((y, i) => {
+  return getTickPositions(columnHeight).map((tickPosition, i) => {
+
     const tick = scaleMax - i * units
-    const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
+    let isBold, label, shouldShowLabel
-    let showTick
+
-    let tickBold
+    if (Number.isInteger(tick)) {
-    if (units === 0.1) {
+      isBold = true
-      showTick =  (tick * 10 % 2) ? false : true
+      label = tick.toString() + '.0'
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
     } else {
-      showTick =  (tick * 10 % 5) ? false : true
+      isBold = false
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
+      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,
     }
-    // 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
-    return (
-      <AppText
-        style={[style, {top: y - 8}, tickBold]}
-        key={i}>
-        {showTick && tickLabel}
-      </AppText>
-    )
   })
 }
 
@@ -95,7 +103,7 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
           )
         })}
       </View>
-      <View style={[styles.yAxis, { height }]}>{makeYAxisLabels(height)}</View>
+      <TickList height={height} />
       <ChartLegend />
     </View>
   )