Make var names more precise

components/chart/chart.js

@@ -134,14 +134,16 @@ const CycleChart = ({ navigate, setDate }) => {
     )
   }
 
-  const getcomputedDateInView = () => {
+  const getLeftmostComputedDateInView = () => {
-    const columnIndex = Math.floor(currentScrollPosition / CHART_COLUMN_WIDTH)
+    const rightmostVisibleIndexInView = Math.floor(
-    const leftIndex =
+      currentScrollPosition / CHART_COLUMN_WIDTH
-      columnIndex + numberOfColumnsToRender >= columns.length
+    )
+    const leftmostVisibleIndexInView =
+      rightmostVisibleIndexInView + numberOfColumnsToRender >= columns.length
         ? 153
-        : columnIndex + numberOfColumnsToRender
+        : rightmostVisibleIndexInView + numberOfColumnsToRender
-    // detect oldest visible day to render its month dynamically
+    // detect leftmost aka oldest visible day to render its month dynamically
-    return columns[leftIndex]
+    return columns[leftmostVisibleIndexInView]
   }
 
   const renderColumn = ({ item }) => {
@@ -181,7 +183,7 @@ const CycleChart = ({ navigate, setDate }) => {
             symptomsSectionHeight={symptomRowHeight}
             shouldShowTemperatureColumn={shouldShowTemperatureColumn}
             xAxisHeight={xAxisHeight}
-            computedDate={getcomputedDateInView()}
+            computedDate={getLeftmostComputedDateInView()}
           />
           <MainGrid
             data={columns}