Merge branch '436-chart-fix' into 'rebased-redesign'

Resolve "Chart"

See merge request bloodyhealth/drip!308

components/chart/chart-line.js

@@ -9,7 +9,7 @@ import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../conf
 const ChartLine = ({ path, isNfpLine }) => {
   const color = isNfpLine ? Colors.orange : Colors.grey
   const width = isNfpLine
-    ? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH
+    ? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
 
   return (
     <Shape d={path} stroke={color} strokeWidth={width} />

components/chart/chart.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
 import AppPage from '../common/app-page'
@@ -63,10 +63,10 @@ class CycleChart extends Component {
     this.setState({ shouldShowHint: false })
   }
 
-  onLayout = ({ nativeEvent }) => {
+  onLayout = () => {
     if (this.state.chartHeight) return false
 
-    this.reCalculateChartInfo(nativeEvent)
+    this.reCalculateChartInfo()
     this.updateListeners(this.reCalculateChartInfo)
   }
 
@@ -100,17 +100,17 @@ class CycleChart extends Component {
     )
   }
 
-  reCalculateChartInfo = (nativeEvent) => {
-    const { height, width } = nativeEvent.layout
+  reCalculateChartInfo = () => {
+    const { width, height } = Dimensions.get('window')
 
-    this.xAxisHeight = height * CHART_XAXIS_HEIGHT_RATIO
-    const remainingHeight = height - this.xAxisHeight
+    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+    const remainingHeight = height * 0.7 - this.xAxisHeight
     this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
     this.symptomRowHeight = this.symptomRowSymptoms.length *
       this.symptomHeight
     this.columnHeight = remainingHeight - this.symptomRowHeight
     const chartHeight = this.shouldShowTemperatureColumn ?
-      height : (this.symptomRowHeight + this.xAxisHeight)
+      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
     const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
     const columns = makeColumnInfo()
 

components/chart/day-column.js

@@ -104,10 +104,11 @@ class DayColumn extends Component {
           date={dateString}
         />
 
-        { symptomRowSymptoms.map(symptom => {
+        { symptomRowSymptoms.map((symptom, i) => {
           const hasSymptomData = this.data.hasOwnProperty(symptom)
           return (
             <SymptomCell
+              index={i}
               key={symptom}
               symptom={symptom}
               symptomValue={hasSymptomData && this.data[symptom]}

components/chart/symptom-cell.js

@@ -11,13 +11,16 @@ import {
 
 const SymptomCell = ({
   height,
+  index,
   symptom,
   symptomValue,
   isSymptomDataComplete
 }) => {
 
   const shouldDrawDot = symptomValue !== false
-  const styleCell = [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+  const styleCell = index !== 0
+    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
   let styleDot
 
   if (shouldDrawDot) {
@@ -40,6 +43,7 @@ const SymptomCell = ({
 
 SymptomCell.propTypes = {
   height: PropTypes.number,
+  index: PropTypes.number.isRequired,
   symptom: PropTypes.string,
   symptomValue: PropTypes.oneOfType([
     PropTypes.bool,
@@ -51,10 +55,16 @@ SymptomCell.propTypes = {
 const styles = StyleSheet.create({
   cell: {
     backgroundColor: 'white',
-    borderColor: Colors.greyLight,
-    borderWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    borderBottomColor: Colors.grey,
+    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+    borderLeftColor: Colors.grey,
+    borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     ...Containers.centerItems
   },
+  topBorder: {
+    borderTopColor: Colors.grey,
+    borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  },
   dot: {
     width: CHART_DOT_RADIUS * 2,
     height: CHART_DOT_RADIUS * 2,