Add mood category to chart

components/chart/chart.js

@@ -23,6 +23,7 @@ const symptomIcons = {
   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: <DripHomeIcon size={16} name='circle' color={styles.iconShades.mood[0]}/>,
   note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
 }
 
@@ -62,6 +63,7 @@ export default class CycleChart extends Component {
         'sex',
         'desire',
         'pain',
+        'mood',
         'note'
       ].filter((symptomName) => {
         return this.cycleDaysSortedByDate.some(cycleDay => {

components/chart/day-column.js

@@ -44,6 +44,10 @@ export default class DayColumn extends Component {
           // is any pain documented?
           acc.pain = cycleDay.pain &&
             Object.values(cycleDay.pain).some(x => x === true)
+        } else if (symptom === 'mood') {
+          // is mood documented?
+          acc.mood = cycleDay.mood &&
+            Object.values(cycleDay.mood).some(x => x === true)
         }
         acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
         return acc
@@ -214,6 +218,18 @@ export default class DayColumn extends Component {
           />
         </SymptomIconView>
       ),
+      mood: (
+        <SymptomIconView
+          value={this.data.mood}
+          symptomHeight={symptomHeight}
+          key='mood'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.mood}
+          />
+        </SymptomIconView>
+      ),
       note: (
         <SymptomIconView
           value={this.data.note}

components/chart/styles.js

@@ -77,6 +77,7 @@ const styles = {
       '#9e346c',
     ],
     'pain': ['#bccd67'],
+    'mood': ['#BC6642'],
     'note': ['#6CA299']
   },
   yAxis: {

components/cycle-day/cycle-day-overview.js

@@ -13,6 +13,7 @@ import styles from '../../styles'
 import * as labels from '../../i18n/en/cycle-day'
 import AppText from '../app-text'
 import DripIcon from '../../assets/drip-icons'
+import DripHomeIcon from '../../assets/drip-home-icons'
 
 const bleedingLabels = labels.bleeding.labels
 const feelingLabels = labels.mucus.feeling.categories
@@ -251,7 +252,7 @@ export default class CycleDayOverView extends Component {
               onPress={() => this.navigate('MoodEditView')}
               data={this.getLabel('mood')}
               disabled={dateInFuture}
-              iconName='drip-icon-pain'
+              iconName='circle'
             >
             </SymptomBox>
             <SymptomBox
@@ -287,7 +288,10 @@ class SymptomBox extends Component {
         disabled={this.props.disabled}
       >
         <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-          <DripIcon name={this.props.iconName} size={50} color={d ? 'white' : 'black'}/>
+          {this.props.iconName == 'circle'
+            ? <DripHomeIcon name='circle' size={50} color={d ? 'white' : 'black'}/>
+            : <DripIcon name={this.props.iconName} size={50} color={d ? 'white' : 'black'}/>
+          }
           <AppText style={[textActive, disabledStyle]}>
             {this.props.title.toLowerCase()}
           </AppText>

components/cycle-day/symptoms/mood.js

@@ -15,8 +15,8 @@ export default class Mood extends Component {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
-    if (cycleDay && cycleDay.pain) {
+    if (cycleDay && cycleDay.mood) {
-      this.state = Object.assign({}, cycleDay.pain)
+      this.state = Object.assign({}, cycleDay.mood)
     } else {
       this.state = {}
     }