changes y-ticks and labels, cycle day display and colors of symbols

components/calendar.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { CalendarList } from 'react-native-calendars'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
+import {shadesOfRed, shadesOfGrey} from '../styles/index'
 
 export default class CalendarView extends Component {
   constructor(props) {
@@ -53,7 +54,7 @@ export default class CalendarView extends Component {
 }
 
 function toCalFormat(bleedingDaysSortedByDate) {
-  const shadesOfRed = ['#ffbaba', '#ff7b7b', '#ff5252', '#ff0000']
+  //const shadesOfRed = ['#ffbaba', '#ff7b7b', '#ff5252', '#ff0000']
   return bleedingDaysSortedByDate.reduce((acc, day) => {
     acc[day.date] = {
       startingDay: true,
@@ -66,7 +67,7 @@ function toCalFormat(bleedingDaysSortedByDate) {
 
 function predictionToCalFormat(predictedDays) {
   if (!predictedDays.length) return {}
-  const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
+  //const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
   const middleIndex = (predictedDays[0].length - 1) / 2
   return predictedDays.reduce((acc, setOfDays) => {
     setOfDays.reduce((accSet, day, i) => {

components/chart/day-column.js

@@ -73,7 +73,7 @@ export default class DayColumn extends Component {
     const shortDate = dateString.split('-').slice(1).join('-')
     const cycleDayLabel = (
       <Text style={label.number}>
-        {cycleDayNumber}
+        {cycleDayNumber ? cycleDayNumber : ' '}
       </Text>)
     const dateLabel = (
       <Text style = {label.date}>
@@ -120,7 +120,7 @@ export default class DayColumn extends Component {
             <Icon
               name='drop'
               size={18}
-              color='#900'
+              color={styles.bleedingIconShades[bleeding]}
               key='bleeding'
             />
           }

components/chart/styles.js

@@ -1,26 +1,33 @@
 import config from '../../config'
+import {primaryColor, shadesOfRed} from '../../styles/index'
+
+const colorTemperatur = '#765285'
+const colorTemperaturLight = '#a67fb5'
+const dotWidth = 10
+const lineWidth = 2
+const colorLtl = '#feb47b'
 
 const styles = {
   curve: {
     borderStyle: 'solid',
-    borderColor: '#ffc425',
+    borderColor: colorTemperatur,
-    borderWidth: 2,
+    borderWidth: lineWidth,
   },
   curveExcluded: {
-    borderColor: 'lightgrey',
+    borderColor: colorTemperaturLight,
-    borderWidth: 2,
+    borderWidth: lineWidth,
-    borderStyle: 'solid'
+    borderStyle: 'dotted'
   },
   curveDots: {
-    backgroundColor: '#00aedb',
+    backgroundColor: colorTemperatur,
-    width: 12,
+    width: dotWidth,
-    height: 12,
+    height: dotWidth,
     borderRadius: 50
   },
   curveDotsExcluded: {
-    backgroundColor: 'lightgrey',
+    backgroundColor: colorTemperaturLight,
-    width: 12,
+    width: dotWidth,
-    height: 12,
+    height: dotWidth,
     borderRadius: 50
   },
   column: {
@@ -31,7 +38,7 @@ const styles = {
         fontWeight: '100'
       },
       number: {
-        color: '#00b159',
+        color: primaryColor,
         fontSize: 13,
         textAlign: 'center'
       }
@@ -49,17 +56,18 @@ const styles = {
     x: 6,
     y: 3
   },
+  bleedingIconShades: shadesOfRed,
   mucusIcon: {
     width: 12,
     height: 12,
     borderRadius: 50,
   },
   mucusIconShades: [
-    '#cc99cc',
+    '#fef0e4',
-    '#bf7fbf',
+    '#fee1ca',
-    '#b266b2',
+    '#fed2af',
-    '#a64ca6',
+    '#fec395',
-    '#993299'
+    '#feb47b'
   ],
   yAxis: {
     width: config.columnWidth,
@@ -83,8 +91,8 @@ const styles = {
     left: config.columnWidth
   },
   nfpLine: {
-    borderColor: '#00b159',
+    borderColor: colorLtl,
-    borderWidth: 2,
+    borderWidth: lineWidth,
     borderStyle: 'solid'
   },
   symptomRow: {

components/chart/y-axis.js

@@ -7,18 +7,35 @@ import { scaleObservable } from '../../local-storage'
 export function makeYAxisLabels(columnHeight) {
   const units = config.temperatureScale.units
   const scaleMax = scaleObservable.value.max
+  const scaleMin = scaleObservable.value.min
   const style = styles.yAxisLabel
 
   return getTickPositions(columnHeight).map((y, i) => {
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need
     // to reliably place the label vertically centered to the grid
-    if (scaleMax - i * units === 37) console.log(y)
+    let tickLabelDistance
+    let tickUnit
+    if (scaleMax - scaleMin <= 3) {
+      tickLabelDistance = 2
+      tickUnit = 1
+    } else if (scaleMax - scaleMin <= 5) {
+      tickLabelDistance = 2
+      tickUnit = 2
+    } else {
+      tickLabelDistance = 5
+      tickUnit = 5
+    }
+    if (scaleMax - i * tickUnit * units === 37) console.log(y)
+    const tick = scaleMax - i * tickUnit * units
+    const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
+    const showTick =  tick * 10 % tickLabelDistance ? false : true
+    const tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
     return (
       <Text
-        style={[style, {top: y - 8}]}
+        style={[style, {top: y - 8}, tickBold]}
         key={i}>
-        {scaleMax - i * units}
+        {showTick && tickLabel}
       </Text>
     )
   })
@@ -41,7 +58,14 @@ function getTickPositions(columnHeight) {
   const scaleMin = scaleObservable.value.min
   const scaleMax = scaleObservable.value.max
   const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
-  const tickDistance = 1 / (numberOfTicks - 1)
+  let tickDistance
+  if (numberOfTicks <= 31) {
+    tickDistance = 1 / (numberOfTicks - 1)
+  } else if (numberOfTicks <= 51) {
+    tickDistance = 2 / (numberOfTicks - 1)
+  } else {
+    tickDistance = 5 / (numberOfTicks - 1)
+  }
 
   const tickPositions = []
   for (let i = 0; i < numberOfTicks; i++) {

styles/index.js

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native'
 export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
 export const fontOnPrimaryColor = 'white'
+export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
+export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
 
 export default StyleSheet.create({
   welcome: {