From 4d5658119a30b53826a2397c981995ce7a43f0dd Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Mon, 3 Sep 2018 20:21:05 +0200
Subject: [PATCH] changes y-ticks and labels, cycle day display and colors of
symbols
---
components/calendar.js | 5 ++--
components/chart/day-column.js | 4 +--
components/chart/styles.js | 46 ++++++++++++++++++++--------------
components/chart/y-axis.js | 32 ++++++++++++++++++++---
styles/index.js | 2 ++
5 files changed, 62 insertions(+), 27 deletions(-)
diff --git a/components/calendar.js b/components/calendar.js
index d579c31e..ae2e4223 100644
--- a/components/calendar.js
+++ b/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) => {
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 268df062..f7012a98 100644
--- a/components/chart/day-column.js
+++ b/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'
/>
}
diff --git a/components/chart/styles.js b/components/chart/styles.js
index d7ab484d..bffb407c 100644
--- a/components/chart/styles.js
+++ b/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',
- borderWidth: 2,
+ borderColor: colorTemperatur,
+ borderWidth: lineWidth,
},
curveExcluded: {
- borderColor: 'lightgrey',
- borderWidth: 2,
- borderStyle: 'solid'
+ borderColor: colorTemperaturLight,
+ borderWidth: lineWidth,
+ borderStyle: 'dotted'
},
curveDots: {
- backgroundColor: '#00aedb',
- width: 12,
- height: 12,
+ backgroundColor: colorTemperatur,
+ width: dotWidth,
+ height: dotWidth,
borderRadius: 50
},
curveDotsExcluded: {
- backgroundColor: 'lightgrey',
- width: 12,
- height: 12,
+ backgroundColor: colorTemperaturLight,
+ width: dotWidth,
+ 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',
- '#bf7fbf',
- '#b266b2',
- '#a64ca6',
- '#993299'
+ '#fef0e4',
+ '#fee1ca',
+ '#fed2af',
+ '#fec395',
+ '#feb47b'
],
yAxis: {
width: config.columnWidth,
@@ -83,8 +91,8 @@ const styles = {
left: config.columnWidth
},
nfpLine: {
- borderColor: '#00b159',
- borderWidth: 2,
+ borderColor: colorLtl,
+ borderWidth: lineWidth,
borderStyle: 'solid'
},
symptomRow: {
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 953f8a85..ccdf02b1 100644
--- a/components/chart/y-axis.js
+++ b/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++) {
diff --git a/styles/index.js b/styles/index.js
index 70d02935..18028534 100644
--- a/styles/index.js
+++ b/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: {
--
GitLab