Make DotAndLine its own component

components/chart/day-column.js

@@ -8,6 +8,7 @@ import config from './config'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import setUpFertilityStatusFunc from './nfp-lines'
+import DotAndLine from './dot-and-line'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
@@ -17,7 +18,17 @@ export default class DayColumn extends Component {
   constructor(props) {
     super(props)
   }
-  makeDayColumn(data, index) {
+
+  passDateToDayView(dateString) {
+    const cycleDay = getOrCreateCycleDay(dateString)
+    this.props.navigate('cycleDay', { cycleDay })
+  }
+
+  shouldComponentUpdate(newProps) {
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
+  }
+
+  render() {
     const {
       dateString,
       y,
@@ -25,7 +36,7 @@ export default class DayColumn extends Component {
       temperatureExclude,
       bleeding,
       mucus
-    } = data
+    } = this.props.item
     const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
 
     const columnElements = []
@@ -78,7 +89,14 @@ export default class DayColumn extends Component {
     }
 
     if (y) {
-      columnElements.push(...this.drawDotAndLine(y, temperatureExclude, index))
+      columnElements.push(
+        <DotAndLine
+          y={y}
+          exclude={temperatureExclude}
+          leftY={this.props.leftY}
+          rightY={this.props.righty}
+        />
+      )
     }
 
     const cycleDayNumber = getCycleDayNumber(dateString)
@@ -103,7 +121,7 @@ export default class DayColumn extends Component {
       TouchableOpacity,
       {
         style: styles.column.rect,
-        key: index.toString(),
+        key: this.props.index.toString(),
         onPress: () => {
           this.passDateToDayView(dateString)
         },
@@ -112,74 +130,4 @@ export default class DayColumn extends Component {
       columnElements
     )
   }
-
-  drawDotAndLine(currY, exclude) {
-    let lineToRight
-    let lineToLeft
-
-    function makeLine(leftY, rightY, direction, excludeLine) {
-      const colWidth = config.columnWidth
-      const heightDiff = -leftY - -rightY
-      const angle = Math.atan2(heightDiff, colWidth / 2)
-      const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
-      // hypotenuse, we add 3px for good measure, because otherwise the lines
-      // don't quite touch at the day border
-      const h = (colWidth / 2) / Math.cos(angle) + 3
-      // the rotation by default rotates from the middle of the line,
-      // but we want the transform origin to be at its beginning
-      // react native doesn't have transformOrigin, so we do this manually
-      // if it's the right line, we put the pivot at 3/4 of the column
-      // if it's to the left, at 1/4
-      const pivot = direction === 'right' ? colWidth / 4 : -(colWidth / 4)
-      const projectedX = -(h - colWidth) / 2 + pivot
-
-      return (<View
-        width={h}
-        position = 'absolute'
-        top={((leftY + rightY) / 2) - lineStyle.borderWidth / 2}
-        left={projectedX}
-        style={{
-          transform: [
-            {rotateZ: `${angle}rad`}
-          ],
-        }}
-        {...lineStyle}
-      />)
-    }
-
-    if (this.props.leftY) {
-      const middleY = ((this.props.leftY - currY) / 2) + currY
-      const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(middleY, currY, 'left', excludedLine)
-    }
-    if (this.props.rightY) {
-      const middleY = ((currY - this.props.rightY) / 2) + this.props.rightY
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(currY, middleY, 'right', excludedLine)
-    }
-
-    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    const dot = (
-      <View
-        position='absolute'
-        top={currY - (dotStyle.height / 2)}
-        left={config.columnMiddle - (dotStyle.width / 2)}
-        style={dotStyle}
-      />
-    )
-    return [lineToLeft, lineToRight, dot]
-  }
-
-  passDateToDayView(dateString) {
-    const cycleDay = getOrCreateCycleDay(dateString)
-    this.props.navigate('cycleDay', { cycleDay })
-  }
-
-  shouldComponentUpdate(newProps) {
-    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
-  }
-
-  render() {
-    return this.makeDayColumn(this.props.item, this.props.index)
-  }
 }

components/chart/dot-and-line.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import styles from './styles'
+import config from './config'
+
+export default class DotAndLine extends Component {
+  render() {
+    const y = this.props.y
+    const exclude = this.props.exclude
+    let lineToRight
+    let lineToLeft
+
+    if (this.props.leftY) {
+      const middleY = ((this.props.leftY - y) / 2) + y
+      const excludedLine = this.props.leftTemperatureExclude || exclude
+      lineToLeft = makeLine(middleY, y, 'left', excludedLine)
+    }
+    if (this.props.rightY) {
+      const middleY = ((y - this.props.rightY) / 2) + this.props.rightY
+      const excludedLine = this.props.rightTemperatureExclude || exclude
+      lineToRight = makeLine(y, middleY, 'right', excludedLine)
+    }
+
+    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
+    const dot = (
+      <View
+        position='absolute'
+        top={y - (dotStyle.height / 2)}
+        left={config.columnMiddle - (dotStyle.width / 2)}
+        style={dotStyle}
+      />
+    )
+    return [lineToLeft, lineToRight, dot]
+  }
+}
+
+function makeLine(leftY, rightY, direction, excludeLine) {
+  const colWidth = config.columnWidth
+  const heightDiff = -leftY - -rightY
+  const angle = Math.atan2(heightDiff, colWidth / 2)
+  const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
+  // hypotenuse, we add 3px for good measure, because otherwise the lines
+  // don't quite touch at the day border
+  const h = (colWidth / 2) / Math.cos(angle) + 3
+  // the rotation by default rotates from the middle of the line,
+  // but we want the transform origin to be at its beginning
+  // react native doesn't have transformOrigin, so we do this manually
+  // if it's the right line, we put the pivot at 3/4 of the column
+  // if it's to the left, at 1/4
+  const pivot = direction === 'right' ? colWidth / 4 : -(colWidth / 4)
+  const projectedX = -(h - colWidth) / 2 + pivot
+
+  return (<View
+    width={h}
+    position='absolute'
+    top={((leftY + rightY) / 2) - lineStyle.borderWidth / 2}
+    left={projectedX}
+    style={{
+      transform: [
+        { rotateZ: `${angle}rad` }
+      ],
+    }}
+    {...lineStyle}
+  />)
+}

package-lock.json

@@ -3479,8 +3479,8 @@
       "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
       "optional": true,
       "requires": {
-        "nan": "2.10.0",
+        "nan": "^2.9.2",
-        "node-pre-gyp": "0.10.0"
+        "node-pre-gyp": "^0.10.0"
       },
       "dependencies": {
         "abbrev": {
@@ -3502,21 +3502,19 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "delegates": "1.0.0",
+            "delegates": "^1.0.0",
-            "readable-stream": "2.3.6"
+            "readable-stream": "^2.0.6"
           }
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "balanced-match": "1.0.0",
+            "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
           }
         },
@@ -3527,18 +3525,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3573,7 +3568,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minipass": "2.2.4"
+            "minipass": "^2.2.1"
           }
         },
         "fs.realpath": {
@@ -3586,14 +3581,14 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "aproba": "1.2.0",
+            "aproba": "^1.0.3",
-            "console-control-strings": "1.1.0",
+            "console-control-strings": "^1.0.0",
-            "has-unicode": "2.0.1",
+            "has-unicode": "^2.0.0",
-            "object-assign": "4.1.1",
+            "object-assign": "^4.1.0",
-            "signal-exit": "3.0.2",
+            "signal-exit": "^3.0.0",
-            "string-width": "1.0.2",
+            "string-width": "^1.0.1",
-            "strip-ansi": "3.0.1",
+            "strip-ansi": "^3.0.1",
-            "wide-align": "1.1.2"
+            "wide-align": "^1.1.0"
           }
         },
         "glob": {
@@ -3601,12 +3596,12 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "fs.realpath": "1.0.0",
+            "fs.realpath": "^1.0.0",
-            "inflight": "1.0.6",
+            "inflight": "^1.0.4",
-            "inherits": "2.0.3",
+            "inherits": "2",
-            "minimatch": "3.0.4",
+            "minimatch": "^3.0.4",
-            "once": "1.4.0",
+            "once": "^1.3.0",
-            "path-is-absolute": "1.0.1"
+            "path-is-absolute": "^1.0.0"
           }
         },
         "has-unicode": {
@@ -3619,7 +3614,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "safer-buffer": "2.1.2"
+            "safer-buffer": "^2.1.0"
           }
         },
         "ignore-walk": {
@@ -3627,7 +3622,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minimatch": "3.0.4"
+            "minimatch": "^3.0.4"
           }
         },
         "inflight": {
@@ -3635,14 +3630,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "once": "1.4.0",
+            "once": "^1.3.0",
-            "wrappy": "1.0.2"
+            "wrappy": "1"
           }
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3652,9 +3646,8 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "number-is-nan": "1.0.1"
+            "number-is-nan": "^1.0.0"
           }
         },
         "isarray": {
@@ -3665,23 +3658,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "brace-expansion": "1.1.11"
+            "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "safe-buffer": "5.1.1",
+            "safe-buffer": "^5.1.1",
-            "yallist": "3.0.2"
+            "yallist": "^3.0.0"
           }
         },
         "minizlib": {
@@ -3689,13 +3679,12 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minipass": "2.2.4"
+            "minipass": "^2.2.1"
           }
         },
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3710,9 +3699,9 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "debug": "2.6.9",
+            "debug": "^2.1.2",
-            "iconv-lite": "0.4.21",
+            "iconv-lite": "^0.4.4",
-            "sax": "1.2.4"
+            "sax": "^1.2.4"
           }
         },
         "node-pre-gyp": {
@@ -3720,16 +3709,16 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "detect-libc": "1.0.3",
+            "detect-libc": "^1.0.2",
-            "mkdirp": "0.5.1",
+            "mkdirp": "^0.5.1",
-            "needle": "2.2.0",
+            "needle": "^2.2.0",
-            "nopt": "4.0.1",
+            "nopt": "^4.0.1",
-            "npm-packlist": "1.1.10",
+            "npm-packlist": "^1.1.6",
-            "npmlog": "4.1.2",
+            "npmlog": "^4.0.2",
-            "rc": "1.2.7",
+            "rc": "^1.1.7",
-            "rimraf": "2.6.2",
+            "rimraf": "^2.6.1",
-            "semver": "5.5.0",
+            "semver": "^5.3.0",
-            "tar": "4.4.1"
+            "tar": "^4"
           }
         },
         "nopt": {
@@ -3737,8 +3726,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "abbrev": "1.1.1",
+            "abbrev": "1",
-            "osenv": "0.1.5"
+            "osenv": "^0.1.4"
           }
         },
         "npm-bundled": {
@@ -3751,8 +3740,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "ignore-walk": "3.0.1",
+            "ignore-walk": "^3.0.1",
-            "npm-bundled": "1.0.3"
+            "npm-bundled": "^1.0.1"
           }
         },
         "npmlog": {
@@ -3760,16 +3749,15 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "are-we-there-yet": "1.1.4",
+            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "1.1.0",
+            "console-control-strings": "~1.1.0",
-            "gauge": "2.7.4",
+            "gauge": "~2.7.3",
-            "set-blocking": "2.0.0"
+            "set-blocking": "~2.0.0"
           }
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3779,9 +3767,8 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "wrappy": "1.0.2"
+            "wrappy": "1"
           }
         },
         "os-homedir": {
@@ -3799,8 +3786,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "os-homedir": "1.0.2",
+            "os-homedir": "^1.0.0",
-            "os-tmpdir": "1.0.2"
+            "os-tmpdir": "^1.0.0"
           }
         },
         "path-is-absolute": {
@@ -3818,10 +3805,10 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "deep-extend": "0.5.1",
+            "deep-extend": "^0.5.1",
-            "ini": "1.3.5",
+            "ini": "~1.3.0",
-            "minimist": "1.2.0",
+            "minimist": "^1.2.0",
-            "strip-json-comments": "2.0.1"
+            "strip-json-comments": "~2.0.1"
           },
           "dependencies": {
             "minimist": {
@@ -3836,13 +3823,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "core-util-is": "1.0.2",
+            "core-util-is": "~1.0.0",
-            "inherits": "2.0.3",
+            "inherits": "~2.0.3",
-            "isarray": "1.0.0",
+            "isarray": "~1.0.0",
-            "process-nextick-args": "2.0.0",
+            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "5.1.1",
+            "safe-buffer": "~5.1.1",
-            "string_decoder": "1.1.1",
+            "string_decoder": "~1.1.1",
-            "util-deprecate": "1.0.2"
+            "util-deprecate": "~1.0.1"
           }
         },
         "rimraf": {
@@ -3850,7 +3837,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "glob": "7.1.2"
+            "glob": "^7.0.5"
           }
         },
         "safe-buffer": {
@@ -3885,11 +3872,10 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
-            "code-point-at": "1.1.0",
+            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "3.0.1"
+            "strip-ansi": "^3.0.0"
           }
         },
         "string_decoder": {
@@ -3897,14 +3883,14 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "safe-buffer": "5.1.1"
+            "safe-buffer": "~5.1.0"
           }
         },
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
           "requires": {
-            "ansi-regex": "2.1.1"
+            "ansi-regex": "^2.0.0"
           }
         },
         "strip-json-comments": {
@@ -3917,13 +3903,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "chownr": "1.0.1",
+            "chownr": "^1.0.1",
-            "fs-minipass": "1.2.5",
+            "fs-minipass": "^1.2.5",
-            "minipass": "2.2.4",
+            "minipass": "^2.2.4",
-            "minizlib": "1.1.0",
+            "minizlib": "^1.1.0",
-            "mkdirp": "0.5.1",
+            "mkdirp": "^0.5.0",
-            "safe-buffer": "5.1.1",
+            "safe-buffer": "^5.1.1",
-            "yallist": "3.0.2"
+            "yallist": "^3.0.2"
           }
         },
         "util-deprecate": {
@@ -3936,7 +3922,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "string-width": "1.0.2"
+            "string-width": "^1.0.2"
           }
         },
         "wrappy": {