From 2fb20c0031dae6e85f34727a5a1565f7c6dadd09 Mon Sep 17 00:00:00 2001
From: Sofiya Tepikin <sofiya.tepikin@gmail.com>
Date: Sun, 3 Jan 2021 12:36:37 +0000
Subject: [PATCH] Fix chart dots and lines

---
 components/chart/cycle-day-label.js |  4 ++--
 components/chart/dot-and-line.js    | 12 +++++++++---
 components/chart/tick.js            |  6 +++---
 components/helpers/chart.js         |  9 ++++++---
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js
index ed24cde..1f8a82f 100644
--- a/components/chart/cycle-day-label.js
+++ b/components/chart/cycle-day-label.js
@@ -7,7 +7,7 @@ import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { getOrdinalSuffix } from '../helpers/home'
-import { Containers, Typography } from '../../styles'
+import { Containers, Typography, Sizes } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
   const cycleDayNumber = cycleModule().getCycleDayNumber(date)
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
   },
   text: {
     ...Typography.label,
-    fontSize: 12
+    fontSize: Sizes.small,
   },
   textBold: {
     ...Typography.labelBold
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index d2618c3..335e72c 100644
--- a/components/chart/dot-and-line.js
+++ b/components/chart/dot-and-line.js
@@ -40,14 +40,14 @@ export default class DotAndLine extends Component {
       const middleY = ((leftY - y) / 2) + y
       excludeLeftLine = leftTemperatureExclude || exclude
       lineLeft = new Path()
-        .moveTo(CHART_COLUMN_MIDDLE - CHART_DOT_RADIUS, y)
+        .moveTo(CHART_COLUMN_MIDDLE, y)
         .lineTo(0, middleY)
     }
     if (rightY) {
       const middleY = ((y - rightY) / 2) + rightY
       excludeRightLine = rightTemperatureExclude || exclude
       lineRight = new Path()
-        .moveTo(CHART_COLUMN_MIDDLE + CHART_DOT_RADIUS, y)
+        .moveTo(CHART_COLUMN_MIDDLE, y)
         .lineTo(CHART_COLUMN_WIDTH, middleY)
     }
 
@@ -74,7 +74,13 @@ export default class DotAndLine extends Component {
           strokeWidth={CHART_STROKE_WIDTH}
           key={y + CHART_DOT_RADIUS}
         />
-        <Shape d={dot} stroke={dotColor} strokeWidth={CHART_STROKE_WIDTH} key='dot' />
+        <Shape
+          d={dot}
+          stroke={dotColor}
+          strokeWidth={CHART_STROKE_WIDTH}
+          fill="white"
+          key='dot'
+        />
       </React.Fragment>
     )
   }
diff --git a/components/chart/tick.js b/components/chart/tick.js
index e626644..f492c80 100644
--- a/components/chart/tick.js
+++ b/components/chart/tick.js
@@ -28,13 +28,13 @@ Tick.propTypes = {
 
 
 const text = {
-  right: 4,
   lineHeight: Sizes.base,
-  textAlign: 'right',
-  textAlignVertical: 'center'
+  right: 4,
+  textAlign: 'right'
 }
 const styles = StyleSheet.create({
   container: {
+    justifyContent: 'center',
     position: 'absolute',
     right: 0,
     width: 40
diff --git a/components/helpers/chart.js b/components/helpers/chart.js
index 318bd67..0a68a1b 100644
--- a/components/helpers/chart.js
+++ b/components/helpers/chart.js
@@ -7,8 +7,11 @@ import { getCycleDay, getAmountOfCycleDays } from '../../db'
 //YAxis helpers
 
 export function normalizeToScale(temp, columnHeight) {
-  const scale = scaleObservable.value
-  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
+  const unit = unitObservable.value
+  //Add 1 tick above the max value to display on chart
+  const scaleMax = scaleObservable.value.max + unit
+  const scaleMin = scaleObservable.value.min - unit
+  const valueRelativeToScale = (scaleMax - temp) / (scaleMax - scaleMin)
   return getAbsoluteValue(valueRelativeToScale, columnHeight)
 }
 
@@ -286,4 +289,4 @@ export function nfpLines() {
 
     return ret
   }
-}
\ No newline at end of file
+}