From bc04f6a24b09ab92b1ee6dbeb556cd1ffc741556 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 17 Nov 2019 19:37:19 +0100
Subject: [PATCH] Introduces Tick & TickList components

---
 components/chart/styles.js    |  4 +++
 components/chart/tick-list.js | 34 ++++++++++++++++++++++
 components/chart/tick.js      | 29 +++++++++++++++++++
 components/chart/y-axis.js    | 54 ++++++++++++++++++++---------------
 4 files changed, 98 insertions(+), 23 deletions(-)
 create mode 100644 components/chart/tick-list.js
 create mode 100644 components/chart/tick.js

diff --git a/components/chart/styles.js b/components/chart/styles.js
index d830782..dc3a69b 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -135,6 +135,10 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  boldTick: {
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
   horizontalGrid: {
     position:'absolute',
     borderStyle: 'solid',
diff --git a/components/chart/tick-list.js b/components/chart/tick-list.js
new file mode 100644
index 0000000..299517e
--- /dev/null
+++ b/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
diff --git a/components/chart/tick.js b/components/chart/tick.js
new file mode 100644
index 0000000..173cfbe
--- /dev/null
+++ b/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
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index ab3a4d3..88133ec 100644
--- a/components/chart/y-axis.js
+++ b/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 showTick
-    let tickBold
-    if (units === 0.1) {
-      showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
+    let isBold, label, shouldShowLabel
+
+    if (Number.isInteger(tick)) {
+      isBold = true
+      label = tick.toString() + '.0'
     } else {
-      showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
+      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,
     }
-    // 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>
   )