Fix chart dots and lines

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

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>
     )
   }

components/chart/tick.js

@@ -28,13 +28,13 @@ Tick.propTypes = {
 
 
 const text = {
-  right: 4,
   lineHeight: Sizes.base,
-  textAlign: 'right',
+  right: 4,
-  textAlignVertical: 'center'
+  textAlign: 'right'
 }
 const styles = StyleSheet.create({
   container: {
+    justifyContent: 'center',
     position: 'absolute',
     right: 0,
     width: 40

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 unit = unitObservable.value
-  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
+  //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)
 }