Redesign chart

components/chart/dot-and-line.js

@@ -2,8 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
-import styles from './styles'
-import config from '../../config'
+import { Colors } from '../../styles/redesign'
+
+import {
+  CHART_COLUMN_WIDTH,
+  CHART_COLUMN_MIDDLE,
+  CHART_DOT_RADIUS,
+  CHART_STROKE_WIDTH
+} from '../../config'
 
 export default class DotAndLine extends Component {
   static propTypes = {
@@ -20,48 +26,56 @@ export default class DotAndLine extends Component {
   }
 
   render() {
-    const y = this.props.y
-    const exclude = this.props.exclude
-    let lineToRight
-    let lineToLeft
+    const {
+      exclude,
+      leftTemperatureExclude,
+      leftY,
+      rightTemperatureExclude,
+      rightY,
+      y
+    } = this.props
+    let excludeLeftLine, excludeRightLine, lineLeft, lineRight
 
-    if (this.props.leftY) {
-      const middleY = ((this.props.leftY - y) / 2) + y
-      const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(y, middleY, 0, excludedLine)
+    if (leftY) {
+      const middleY = ((leftY - y) / 2) + y
+      excludeLeftLine = leftTemperatureExclude || exclude
+      lineLeft = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE - CHART_DOT_RADIUS, y)
+        .lineTo(0, middleY)
     }
-    if (this.props.rightY) {
-      const middleY = ((y - this.props.rightY) / 2) + this.props.rightY
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(y, middleY, config.columnWidth, excludedLine)
+    if (rightY) {
+      const middleY = ((y - rightY) / 2) + rightY
+      excludeRightLine = rightTemperatureExclude || exclude
+      lineRight = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE + CHART_DOT_RADIUS, y)
+        .lineTo(CHART_COLUMN_WIDTH, middleY)
     }
 
-    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    const radius = dotStyle.r
-    const dot = (
-      <Shape
-        d={new Path()
-          .moveTo(config.columnMiddle, y - radius)
-          .arc(0, radius * 2, radius)
-          .arc(0, radius * -2, radius)
-        }
-        fill={dotStyle.fill}
-        key='dot'
-      />
+    const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
+      .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
+    const dotColor = exclude ? Colors.tourquise : Colors.tourquiseDark
+    const lineColorLeft = excludeLeftLine ?
+      Colors.tourquise : Colors.tourquiseDark
+    const lineColorRight = excludeRightLine ?
+      Colors.tourquise : Colors.tourquiseDark
+
+    return(
+      <React.Fragment>
+        <Shape
+          d={lineLeft}
+          stroke={lineColorLeft}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y}
+        />
+        <Shape
+          d={lineRight}
+          stroke={lineColorRight}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y + CHART_DOT_RADIUS}
+        />
+        <Shape d={dot} stroke={dotColor} strokeWidth={CHART_STROKE_WIDTH} key='dot' />
+      </React.Fragment>
     )
-    return [lineToLeft, lineToRight, dot]
   }
 }
-
-function makeLine(currY, middleY, x, excludeLine) {
-  const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
-
-  return <Shape
-    stroke={lineStyle.stroke}
-    d={new Path()
-      .moveTo(config.columnMiddle, currY)
-      .lineTo(x, middleY)
-    }
-    key={x.toString()}
-  />
-}