Resolve "don't show temperature chart part of chart when temp not tracked"

components/chart/chart.js

@@ -2,11 +2,13 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 
+import NoData from './no-data'
 import AppLoadingView from '../app-loading'
 import YAxis from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
 import HorizontalGrid from './horizontal-grid'
+import AppText from '../app-text'
 
 import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
@@ -14,7 +16,7 @@ import { scaleObservable } from '../../local-storage'
 import { makeColumnInfo } from '../helpers/chart'
 
 import config from '../../config'
-
+import { shared } from '../../i18n/en/labels'
 import styles from './styles'
 
 export default class CycleChart extends Component {
@@ -25,9 +27,26 @@ export default class CycleChart extends Component {
 
   constructor(props) {
     super(props)
+
     this.state = {}
     this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
     this.getFhmAndLtlInfo = nfpLines()
+    this.shouldShowTemperatureColumn = false
+
+    this.prepareSymptomData()
+  }
+
+  prepareSymptomData = () => {
+    this.symptomRowSymptoms = config.symptoms.filter((symptomName) => {
+      return this.cycleDaysSortedByDate.some(cycleDay => {
+        return cycleDay[symptomName]
+      })
+    })
+    this.chartSymptoms = [...this.symptomRowSymptoms]
+    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+      this.chartSymptoms.push('temperature')
+      this.shouldShowTemperatureColumn = true
+    }
   }
 
   renderColumn = ({ item, index }) => {
@@ -40,52 +59,40 @@ export default class CycleChart extends Component {
         columnHeight={this.columnHeight}
         symptomRowSymptoms={this.symptomRowSymptoms}
         chartSymptoms={this.chartSymptoms}
+        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
         getFhmAndLtlInfo={this.getFhmAndLtlInfo}
+        xAxisHeight={this.xAxisHeight}
       />
     )
   }
 
+  reCalculateChartInfo = (nativeEvent) => {
+    const { height, width } = nativeEvent.layout
+    const xAxisCoefficient = this.shouldShowTemperatureColumn ?
+      config.xAxisHeightPercentage : config.xAxisHeightPercentageLarge
+    const symptomCoefficient = this.shouldShowTemperatureColumn ?
+      config.symptomHeightPercentage : config.symptomHeightPercentageLarge
+
+    this.xAxisHeight = height * xAxisCoefficient
+    const remainingHeight = height - this.xAxisHeight
+    this.symptomHeight = remainingHeight * symptomCoefficient
+    this.symptomRowHeight = this.symptomRowSymptoms.length *
+      this.symptomHeight
+    this.columnHeight = remainingHeight - this.symptomRowHeight
+    const chartHeight = this.shouldShowTemperatureColumn ?
+      height : (this.symptomRowHeight + this.xAxisHeight)
+
+    const numberOfColumnsToRender = Math.round(width / config.columnWidth)
+    const columns = makeColumnInfo()
+
+    this.setState({ columns, chartHeight, numberOfColumnsToRender })
+  }
+
   onLayout = ({ nativeEvent }) => {
     if (this.state.chartHeight) return
-    const height = nativeEvent.layout.height
-    const reCalculateChartInfo = () => {
-      // how many symptoms need to be displayed on the chart's upper symptom row?
-      this.symptomRowSymptoms = [
-        'bleeding',
-        'mucus',
-        'cervix',
-        'sex',
-        'desire',
-        'pain',
-        'mood',
-        'note'
-      ].filter((symptomName) => {
-        return this.cycleDaysSortedByDate.some(cycleDay => {
-          return cycleDay[symptomName]
-        })
-      })
 
-      this.xAxisHeight = height * config.xAxisHeightPercentage
-      const remainingHeight = height - this.xAxisHeight
-      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
-      this.symptomRowHeight = this.symptomRowSymptoms.length *
-        this.symptomHeight
-      this.columnHeight = remainingHeight - this.symptomRowHeight
-
-      this.chartSymptoms = [...this.symptomRowSymptoms]
-      if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
-        this.chartSymptoms.push('temperature')
-      }
-
-      const columnData = makeColumnInfo()
-      this.setState({
-        columns: columnData,
-        chartHeight: height
-      })
-    }
-
-    reCalculateChartInfo()
-    this.updateListeners(reCalculateChartInfo)
+    this.reCalculateChartInfo(nativeEvent)
+    this.updateListeners(this.reCalculateChartInfo)
   }
 
   updateListeners(dataUpdateHandler) {
@@ -110,44 +117,60 @@ export default class CycleChart extends Component {
   }
 
   render() {
-    const { chartHeight, chartLoaded } = this.state
+    const { chartHeight, chartLoaded, numberOfColumnsToRender } = this.state
+    const shouldShowChart = this.chartSymptoms.length > 0 ? true : false
+
     return (
-      <View
-        onLayout={this.onLayout}
-        style={styles.container}
-      >
-        {!chartLoaded && <AppLoadingView />}
+      <View onLayout={this.onLayout} style={styles.container}>
+        {!shouldShowChart && <NoData navigate={this.props.navigate}/>}
+        {shouldShowChart && !chartHeight && !chartLoaded && <AppLoadingView />}
+        <View style={styles.chartContainer}>
+          {shouldShowChart && (
+            <View style={styles.chartArea}>
 
-        {chartHeight && chartLoaded && (
-          <React.Fragment>
-            <YAxis
-              height={this.columnHeight}
-              symptomsToDisplay={this.symptomRowSymptoms}
-              symptomsSectionHeight={this.symptomRowHeight}
-            />
-            <HorizontalGrid
-              height={this.columnHeight}
-              startPosition={this.symptomRowHeight}
-            />
-          </React.Fragment>
-        )}
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  <YAxis
+                    height={this.columnHeight}
+                    symptomsToDisplay={this.symptomRowSymptoms}
+                    symptomsSectionHeight={this.symptomRowHeight}
+                    shouldShowTemperatureColumn=
+                      {this.shouldShowTemperatureColumn}
+                    xAxisHeight={this.xAxisHeight}
+                  />
+                  {this.shouldShowTemperatureColumn && (<HorizontalGrid
+                    height={this.columnHeight}
+                    startPosition={this.symptomRowHeight}
+                  />)}
+                </React.Fragment>
+              )}
 
-        {chartHeight &&
-          <FlatList
-            horizontal={true}
-            inverted={true}
-            showsHorizontalScrollIndicator={false}
-            data={this.state.columns}
-            renderItem={this.renderColumn}
-            keyExtractor={item => item}
-            initialNumToRender={15}
-            windowSize={30}
-            onLayout={() => this.setState({chartLoaded: true})}
-            onEndReached={() => this.setState({end: true})}
-            ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
-            updateCellsBatchingPeriod={800}
-          />
-        }
+              {chartHeight &&
+               <FlatList
+                 horizontal={true}
+                 inverted={true}
+                 showsHorizontalScrollIndicator={false}
+                 data={this.state.columns}
+                 renderItem={this.renderColumn}
+                 keyExtractor={item => item}
+                 initialNumToRender={numberOfColumnsToRender}
+                 windowSize={30}
+                 onLayout={() => this.setState({chartLoaded: true})}
+                 onEndReached={() => this.setState({end: true})}
+                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+                 updateCellsBatchingPeriod={800}
+                 contentContainerStyle={{height: chartHeight}}
+               />
+              }
+            </View>
+          )}
+        </View>
+        {shouldShowChart && chartLoaded && !this.shouldShowTemperatureColumn
+          && (
+            <View style={styles.centerItem}>
+              <AppText style={{textAlign: 'center'}}>{shared.noTemperatureWarning}</AppText>
+            </View>
+          )}
       </View>
     )
   }