diff --git a/components/chart.js b/components/chart.js index 8dfeab2..a05403c 100644 --- a/components/chart.js +++ b/components/chart.js @@ -33,7 +33,8 @@ export default class CycleChart extends Component { this.xAxisTicks = makeXAxisTicks(cycleDaysToShow) this.state = { - curveCoordinates: this.makeCurveCoordinates() + curveCoordinates: this.makeCurveCoordinates(), + bleedIconCoordinates: this.makeBleedIconCoordinates() } this.setStateWithNewCurveCoordinates = (function (chartComponent) { @@ -44,11 +45,21 @@ export default class CycleChart extends Component { } })(this) + this.setStateWithNewBleedIconCoordinates = (function (chartComponent) { + return function () { + chartComponent.setState({ + bleedIconCoordinates: chartComponent.makeBleedIconCoordinates() + }) + } + })(this) + temperatureDaysSortedByDate.addListener(this.setStateWithNewCurveCoordinates) + bleedingDaysSortedByDate.addListener(this.setStateWithNewBleedIconCoordinates) } componentWillUnmount() { temperatureDaysSortedByDate.removeListener(this.setStateWithNewCurveCoordinates) + temperatureDaysSortedByDate.removeListener(this.setStateWithNewBleedIconCoordinates) } passDateToDayView(dateString) { @@ -84,15 +95,9 @@ export default class CycleChart extends Component { } placeBleedingSymbolsOnColumns() { - return bleedingDaysSortedByDate - .filter(cycleDayIsNotInTheFuture()) - .map(day => { - const match = this.xAxisTicks.find(tick => { - return tick.label === day.date - }) - const x = match.rightOffset + columnWidth / 2 - return () - }) + return this.state.bleedIconCoordinates.map(x => { + return () + }) } makeCurveCoordinates() { @@ -102,6 +107,17 @@ export default class CycleChart extends Component { .map(makeCurveCoordinatesForChunk.bind(this)) } + makeBleedIconCoordinates() { + return bleedingDaysSortedByDate + .filter(cycleDayIsNotInTheFuture()) + .map(day => { + const match = this.xAxisTicks.find(tick => { + return tick.label === day.date + }) + return match.rightOffset + columnWidth / 2 + }) + } + makeTemperatureCurves() { return this.state.curveCoordinates.map(makeCurveFromPoints) }