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)