From 7a9b3558cf05565a0823f7a668e2fd83595c158a Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 19 Jun 2018 12:03:09 +0200
Subject: [PATCH] Simple way to place bleeding symbol

---
 chart.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/chart.js b/chart.js
index 251c762..e761906 100644
--- a/chart.js
+++ b/chart.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
-import { temperatureDaysSortedByDate, getOrCreateCycleDay } from './db'
+import { bleedingDaysSortedByDate, temperatureDaysSortedByDate, getOrCreateCycleDay } from './db'
 import range from 'date-range'
 import Svg,{
   G,
   Polyline,
   Rect,
   Text,
+  Circle
 } from 'react-native-svg'
 import { LocalDate } from 'js-joda'
 
@@ -61,6 +62,17 @@ function normalizeToScale(temp) {
   return scaleHeight * tempInScaleDecs
 }
 
+function placeBleedingSymbolsOnColumns() {
+  return bleedingDaysSortedByDate.map(day => {
+    // TODO handle no bleeding days, same for curve
+    // TODO exclude future bleeding days (??)
+    const match = xAxisDatesWithRightOffset.find(tick => {
+      return tick.label === day.date
+    })
+    const x = match.rightOffset + columnWidth / 2
+    return (<Circle key={day.date} cx={x} cy="50" r="7" fill="red"/>)
+  })
+}
 
 export default class SvgExample extends Component {
   constructor(props) {
@@ -103,6 +115,9 @@ export default class SvgExample extends Component {
           width="2000"
         >
           { xAxisDatesWithRightOffset.map(this.makeDayColumn.bind(this)) }
+
+          { placeBleedingSymbolsOnColumns() }
+
           <Polyline
             points={determineCurvePoints()}
             fill="none"