diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index 8c83935..3d6b2e0 100644
--- a/components/chart/dot-and-line.js
+++ b/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}
/>
diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js
index 0f828f1..809478a 100644
--- a/components/chart/symptom-cell.js
+++ b/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,
},
})
diff --git a/components/chart/tick.js b/components/chart/tick.js
index 92ca2b7..45b9730 100644
--- a/components/chart/tick.js
+++ b/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 (
- {shouldShowLabel && label}
+ {label}
)
}
@@ -36,6 +38,7 @@ const styles = StyleSheet.create({
position: 'absolute',
right: 0,
width: CHART_TICK_WIDTH,
+ minHeight: Sizes.base + 2,
},
textBold: {
fontSize: Sizes.base,
diff --git a/config.js b/config.js
index d7db960..5d11e5d 100644
--- a/config.js
+++ b/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)