Introduces YAxis component

components/chart/chart.js

@@ -1,31 +1,17 @@
 import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import { LocalDate } from 'js-joda'
-import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
+import YAxis, { makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
 import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
-import { cycleDayColor } from '../../styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
-import AppText from '../app-text'
-import AppLoadingView from '../app-loading'
-import { shared as labels } from '../../i18n/en/labels'
-import DripIcon from '../../assets/drip-icons'
-import DripHomeIcon from '../../assets/drip-home-icons'
-import nothingChanged from '../../db/db-unchanged'
 
-const symptomIcons = {
+import AppLoadingView from '../app-loading'
-  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
+
-  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
+import nothingChanged from '../../db/db-unchanged'
-  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
-  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
-  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
-  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
-  mood: <DripIcon size={16} name='drip-icon-mood' color={styles.iconShades.mood[0]}/>,
-  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
-}
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -129,49 +115,27 @@ export default class CycleChart extends Component {
   }
 
   render() {
+    const { chartHeight, chartLoaded } = this.state
     return (
       <View
         onLayout={this.onLayout}
         style={{ flexDirection: 'row', flex: 1 }}
       >
-        {!this.state.chartLoaded && <AppLoadingView />}
+        {!chartLoaded && <AppLoadingView />}
 
-        {this.state.chartHeight && this.state.chartLoaded &&
+        {chartHeight && chartLoaded && (
-          <View>
+          <YAxis
-            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
+            height={this.columnHeight}
-              {this.symptomRowSymptoms.map(symptomName => {
+            symptomsToDisplay={this.symptomRowSymptoms}
-                return <View
+            symptomsSectionHeight={this.symptomRowHeight}
-                  style={{ alignItems: 'center', justifyContent: 'center' }}
+          />
-                  key={symptomName}
+        )}
-                  width={styles.yAxis.width}
-                  height={this.symptomRowHeight /
-                    this.symptomRowSymptoms.length}
-                >
-                  {symptomIcons[symptomName]}
-                </View>
-              })}
-            </View>
-            <View style={[styles.yAxis, {height: this.columnHeight}]}>
-              {makeYAxisLabels(this.columnHeight)}
-            </View>
-            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <DripHomeIcon
-                name="circle"
-                size={styles.yAxis.width - 7}
-                color={cycleDayColor}
-              />
-              <AppText style={[styles.yAxisLabels.dateLabel]}>
-                {labels.date.toLowerCase()}
-              </AppText>
-            </View>
-          </View>}
 
-
+        {chartHeight && chartLoaded &&
-        {this.state.chartHeight && this.state.chartLoaded &&
           makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
         }
 
-        {this.state.chartHeight &&
+        {chartHeight &&
           <FlatList
             horizontal={true}
             inverted={true}

components/chart/y-axis.js

@@ -1,9 +1,31 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { View } from 'react-native'
+
 import config from '../../config'
-import styles from './styles'
 import { scaleObservable, unitObservable } from '../../local-storage'
+
 import AppText from '../app-text'
+import DripIcon from '../../assets/drip-icons'
+import DripHomeIcon from '../../assets/drip-home-icons'
+
+import styles from './styles'
+import { cycleDayColor } from '../../styles'
+
+import { shared as labels } from '../../i18n/en/labels'
+
+
+const symptomIcons = {
+  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
+  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
+  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
+  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
+  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
+  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
+  mood: <DripIcon size={16} name='drip-icon-mood' color={styles.iconShades.mood[0]}/>,
+  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
+}
+
 
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value
@@ -73,3 +95,41 @@ function getAbsoluteValue(relative, columnHeight) {
   const scaleHeight = columnHeight - 2 * verticalPadding
   return scaleHeight * relative + verticalPadding
 }
+
+const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
+  return (
+    <View>
+      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
+        {symptomsToDisplay.map(symptomName => {
+          return <View
+            style={{ alignItems: 'center', justifyContent: 'center' }}
+            key={symptomName}
+            width={styles.yAxis.width}
+            height={symptomsSectionHeight / symptomsToDisplay.length}
+          >
+            {symptomIcons[symptomName]}
+          </View>
+        })}
+      </View>
+      <View style={[styles.yAxis, { height }]}>{makeYAxisLabels(height)}</View>
+      <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
+        <DripHomeIcon
+          name="circle"
+          size={styles.yAxis.width - 7}
+          color={cycleDayColor}
+        />
+        <AppText style={[styles.yAxisLabels.dateLabel]}>
+          {labels.date.toLowerCase()}
+        </AppText>
+      </View>
+    </View>
+  )
+}
+
+YAxis.propTypes = {
+  height: PropTypes.number,
+  symptomsToDisplay: PropTypes.array,
+  symptomsSectionHeight: PropTypes.number,
+}
+
+export default YAxis