diff --git a/components/chart.js b/components/chart.js index c0089a4..26067b4 100644 --- a/components/chart.js +++ b/components/chart.js @@ -49,7 +49,7 @@ export default class CycleChart extends Component { const dateLabel = dateString.split('-').slice(1).join('-') return ( - this.passDateToDayView(dateString)}> + this.passDateToDayView(dateString)}> {cycleDayNumber} {dateLabel} @@ -62,25 +62,27 @@ export default class CycleChart extends Component { Q13.5 6.8 15 3z" /> : null} - {y ? this.drawDotAndLines(y, index) : null} + {y ? this.drawDotAndLines(y, cycleDay.temperature.exclude, index) : null} ) } - drawDotAndLines(currY, index) { + drawDotAndLines(currY, exclude, index) { let lineToRight let lineToLeft const cols = this.state.columns - function makeLine(otherColY, x) { + function makeLine(otherColY, x, excludeLine) { const middleY = ((otherColY - currY) / 2) + currY - const rightTarget = [x, middleY] + const target = [x, middleY] + const lineStyle = excludeLine ? styles.curveExcluded : styles.curve + return } @@ -88,20 +90,25 @@ export default class CycleChart extends Component { const thereIsADotToTheLeft = index < cols.length - 1 && cols[index + 1].y if (thereIsADotToTheRight) { - lineToRight = makeLine(cols[index - 1].y, config.columnWidth) + const otherDot = cols[index - 1] + const excludedLine = otherDot.cycleDay.temperature.exclude || exclude + lineToRight = makeLine(otherDot.y, config.columnWidth, excludedLine) } if (thereIsADotToTheLeft) { - lineToLeft = makeLine(cols[index + 1].y, 0) + const otherDot = cols[index + 1] + const excludedLine = otherDot.cycleDay.temperature.exclude || exclude + lineToLeft = makeLine(otherDot.y, 0, excludedLine) } + const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots return ( + {lineToRight} + {lineToLeft} - {lineToRight} - {lineToLeft} ) } @@ -118,7 +125,7 @@ export default class CycleChart extends Component { ) }} - keyExtractor={item => item.label} + keyExtractor={item => item.dateString} > ) diff --git a/components/styles.js b/components/styles.js index 5cdb789..a6432b6 100644 --- a/components/styles.js +++ b/components/styles.js @@ -5,10 +5,19 @@ const styles = { stroke: '#ffc425', strokeWidth: 2 }, + curveExcluded: { + stroke: 'lightgrey', + strokeWidth: 2, + strokeDashArray: [4] + }, curveDots: { fill: '#00aedb', r: 6 }, + curveDotsExcluded: { + fill: 'lightgrey', + r: 6 + }, column: { label: { date: {