Merge branch '653-bug-grid-labels-for-temperature-chart-cut-out' into 'release'

fix: changes to the temperature chart

See merge request bloodyhealth/drip!626

components/chart/dot-and-line.js

@@ -7,7 +7,8 @@ import { Colors } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
   CHART_COLUMN_MIDDLE,
-  CHART_DOT_RADIUS,
+  CHART_DOT_RADIUS_SYMPTOM,
+  CHART_DOT_RADIUS_TEMPERATURE,
   CHART_STROKE_WIDTH,
 } from '../../config'
 
@@ -35,9 +36,9 @@ const DotAndLine = ({
   }
 
   const dot = new Path()
-    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
-    .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
-    .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
+    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS_TEMPERATURE)
+    .arc(0, CHART_DOT_RADIUS_TEMPERATURE * 2, CHART_DOT_RADIUS_TEMPERATURE)
+    .arc(0, CHART_DOT_RADIUS_TEMPERATURE * -2, CHART_DOT_RADIUS_TEMPERATURE)
   const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
   const lineColorLeft = excludeLeftLine
     ? Colors.turquoise
@@ -58,13 +59,13 @@ const DotAndLine = ({
         d={lineRight}
         stroke={lineColorRight}
         strokeWidth={CHART_STROKE_WIDTH}
-        key={y + CHART_DOT_RADIUS}
+        key={y + CHART_DOT_RADIUS_SYMPTOM}
       />
       <Shape
         d={dot}
         stroke={dotColor}
         strokeWidth={CHART_STROKE_WIDTH}
-        fill="white"
+        fill={Colors.turquoiseDark}
         key="dot"
       />
     </React.Fragment>

components/chart/symptom-cell.js

@@ -5,7 +5,7 @@ import { StyleSheet, View } from 'react-native'
 import { Colors, Containers } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
-  CHART_DOT_RADIUS,
+  CHART_DOT_RADIUS_SYMPTOM,
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
 } from '../../config'
 
@@ -63,8 +63,8 @@ const styles = StyleSheet.create({
     borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
   },
   dot: {
-    width: CHART_DOT_RADIUS * 2,
-    height: CHART_DOT_RADIUS * 2,
+    width: CHART_DOT_RADIUS_SYMPTOM * 2,
+    height: CHART_DOT_RADIUS_SYMPTOM * 2,
     borderRadius: 50,
   },
 })

components/chart/tick.js

@@ -8,13 +8,15 @@ import { Sizes } from '../../styles'
 import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
-  const top = yPosition - height / 2
+  const top = yPosition - height / 2 - 4
   const containerStyle = [styles.container, { flexBasis: height, height, top }]
   const textStyle = isBold ? styles.textBold : styles.textNormal
 
+  if (!shouldShowLabel) return null
+
   return (
     <View style={containerStyle}>
-      <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
+      <AppText style={textStyle}>{label}</AppText>
     </View>
   )
 }
@@ -36,6 +38,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     width: CHART_TICK_WIDTH,
+    minHeight: Sizes.base + 2,
   },
   textBold: {
     fontSize: Sizes.base,

config.js

@@ -15,12 +15,13 @@ export const SYMPTOMS = [
 
 export const CHART_COLUMN_WIDTH = 32
 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
-export const CHART_DOT_RADIUS = scale(6)
+export const CHART_DOT_RADIUS_SYMPTOM = scale(6)
+export const CHART_DOT_RADIUS_TEMPERATURE = scale(4)
 export const CHART_GRID_LINE_HORIZONTAL_WIDTH =
   PixelRatio.roundToNearestPixel(0.3)
 export const CHART_ICON_SIZE = scale(20)
-export const CHART_STROKE_WIDTH = scale(3)
-export const CHART_SYMPTOM_HEIGHT_RATIO = scale(0.08)
+export const CHART_STROKE_WIDTH = scale(1.5)
+export const CHART_SYMPTOM_HEIGHT_RATIO = scale(0.06)
 export const CHART_XAXIS_HEIGHT_RATIO = scale(0.1)
 export const CHART_YAXIS_WIDTH = scale(32)
 export const CHART_TICK_WIDTH = scale(44)