Feature: Combine dynamic month label with moving month label in x axis

Co-authored-by: @livgm

components/chart/chart-legend.js

@@ -1,21 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
+import moment from 'moment'
 
 import AppText from '../common/app-text'
 
 import { Sizes, Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
-import { shared as labels } from '../../i18n/en/labels'
 
-const ChartLegend = ({ height }) => {
+const ChartLegend = ({ height, currentDate }) => {
+  const displayedMonth = moment(currentDate).format('MMM')
+
   return (
     <View style={[styles.container, { height }]}>
       <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
         <AppText style={styles.textBold}>#</AppText>
       </View>
       <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
-        <AppText style={styles.text}>{labels.date}</AppText>
+        <AppText style={styles.text}>{displayedMonth}</AppText>
       </View>
     </View>
   )
@@ -23,6 +25,7 @@ const ChartLegend = ({ height }) => {
 
 ChartLegend.propTypes = {
   height: PropTypes.number.isRequired,
+  currentDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/chart/chart.js

@@ -32,6 +32,7 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
+  CHART_YAXIS_WIDTH,
   SYMPTOMS,
 } from '../../config'
 import { Spacing } from '../../styles'
@@ -97,8 +98,7 @@ const CycleChart = ({ navigate, setDate }) => {
   const shouldShowNoDataWarning =
     isTemperatureEnabled && chartSymptoms.indexOf('temperature') <= -1
 
-  const { width, height } = Dimensions.get('window')
+  const { height } = Dimensions.get('window')
-  const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
 
   const xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
   const remainingHeight = height * 0.7 - xAxisHeight
@@ -117,6 +117,29 @@ const CycleChart = ({ navigate, setDate }) => {
 
   const columns = makeColumnInfo()
 
+  // Monitor scrolling to show proper month abbreviation in symptom chart
+
+  const [currentScrollPosition, setCurrentScrollPosition] = useState(0)
+
+  const handleScroll = (event) => {
+    const currentPosition = event.nativeEvent.contentOffset.x
+    setCurrentScrollPosition(currentPosition)
+  }
+
+  const [numberOfColumnsToRender, setNumberOfColumnsToRender] = useState(0)
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout
+    setNumberOfColumnsToRender(
+      Math.round((width - CHART_YAXIS_WIDTH) / CHART_COLUMN_WIDTH)
+    )
+  }
+
+  const getcomputedDateInView = () => {
+    const columnIndex = Math.floor(currentScrollPosition / CHART_COLUMN_WIDTH)
+    // detect oldest visible day to render its month dynamically
+    return columns[columnIndex + numberOfColumnsToRender]
+  }
+
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
@@ -144,7 +167,7 @@ const CycleChart = ({ navigate, setDate }) => {
       contentContainerStyle={styles.pageContainer}
       scrollViewStyle={styles.page}
     >
-      <View style={styles.chartContainer}>
+      <View style={styles.chartContainer} onLayout={onLayout}>
         {shouldShowHint && <Tutorial onClose={hideHint} />}
         {shouldShowNoDataWarning && <NoTemperature />}
         <View style={styles.chartArea}>
@@ -154,12 +177,15 @@ const CycleChart = ({ navigate, setDate }) => {
             symptomsSectionHeight={symptomRowHeight}
             shouldShowTemperatureColumn={shouldShowTemperatureColumn}
             xAxisHeight={xAxisHeight}
+            computedDate={getcomputedDateInView()}
           />
           <MainGrid
             data={columns}
             renderItem={renderColumn}
             initialNumToRender={numberOfColumnsToRender}
             contentContainerStyle={{ height: chartHeight }}
+            onScroll={handleScroll}
+            scrollEventThrottle={16} // Detects scroll events at roughly 60fps
           />
           {shouldShowTemperatureColumn && (
             <HorizontalGrid height={columnHeight} />

components/chart/y-axis.js

@@ -14,13 +14,14 @@ const YAxis = ({
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
   xAxisHeight,
+  computedDate,
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
   return (
     <View>
       {shouldShowTemperatureColumn && <TickList height={height} />}
-      <ChartLegend height={xAxisHeight} />
+      <ChartLegend height={xAxisHeight} currentDate={computedDate} />
       <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
         {symptomsToDisplay.map((symptom) => (
           <SymptomIcon
@@ -40,6 +41,7 @@ YAxis.propTypes = {
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
   xAxisHeight: PropTypes.number.isRequired,
+  computedDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({