unified title to other plattforms, edited screenshots

components/chart/chart-legend.js

@@ -1,23 +1,21 @@
 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, currentDate }) => {
-  const displayedMonth = moment(currentDate).format('MMM')
-
+const ChartLegend = ({ height }) => {
   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}>{displayedMonth}</AppText>
+        <AppText style={styles.text}>{labels.date}</AppText>
       </View>
     </View>
   )
@@ -25,7 +23,6 @@ const ChartLegend = ({ height, currentDate }) => {
 
 ChartLegend.propTypes = {
   height: PropTypes.number.isRequired,
-  currentDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/chart/chart.js

@@ -32,7 +32,6 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  CHART_YAXIS_WIDTH,
   SYMPTOMS,
 } from '../../config'
 import { Spacing } from '../../styles'
@@ -98,7 +97,8 @@ const CycleChart = ({ navigate, setDate }) => {
   const shouldShowNoDataWarning =
     isTemperatureEnabled && chartSymptoms.indexOf('temperature') <= -1
 
-  const { height } = Dimensions.get('window')
+  const { width, 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,35 +117,6 @@ 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 getLeftmostComputedDateInView = () => {
-    const rightmostVisibleIndexInView = Math.floor(
-      currentScrollPosition / CHART_COLUMN_WIDTH
-    )
-    const leftmostVisibleIndexInView =
-      rightmostVisibleIndexInView + numberOfColumnsToRender >= columns.length
-        ? columns.length - 1
-        : rightmostVisibleIndexInView + numberOfColumnsToRender
-    // detect leftmost aka oldest visible day to render its month dynamically
-    return columns[leftmostVisibleIndexInView]
-  }
-
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
@@ -173,7 +144,7 @@ const CycleChart = ({ navigate, setDate }) => {
       contentContainerStyle={styles.pageContainer}
       scrollViewStyle={styles.page}
     >
-      <View style={styles.chartContainer} onLayout={onLayout}>
+      <View style={styles.chartContainer}>
         {shouldShowHint && <Tutorial onClose={hideHint} />}
         {shouldShowNoDataWarning && <NoTemperature />}
         <View style={styles.chartArea}>
@@ -183,15 +154,12 @@ const CycleChart = ({ navigate, setDate }) => {
             symptomsSectionHeight={symptomRowHeight}
             shouldShowTemperatureColumn={shouldShowTemperatureColumn}
             xAxisHeight={xAxisHeight}
-            computedDate={getLeftmostComputedDateInView()}
           />
           <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,14 +14,13 @@ const YAxis = ({
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
   xAxisHeight,
-  computedDate,
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
   return (
     <View>
       {shouldShowTemperatureColumn && <TickList height={height} />}
-      <ChartLegend height={xAxisHeight} currentDate={computedDate} />
+      <ChartLegend height={xAxisHeight} />
       <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
         {symptomsToDisplay.map((symptom) => (
           <SymptomIcon
@@ -41,7 +40,6 @@ YAxis.propTypes = {
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
   xAxisHeight: PropTypes.number.isRequired,
-  computedDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

metadata/en-US/title.txt

@@ -1 +1 @@
-drip. menstrual cycle and fertility tracking
+drip. period & fertility tracker