From eed70545c60f5592bb1a701b0caa9cef24fa8c19 Mon Sep 17 00:00:00 2001 From: tina Date: Fri, 28 Sep 2018 16:35:20 +0200 Subject: [PATCH 1/3] adds icons to chart --- components/chart/chart.js | 62 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/components/chart/chart.js b/components/chart/chart.js index ccffbba..a6bebc3 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import { View, FlatList } from 'react-native' import range from 'date-range' import { LocalDate } from 'js-joda' +import Svg, { G } from 'react-native-svg' import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis' import nfpLines from './nfp-lines' import DayColumn from './day-column' @@ -11,6 +12,13 @@ import { scaleObservable } from '../../local-storage' import config from '../../config' import { AppText } from '../app-text' import { shared as labels } from '../labels' +import BleedingIcon from '../../assets/bleeding' +import CervixIcon from '../../assets/cervix' +import DesireIcon from '../../assets/desire' +import MucusIcon from '../../assets/mucus' +import NoteIcon from '../../assets/note' +import PainIcon from '../../assets/pain' +import SexIcon from '../../assets/sex' export default class CycleChart extends Component { constructor(props) { @@ -153,8 +161,20 @@ export default class CycleChart extends Component { {this.symptomRowSymptoms.map(symptomName => { - return - {symptomName[0]} + return + + + {symptomIcons[symptomName].icon} + + })} @@ -224,4 +244,42 @@ function getInfoForNeighborColumns(index, cols) { ret.leftTemperatureExclude = left.temperatureExclude } return ret +} + +const symptomIcons = { + 'bleeding': { + 'viewBox': '10 10 320 400', + 'color': styles.iconShades.bleeding[3], + 'icon': + }, + 'mucus': { + 'viewBox': '10 10 320 400', + 'color': styles.iconShades.mucus[4], + 'icon': + }, + 'cervix': { + 'viewBox': '10 10 320 440', + 'color': styles.iconShades.cervix[3], + 'icon': + }, + 'desire': { + 'viewBox': '10 10 320 380', + 'color': styles.iconShades.desire[2], + 'icon': + }, + 'sex': { + 'viewBox': '10 10 320 400', + 'color': styles.iconShades.sex[2], + 'icon': + }, + 'pain': { + 'viewBox': '10 10 300 400', + 'color': styles.iconShades.pain[0], + 'icon': + }, + 'note': { + 'viewBox': '10 10 270 400', + 'color': styles.iconShades.note[0], + 'icon': + }, } \ No newline at end of file From 1841747566f6170debca5bcebe8ae585567b3bf7 Mon Sep 17 00:00:00 2001 From: tina Date: Fri, 28 Sep 2018 19:57:21 +0200 Subject: [PATCH 2/3] fixes line length warnings --- components/cycle-day/symptoms/action-button-footer.js | 7 ++++++- components/header.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index 35360ba..c70fca3 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -48,7 +48,12 @@ export default class ActionButtonFooter extends Component { const textStyle = [styles.menuText] if (disabledCondition) textStyle.push(styles.menuTextInActive) const iconStyle = disabledCondition ? - Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) : + Object.assign( + {}, + iconStyles.menuIcon, + iconStyles.menuIconInactive + ) + : iconStyles.menuIcon return ( diff --git a/components/header.js b/components/header.js index b99ed15..e147cca 100644 --- a/components/header.js +++ b/components/header.js @@ -14,7 +14,10 @@ export default class Header extends Component { return ( this.props.isCycleDayOverView ? - + Date: Fri, 28 Sep 2018 20:04:58 +0200 Subject: [PATCH 3/3] fixes more line length --- components/chart/chart.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/components/chart/chart.js b/components/chart/chart.js index a6bebc3..97717df 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -63,7 +63,8 @@ export default class CycleChart extends Component { this.xAxisHeight = this.state.chartHeight * config.xAxisHeightPercentage const remainingHeight = this.state.chartHeight - this.xAxisHeight this.symptomHeight = config.symptomHeightPercentage * remainingHeight - this.symptomRowHeight = this.symptomRowSymptoms.length * this.symptomHeight + this.symptomRowHeight = this.symptomRowSymptoms.length * + this.symptomHeight this.columnHeight = remainingHeight - this.symptomRowHeight const chartSymptoms = [...this.symptomRowSymptoms] @@ -120,7 +121,8 @@ export default class CycleChart extends Component { (cycleDay.cervix.opening + cycleDay.cervix.firmness) } else if (symptom === 'sex') { // solo = 1 + partner = 2 - acc.sex = cycleDay.sex && (cycleDay.sex.solo + 2 * cycleDay.sex.partner) + acc.sex = cycleDay.sex && + (cycleDay.sex.solo + 2 * cycleDay.sex.partner) } else if (symptom === 'pain') { // is any pain documented? acc.pain = cycleDay.pain && @@ -165,10 +167,13 @@ export default class CycleChart extends Component { style={{ alignItems: 'center', justifyContent: 'center' }} key={symptomName} width={styles.yAxis.width} - height={this.symptomRowHeight / this.symptomRowSymptoms.length} + height={this.symptomRowHeight / + this.symptomRowSymptoms.length} > @@ -182,10 +187,16 @@ export default class CycleChart extends Component { {makeYAxisLabels(this.columnHeight)} - + {labels.cycleDayWithLinebreak} - + {labels.date}