Prettify chart files

components/chart/chart-legend.js

@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
 }
 
 ChartLegend.propTypes = {
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     justifyContent: 'flex-end',
-    width: CHART_YAXIS_WIDTH
+    width: CHART_YAXIS_WIDTH,
   },
   text: {
     ...Typography.label,
   },
   textBold: {
-    ...Typography.labelBold
+    ...Typography.labelBold,
-  }
+  },
 })
 
 export default ChartLegend

components/chart/horizontal-grid.js

@@ -5,18 +5,19 @@ import { StyleSheet, View } from 'react-native'
 import { getTickPositions } from '../helpers/chart'
 
 import { Colors } from '../../styles'
-import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
+import {
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  CHART_YAXIS_WIDTH,
+} from '../../config'
 
 const HorizontalGrid = ({ height }) => {
-  return getTickPositions(height).map(tick => {
+  return getTickPositions(height).map((tick) => {
-    return (
+    return <View key={tick} top={tick} {...styles.line} />
-      <View key={tick} top={tick} {...styles.line}/>
-    )
   })
 }
 
 HorizontalGrid.propTypes = {
-  height: PropTypes.number
+  height: PropTypes.number,
 }
 
 const styles = StyleSheet.create({
@@ -26,8 +27,8 @@ const styles = StyleSheet.create({
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     left: CHART_YAXIS_WIDTH,
     position: 'absolute',
-    right: 0
+    right: 0,
-  }
+  },
 })
 
 export default HorizontalGrid

components/chart/symptom-cell.js

@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
   CHART_DOT_RADIUS,
-  CHART_GRID_LINE_HORIZONTAL_WIDTH
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
 } from '../../config'
 
 const SymptomCell = ({
@@ -14,11 +14,11 @@ const SymptomCell = ({
   index,
   symptom,
   symptomValue,
-  isSymptomDataComplete
+  isSymptomDataComplete,
 }) => {
-
   const shouldDrawDot = symptomValue !== false
-  const styleCell = index !== 0
+  const styleCell =
+    index !== 0
       ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
       : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
   let styleDot
@@ -26,10 +26,10 @@ const SymptomCell = ({
   if (shouldDrawDot) {
     const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
-    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
+    const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
-    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
+    const backgroundColor =
-      'white' : symptomColor
+      isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
-    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
+    const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
     const borderColor = symptomColor
     styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
   }
@@ -45,10 +45,7 @@ SymptomCell.propTypes = {
   height: PropTypes.number,
   index: PropTypes.number.isRequired,
   symptom: PropTypes.string,
-  symptomValue: PropTypes.oneOfType([
+  symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    PropTypes.bool,
-    PropTypes.number,
-  ]),
   isSymptomDataComplete: PropTypes.bool,
 }
 
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     borderLeftColor: Colors.grey,
     borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
-    ...Containers.centerItems
+    ...Containers.centerItems,
   },
   topBorder: {
     borderTopColor: Colors.grey,
@@ -68,7 +65,7 @@ const styles = StyleSheet.create({
   dot: {
     width: CHART_DOT_RADIUS * 2,
     height: CHART_DOT_RADIUS * 2,
-    borderRadius: 50
+    borderRadius: 50,
-  }
+  },
 })
 export default SymptomCell

components/chart/symptom-icon.js

@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems
+    ...Containers.centerItems,
-  }
+  },
 })
 
 export default SymptomIcon

components/chart/tick-list.js

@@ -7,12 +7,10 @@ import Tick from './tick'
 import { getTickList } from '../helpers/chart'
 
 const TickList = ({ height }) => {
-
   return (
     <View style={[styles.container, height]}>
-      {
+      {getTickList(height).map(
-        getTickList(height)
+        ({ isBold, label, position, shouldShowLabel, tickHeight }) => {
-          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
           return (
             <Tick
               height={tickHeight}
@@ -23,8 +21,8 @@ const TickList = ({ height }) => {
               yPosition={position}
             />
           )
-          })
         }
+      )}
     </View>
   )
 }
@@ -35,8 +33,8 @@ TickList.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
-  }
+  },
 })
 
 export default TickList

components/chart/tick.js

@@ -27,7 +27,6 @@ Tick.propTypes = {
   label: PropTypes.string,
 }
 
-
 const text = {
   textAlign: 'right',
 }
@@ -36,17 +35,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute',
     right: 0,
-    width: CHART_TICK_WIDTH
+    width: CHART_TICK_WIDTH,
   },
   textBold: {
     fontSize: Sizes.base,
     fontWeight: 'bold',
-    ...text
+    ...text,
   },
   textNormal: {
     fontSize: Sizes.small,
-    ...text
+    ...text,
-  }
+  },
 })
 
 export default Tick

components/chart/tutorial.js

@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
 const Tutorial = ({ onClose }) => {
   return (
     <View style={styles.container}>
-      <Image resizeMode='contain' source={image} style={styles.image} />
+      <Image resizeMode="contain" source={image} style={styles.image} />
       <View style={styles.textContainer}>
         <AppText>{chart.tutorial}</AppText>
       </View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
 }
 
 Tutorial.propTypes = {
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   container: {
     ...Containers.rowContainer,
-    padding: Spacing.large
+    padding: Spacing.large,
   },
   image: {
-    height: 40
+    height: 40,
   },
   textContainer: {
-    width: '70%'
+    width: '70%',
-  }
+  },
 })
 
 export default Tutorial

components/chart/y-axis.js

@@ -13,7 +13,7 @@ const YAxis = ({
   symptomsToDisplay,
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
-  xAxisHeight
+  xAxisHeight,
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
@@ -22,14 +22,13 @@ const YAxis = ({
       {shouldShowTemperatureColumn && <TickList height={height} />}
       <ChartLegend height={xAxisHeight} />
       <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
-        {symptomsToDisplay.map(symptom => (
+        {symptomsToDisplay.map((symptom) => (
           <SymptomIcon
             key={symptom}
             symptom={symptom}
             height={symptomIconHeight}
           />
-        )
+        ))}
-        )}
       </View>
     </View>
   )
@@ -40,13 +39,13 @@ YAxis.propTypes = {
   symptomsToDisplay: PropTypes.array,
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
-  xAxisHeight: PropTypes.number.isRequired
+  xAxisHeight: PropTypes.number.isRequired,
 }
 
 const styles = StyleSheet.create({
   yAxis: {
-    width: CHART_YAXIS_WIDTH
+    width: CHART_YAXIS_WIDTH,
-  }
+  },
 })
 
 export default YAxis