Highlight weekend dates in chart

components/chart/day-column.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
+import moment from 'moment'
 
 import { getCycleDay } from '../../db'
 
@@ -26,6 +27,8 @@ const DayColumn = ({
   symptomRowSymptoms,
   xAxisHeight,
 }) => {
+  const momentDate = moment(dateString)
+  const isWeekend = momentDate.day() == 0 || momentDate.day() == 6
   const cycleDayData = getCycleDay(dateString)
   let data = {}
 
@@ -73,6 +76,7 @@ const DayColumn = ({
           isVerticalLine={fhmAndLtl.drawFhmLine}
           data={data && data.temperature}
           columnHeight={columnHeight}
+          isWeekend={isWeekend}
         />
       )}
 
@@ -92,6 +96,7 @@ const DayColumn = ({
             isSymptomDataComplete={
               hasSymptomData && isSymptomDataComplete(symptom, dateString)
             }
+            isWeekend={isWeekend}
             height={symptomHeight}
           />
         )

components/chart/symptom-cell.js

@@ -15,14 +15,31 @@ const SymptomCell = ({
   symptom,
   symptomValue,
   isSymptomDataComplete,
+  isWeekend,
 }) => {
   const shouldDrawDot = symptomValue !== false
+  // Determine the background color based on isWeekend prop
+  const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   const styleCell =
     index !== 0
-      ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
-      : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
+      ? [
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: weekendBackgroundColor,
+          },
+        ]
+      : [
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: weekendBackgroundColor,
+          },
+          styles.topBorder,
+        ]
   let styleDot
-
   if (shouldDrawDot) {
     const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
@@ -47,6 +64,7 @@ SymptomCell.propTypes = {
   symptom: PropTypes.string,
   symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   isSymptomDataComplete: PropTypes.bool,
+  isWeekend: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

components/chart/temperature-column.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
+import { Colors } from '../../styles'
 
 import { Surface, Path } from '@react-native-community/art'
 
@@ -14,14 +15,16 @@ const TemperatureColumn = ({
   isVerticalLine,
   data,
   columnHeight,
+  isWeekend,
 }) => {
   const x = CHART_STROKE_WIDTH / 2
 
+  const weekendBackgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   return (
     <Surface
       width={CHART_COLUMN_WIDTH}
       height={columnHeight}
-      style={styles.container}
+      style={{ ...styles.container, backgroundColor: weekendBackgroundColor }}
     >
       <ChartLine path={new Path().lineTo(0, columnHeight)} />
 
@@ -63,6 +66,7 @@ TemperatureColumn.propTypes = {
   isVerticalLine: PropTypes.bool,
   data: PropTypes.object,
   columnHeight: PropTypes.number,
+  isWeekend: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({