From 738a00c15b992fa7d705efd4f42dfe378cd98a83 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Mon, 17 Sep 2018 19:02:17 +0200
Subject: [PATCH] Draw NFP lines with svg
---
components/chart/day-column.js | 52 +++++++++++++---------------------
components/chart/styles.js | 15 +++++-----
2 files changed, 28 insertions(+), 39 deletions(-)
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 2f419a08..7f3fe5f1 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -2,10 +2,7 @@ import React, { Component } from 'react'
import {
Text, View, TouchableOpacity
} from 'react-native'
-import Svg,{
- G,
- Rect
-} from 'react-native-svg'
+import Svg,{ G, Rect, Line } from 'react-native-svg'
import Icon from 'react-native-vector-icons/Entypo'
import styles from './styles'
import config from '../../config'
@@ -51,16 +48,31 @@ export default class DayColumn extends Component {
const columnElements = []
if(drawLtlAt) {
- const ltlLine = (<View
- position = 'absolute'
- width={'100%'}
- top={drawLtlAt}
+ const ltlLine = (<Line
+ x1={0}
+ y1={drawLtlAt}
+ x2={config.columnWidth}
+ y2={drawLtlAt}
{...styles.nfpLine}
key='ltl'
/>)
columnElements.push(ltlLine)
}
+ if (drawFhmLine) {
+ const x = styles.nfpLine.strokeWidth / 2
+ const fhmLine = (<Line
+ x1={x}
+ y1={x}
+ x2={x}
+ y2={columnHeight}
+ {...styles.nfpLine}
+ key='ltl'
+ />)
+ columnElements.push(fhmLine)
+ }
+
+
if (y) {
columnElements.push(
<DotAndLine
@@ -87,30 +99,6 @@ export default class DayColumn extends Component {
</Text>
)
- // we merge the colors here instead of from the stylesheet because of a RN
- // bug that doesn't apply borderLeftColor otherwise
- const potentialCustomStyle = {
- height: columnHeight,
- borderLeftColor: 'grey',
- }
-
- if (drawFhmLine) {
- potentialCustomStyle.borderLeftColor = styles.nfpLine.borderColor
- potentialCustomStyle.borderLeftWidth = 3
- }
- // const column = React.createElement(
- // TouchableOpacity,
- // {
- // style: [styles.column.rect, potentialCustomStyle],
- // key: this.props.index.toString(),
- // onPress: () => {
- // this.passDateToDayView(dateString)
- // },
- // activeOpacity: 1
- // },
- // columnElements
- // )
-
const column = (
<G>
<Rect
diff --git a/components/chart/styles.js b/components/chart/styles.js
index e5d11999..318fd54b 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -6,6 +6,8 @@ const colorTemperatureLight = '#a67fb5'
const dotRadius = 5
const lineWidth = 1.5
const colorLtl = '#feb47b'
+const gridColor = 'lightgrey'
+const gridLineWidth = 0.5
const styles = {
curve: {
@@ -41,8 +43,8 @@ const styles = {
x:'0',
y:'0',
width: config.columnWidth,
- stroke: "red",
- strokeWidth: 0.25,
+ stroke: gridColor,
+ strokeWidth: gridLineWidth,
fill: 'transparent'
}
},
@@ -80,16 +82,15 @@ const styles = {
},
horizontalGrid: {
position:'absolute',
- borderColor: 'lightgrey',
- borderWidth: 0.5,
+ borderColor: gridColor,
+ borderWidth: gridLineWidth,
width: '100%',
borderStyle: 'solid',
left: config.columnWidth
},
nfpLine: {
- borderColor: colorLtl,
- borderWidth: lineWidth,
- borderStyle: 'solid'
+ stroke: colorLtl,
+ strokeWidth: lineWidth,
},
symptomRow: {
alignItems: 'center',
--
GitLab