From 02ca733147ffb65f9cec7d36718afc9f25704308 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 16:54:33 +0100 Subject: [PATCH 1/9] Introduces YAxis component --- components/chart/chart.js | 66 +++++++++----------------------------- components/chart/y-axis.js | 64 ++++++++++++++++++++++++++++++++++-- 2 files changed, 77 insertions(+), 53 deletions(-) diff --git a/components/chart/chart.js b/components/chart/chart.js index 4106938..4c97637 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -1,31 +1,17 @@ import React, { Component } from 'react' import { View, FlatList, ActivityIndicator } from 'react-native' import { LocalDate } from 'js-joda' -import { makeYAxisLabels, makeHorizontalGrid } from './y-axis' +import YAxis, { makeHorizontalGrid } from './y-axis' import nfpLines from './nfp-lines' import DayColumn from './day-column' import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db' import styles from './styles' -import { cycleDayColor } from '../../styles' import { scaleObservable } from '../../local-storage' import config from '../../config' -import AppText from '../app-text' -import AppLoadingView from '../app-loading' -import { shared as labels } from '../../i18n/en/labels' -import DripIcon from '../../assets/drip-icons' -import DripHomeIcon from '../../assets/drip-home-icons' -import nothingChanged from '../../db/db-unchanged' -const symptomIcons = { - bleeding: , - mucus: , - cervix: , - desire: , - sex: , - pain: , - mood: , - note: -} +import AppLoadingView from '../app-loading' + +import nothingChanged from '../../db/db-unchanged' export default class CycleChart extends Component { constructor(props) { @@ -129,49 +115,27 @@ export default class CycleChart extends Component { } render() { + const { chartHeight, chartLoaded } = this.state return ( - {!this.state.chartLoaded && } + {!chartLoaded && } - {this.state.chartHeight && this.state.chartLoaded && - - - {this.symptomRowSymptoms.map(symptomName => { - return - {symptomIcons[symptomName]} - - })} - - - {makeYAxisLabels(this.columnHeight)} - - - - - {labels.date.toLowerCase()} - - - } + {chartHeight && chartLoaded && ( + + )} - - {this.state.chartHeight && this.state.chartLoaded && + {chartHeight && chartLoaded && makeHorizontalGrid(this.columnHeight, this.symptomRowHeight) } - {this.state.chartHeight && + {chartHeight && , + mucus: , + cervix: , + desire: , + sex: , + pain: , + mood: , + note: +} + export function makeYAxisLabels(columnHeight) { const units = unitObservable.value @@ -72,4 +94,42 @@ function getAbsoluteValue(relative, columnHeight) { const verticalPadding = columnHeight * config.temperatureScale.verticalPadding const scaleHeight = columnHeight - 2 * verticalPadding return scaleHeight * relative + verticalPadding -} \ No newline at end of file +} + +const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { + return ( + + + {symptomsToDisplay.map(symptomName => { + return + {symptomIcons[symptomName]} + + })} + + {makeYAxisLabels(height)} + + + + {labels.date.toLowerCase()} + + + + ) +} + +YAxis.propTypes = { + height: PropTypes.number, + symptomsToDisplay: PropTypes.array, + symptomsSectionHeight: PropTypes.number, +} + +export default YAxis From 34a0e15e66e0d425a0ab4e38017407baf81bfa7b Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 17:15:56 +0100 Subject: [PATCH 2/9] Rafactors symptom color definition --- components/chart/day-column.js | 7 ++-- components/chart/styles.js | 74 +++++++++++++++++++++------------- components/chart/y-axis.js | 19 ++------- 3 files changed, 53 insertions(+), 47 deletions(-) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index c49f9db..97a4f14 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -146,16 +146,17 @@ class DayColumn extends Component { const styleParent = [styles.symptomRow, {height: symptomHeight}] if (shouldDrawSymptom) { - const styleSymptom = styles.iconShades[symptom] + const styleSymptom = styles.iconColors[symptom] const symptomData = this.data[symptom] + const symptomColor = styleSymptom.shades[symptomData] const dataIsComplete = this.isSymptomDataComplete(symptom) const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix') const backgroundColor = (isMucusOrCervix && !dataIsComplete) ? - 'white' : styleSymptom[symptomData] + 'white' : symptomColor const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0 - const borderColor = styleSymptom[0] + const borderColor = symptomColor const styleChild = [styles.symptomIcon, { backgroundColor, borderColor, diff --git a/components/chart/styles.js b/components/chart/styles.js index d2a95d7..9a17f6f 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -11,6 +11,19 @@ const gridLineWidthVertical = 0.6 const gridLineWidthHorizontal = 0.3 const numberLabelFontSize = 13 +const redColor = '#c3000d' +const violetColor = '#7689a9' +const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', violetColor] // light to dark +const yellowColor = '#dbb40c' +const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark +const magentaColor = '#6f2565' +const shadesOfMagenta = ['#a87ca2', '#8b5083', magentaColor] // light to dark +const pinkColor = '#9e346c' +const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark +const lightGreenColor = '#bccd67' +const orangeColor = '#bc6642' +const mintColor = '#6ca299' + const styles = { curve: { stroke: colorTemperature, @@ -53,34 +66,39 @@ const styles = { height: 12, borderRadius: 50, }, - iconShades: { - 'bleeding': shadesOfRed, - 'mucus': [ - '#e3e7ed', - '#c8cfdc', - '#acb8cb', - '#91a0ba', - '#7689a9' - ], - 'cervix': [ - '#f0e19d', - '#e9d26d', - '#e2c33c', - '#dbb40c', - ], - 'sex': [ - '#a87ca2', - '#8b5083', - '#6f2565', - ], - 'desire': [ - '#c485a6', - '#b15c89', - '#9e346c', - ], - 'pain': ['#bccd67'], - 'mood': ['#bc6642'], - 'note': ['#6ca299'] + iconColors: { + 'bleeding': { + color: redColor, + shades: shadesOfRed, + }, + 'mucus': { + color: violetColor, + shades: shadesOfViolet, + }, + 'cervix': { + color: yellowColor, + shades: shadesOfYellow, + }, + 'sex': { + color: magentaColor, + shades: shadesOfMagenta, + }, + 'desire': { + color: pinkColor, + shades: shadesOfPink, + }, + 'pain': { + color: lightGreenColor, + shades: [lightGreenColor], + }, + 'mood': { + color: orangeColor, + shades: [orangeColor], + }, + 'note': { + color: mintColor, + shades: [mintColor], + }, }, yAxis: { width: 27, diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index b98e9c1..d2bed28 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -14,19 +14,6 @@ import { cycleDayColor } from '../../styles' import { shared as labels } from '../../i18n/en/labels' - -const symptomIcons = { - bleeding: , - mucus: , - cervix: , - desire: , - sex: , - pain: , - mood: , - note: -} - - export function makeYAxisLabels(columnHeight) { const units = unitObservable.value const scaleMax = scaleObservable.value.max @@ -100,14 +87,14 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { return ( - {symptomsToDisplay.map(symptomName => { + {symptomsToDisplay.map(symptom => { return - {symptomIcons[symptomName]} + })} From 270b823c20a734144d3999a41fb59ffbb2be328d Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 17:28:02 +0100 Subject: [PATCH 3/9] Introduces SymptomIcon component --- components/chart/day-column.js | 2 +- components/chart/styles.js | 6 +++++- components/chart/symptom-icon.js | 26 ++++++++++++++++++++++++++ components/chart/y-axis.js | 18 +++++++++--------- 4 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 components/chart/symptom-icon.js diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 97a4f14..541377d 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -157,7 +157,7 @@ class DayColumn extends Component { 'white' : symptomColor const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0 const borderColor = symptomColor - const styleChild = [styles.symptomIcon, { + const styleChild = [styles.symptomDot, { backgroundColor, borderColor, borderWidth diff --git a/components/chart/styles.js b/components/chart/styles.js index 9a17f6f..d95f51d 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -61,7 +61,7 @@ const styles = { width: gridLineWidthVertical, } }, - symptomIcon: { + symptomDot: { width: 12, height: 12, borderRadius: 50, @@ -127,6 +127,10 @@ const styles = { fontWeight: '100', } }, + symptomIcon: { + alignItems: 'center', + justifyContent: 'center', + }, horizontalGrid: { position:'absolute', borderStyle: 'solid', diff --git a/components/chart/symptom-icon.js b/components/chart/symptom-icon.js new file mode 100644 index 0000000..3236c3b --- /dev/null +++ b/components/chart/symptom-icon.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { View } from 'react-native' + +import DripIcon from '../../assets/drip-icons' + +import styles from './styles' + +const SymptomIcon = ({ symptom, height }) => { + return ( + + + + ) +} + +SymptomIcon.propTypes = { + height: PropTypes.number, + symptom: PropTypes.string, +} + +export default SymptomIcon diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index d2bed28..5402570 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -6,8 +6,8 @@ import config from '../../config' import { scaleObservable, unitObservable } from '../../local-storage' import AppText from '../app-text' -import DripIcon from '../../assets/drip-icons' import DripHomeIcon from '../../assets/drip-home-icons' +import SymptomIcon from './symptom-icon' import styles from './styles' import { cycleDayColor } from '../../styles' @@ -84,18 +84,18 @@ function getAbsoluteValue(relative, columnHeight) { } const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { + const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length return ( {symptomsToDisplay.map(symptom => { - return - - + return ( + + ) })} {makeYAxisLabels(height)} From 3598dd5b80fa06f0755ac741446469bbc9cb2252 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 17:46:21 +0100 Subject: [PATCH 4/9] Introduces ChartLegend component --- components/chart/chart-legend.js | 27 +++++++++++++++++++++++++++ components/chart/styles.js | 4 ++++ components/chart/y-axis.js | 16 ++-------------- 3 files changed, 33 insertions(+), 14 deletions(-) create mode 100644 components/chart/chart-legend.js diff --git a/components/chart/chart-legend.js b/components/chart/chart-legend.js new file mode 100644 index 0000000..df6f8a6 --- /dev/null +++ b/components/chart/chart-legend.js @@ -0,0 +1,27 @@ +import React from 'react' +import { View } from 'react-native' + +import AppText from '../app-text' +import DripHomeIcon from '../../assets/drip-home-icons' + +import styles from './styles' +import { cycleDayColor } from '../../styles' + +import { shared as labels } from '../../i18n/en/labels' + +const ChartLegend = () => { + return ( + + + + {labels.date.toLowerCase()} + + + ) +} + +export default ChartLegend diff --git a/components/chart/styles.js b/components/chart/styles.js index d95f51d..d830782 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -131,6 +131,10 @@ const styles = { alignItems: 'center', justifyContent: 'center', }, + chartLegend: { + alignItems: 'center', + justifyContent: 'center', + }, horizontalGrid: { position:'absolute', borderStyle: 'solid', diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 5402570..ab3a4d3 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -6,13 +6,10 @@ import config from '../../config' import { scaleObservable, unitObservable } from '../../local-storage' import AppText from '../app-text' -import DripHomeIcon from '../../assets/drip-home-icons' import SymptomIcon from './symptom-icon' +import ChartLegend from './chart-legend' import styles from './styles' -import { cycleDayColor } from '../../styles' - -import { shared as labels } from '../../i18n/en/labels' export function makeYAxisLabels(columnHeight) { const units = unitObservable.value @@ -99,16 +96,7 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { })} {makeYAxisLabels(height)} - - - - {labels.date.toLowerCase()} - - + ) } From bc04f6a24b09ab92b1ee6dbeb556cd1ffc741556 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 19:37:19 +0100 Subject: [PATCH 5/9] Introduces Tick & TickList components --- components/chart/styles.js | 4 +++ components/chart/tick-list.js | 34 ++++++++++++++++++++++ components/chart/tick.js | 29 +++++++++++++++++++ components/chart/y-axis.js | 54 ++++++++++++++++++++--------------- 4 files changed, 98 insertions(+), 23 deletions(-) create mode 100644 components/chart/tick-list.js create mode 100644 components/chart/tick.js diff --git a/components/chart/styles.js b/components/chart/styles.js index d830782..dc3a69b 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -135,6 +135,10 @@ const styles = { alignItems: 'center', justifyContent: 'center', }, + boldTick: { + fontWeight: 'bold', + fontSize: 11, + }, horizontalGrid: { position:'absolute', borderStyle: 'solid', diff --git a/components/chart/tick-list.js b/components/chart/tick-list.js new file mode 100644 index 0000000..299517e --- /dev/null +++ b/components/chart/tick-list.js @@ -0,0 +1,34 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { View } from 'react-native' + +import Tick from './tick' + +import { getTickList } from './y-axis' + +import styles from './styles' + +const TickList = ({ height }) => { + return ( + { + getTickList(height) + .map(({ label, position, isBold, shouldShowLabel}) => { + return ( + + ) + }) + } + ) +} + +TickList.propTypes = { + height: PropTypes.number, +} + +export default TickList diff --git a/components/chart/tick.js b/components/chart/tick.js new file mode 100644 index 0000000..173cfbe --- /dev/null +++ b/components/chart/tick.js @@ -0,0 +1,29 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import AppText from '../app-text' + +import styles from './styles' + +const Tick = ({ yPosition, isBold, shouldShowLabel, label }) => { + // 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 + const topPosition = yPosition - 8 + const style = [ + styles.yAxisLabels.tempScale, + {top: topPosition}, + isBold && styles.boldTick + ] + + return {shouldShowLabel && label} +} + +Tick.propTypes = { + yPosition: PropTypes.number, + isBold: PropTypes.bool, + shouldShowLabel: PropTypes.bool, + label: PropTypes.string, +} + +export default Tick diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index ab3a4d3..88133ec 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -5,39 +5,47 @@ import { View } from 'react-native' import config from '../../config' import { scaleObservable, unitObservable } from '../../local-storage' -import AppText from '../app-text' import SymptomIcon from './symptom-icon' +import TickList from './tick-list' import ChartLegend from './chart-legend' import styles from './styles' -export function makeYAxisLabels(columnHeight) { +export function getTickList(columnHeight) { + const units = unitObservable.value const scaleMax = scaleObservable.value.max - const style = styles.yAxisLabels.tempScale - return getTickPositions(columnHeight).map((y, i) => { + return getTickPositions(columnHeight).map((tickPosition, i) => { + const tick = scaleMax - i * units - const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0' - let showTick - let tickBold - if (units === 0.1) { - showTick = (tick * 10 % 2) ? false : true - tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11} + let isBold, label, shouldShowLabel + + if (Number.isInteger(tick)) { + isBold = true + label = tick.toString() + '.0' } else { - showTick = (tick * 10 % 5) ? false : true - tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11} + isBold = false + label = tick.toString() + } + + // when temp range <= 3, units === 0.1 we show temp values with step 0.2 + // when temp range > 3, units === 0.5 we show temp values with step 0.5 + + if (units === 0.1) { + // show label with step 0.2 + shouldShowLabel = !(tick * 10 % 2) + } else { + // show label with step 0.5 + shouldShowLabel = !(tick * 10 % 5) + } + + return { + position: tickPosition, + label, + isBold, + shouldShowLabel, } - // 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 - return ( - - {showTick && tickLabel} - - ) }) } @@ -95,7 +103,7 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { ) })} - {makeYAxisLabels(height)} + ) From ed66395318c916dd29d4b2eaae2869d93bc04cd6 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 19:47:25 +0100 Subject: [PATCH 6/9] Moves out chart (data modelling) helpers to a separate file --- components/chart/day-column.js | 2 +- components/chart/nfp-lines.js | 2 +- components/chart/tick-list.js | 2 +- components/chart/y-axis.js | 68 +--------------------------------- components/helpers/chart.js | 67 +++++++++++++++++++++++++++++++++ 5 files changed, 71 insertions(+), 70 deletions(-) create mode 100644 components/helpers/chart.js diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 541377d..425f293 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -19,7 +19,7 @@ import config from '../../config' import cycleModule from '../../lib/cycle' import { getCycleDay } from '../../db' import DotAndLine from './dot-and-line' -import { normalizeToScale } from './y-axis' +import { normalizeToScale } from '../helpers/chart' const label = styles.column.label diff --git a/components/chart/nfp-lines.js b/components/chart/nfp-lines.js index cf73c52..853dde5 100644 --- a/components/chart/nfp-lines.js +++ b/components/chart/nfp-lines.js @@ -1,5 +1,5 @@ import { getCycleStatusForDay } from '../../lib/sympto-adapter' -import { normalizeToScale } from './y-axis' +import { normalizeToScale } from '../helpers/chart' export default function () { const cycle = { diff --git a/components/chart/tick-list.js b/components/chart/tick-list.js index 299517e..16fba0a 100644 --- a/components/chart/tick-list.js +++ b/components/chart/tick-list.js @@ -4,7 +4,7 @@ import { View } from 'react-native' import Tick from './tick' -import { getTickList } from './y-axis' +import { getTickList } from '../helpers/chart' import styles from './styles' diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 88133ec..09a5210 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -2,8 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { View } from 'react-native' -import config from '../../config' -import { scaleObservable, unitObservable } from '../../local-storage' +import { getTickPositions } from '../helpers/chart' import SymptomIcon from './symptom-icon' import TickList from './tick-list' @@ -11,44 +10,6 @@ import ChartLegend from './chart-legend' import styles from './styles' -export function getTickList(columnHeight) { - - const units = unitObservable.value - const scaleMax = scaleObservable.value.max - - return getTickPositions(columnHeight).map((tickPosition, i) => { - - const tick = scaleMax - i * units - let isBold, label, shouldShowLabel - - if (Number.isInteger(tick)) { - isBold = true - label = tick.toString() + '.0' - } else { - isBold = false - label = tick.toString() - } - - // when temp range <= 3, units === 0.1 we show temp values with step 0.2 - // when temp range > 3, units === 0.5 we show temp values with step 0.5 - - if (units === 0.1) { - // show label with step 0.2 - shouldShowLabel = !(tick * 10 % 2) - } else { - // show label with step 0.5 - shouldShowLabel = !(tick * 10 % 5) - } - - return { - position: tickPosition, - label, - isBold, - shouldShowLabel, - } - }) -} - export function makeHorizontalGrid(columnHeight, symptomRowHeight) { return getTickPositions(columnHeight).map(tick => { return ( @@ -61,33 +22,6 @@ export function makeHorizontalGrid(columnHeight, symptomRowHeight) { }) } -function getTickPositions(columnHeight) { - const units = unitObservable.value - const scaleMin = scaleObservable.value.min - const scaleMax = scaleObservable.value.max - const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1 - const tickDistance = 1 / (numberOfTicks - 1) - const tickPositions = [] - for (let i = 0; i < numberOfTicks; i++) { - const position = getAbsoluteValue(tickDistance * i, columnHeight) - tickPositions.push(position) - } - return tickPositions -} - -export function normalizeToScale(temp, columnHeight) { - const scale = scaleObservable.value - const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min) - return getAbsoluteValue(valueRelativeToScale, columnHeight) -} - -function getAbsoluteValue(relative, columnHeight) { - // we add some height to have some breathing room - const verticalPadding = columnHeight * config.temperatureScale.verticalPadding - const scaleHeight = columnHeight - 2 * verticalPadding - return scaleHeight * relative + verticalPadding -} - const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length return ( diff --git a/components/helpers/chart.js b/components/helpers/chart.js new file mode 100644 index 0000000..24a563c --- /dev/null +++ b/components/helpers/chart.js @@ -0,0 +1,67 @@ +import { scaleObservable, unitObservable } from '../../local-storage' +import config from '../../config' + +export function normalizeToScale(temp, columnHeight) { + const scale = scaleObservable.value + const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min) + return getAbsoluteValue(valueRelativeToScale, columnHeight) +} + +function getAbsoluteValue(relative, columnHeight) { + // we add some height to have some breathing room + const verticalPadding = columnHeight * config.temperatureScale.verticalPadding + const scaleHeight = columnHeight - 2 * verticalPadding + return scaleHeight * relative + verticalPadding +} + +export function getTickPositions(columnHeight) { + const units = unitObservable.value + const scaleMin = scaleObservable.value.min + const scaleMax = scaleObservable.value.max + const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1 + const tickDistance = 1 / (numberOfTicks - 1) + const tickPositions = [] + for (let i = 0; i < numberOfTicks; i++) { + const position = getAbsoluteValue(tickDistance * i, columnHeight) + tickPositions.push(position) + } + return tickPositions +} + +export function getTickList(columnHeight) { + + const units = unitObservable.value + const scaleMax = scaleObservable.value.max + + return getTickPositions(columnHeight).map((tickPosition, i) => { + + const tick = scaleMax - i * units + let isBold, label, shouldShowLabel + + if (Number.isInteger(tick)) { + isBold = true + label = tick.toString() + '.0' + } else { + isBold = false + label = tick.toString() + } + + // when temp range <= 3, units === 0.1 we show temp values with step 0.2 + // when temp range > 3, units === 0.5 we show temp values with step 0.5 + + if (units === 0.1) { + // show label with step 0.2 + shouldShowLabel = !(tick * 10 % 2) + } else { + // show label with step 0.5 + shouldShowLabel = !(tick * 10 % 5) + } + + return { + position: tickPosition, + label, + isBold, + shouldShowLabel, + } + }) +} From 09129adba3b26ca1be956e59a70baa2dfc0cec68 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 19:57:47 +0100 Subject: [PATCH 7/9] Introduces HorizontalGrid component --- components/chart/chart.js | 12 +++++++++--- components/chart/horizontal-grid.js | 26 ++++++++++++++++++++++++++ components/chart/y-axis.js | 14 -------------- 3 files changed, 35 insertions(+), 17 deletions(-) create mode 100644 components/chart/horizontal-grid.js diff --git a/components/chart/chart.js b/components/chart/chart.js index 4c97637..8f8a3f5 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -1,9 +1,12 @@ import React, { Component } from 'react' import { View, FlatList, ActivityIndicator } from 'react-native' import { LocalDate } from 'js-joda' -import YAxis, { makeHorizontalGrid } from './y-axis' + +import YAxis from './y-axis' import nfpLines from './nfp-lines' import DayColumn from './day-column' +import HorizontalGrid from './horizontal-grid' + import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db' import styles from './styles' import { scaleObservable } from '../../local-storage' @@ -131,8 +134,11 @@ export default class CycleChart extends Component { /> )} - {chartHeight && chartLoaded && - makeHorizontalGrid(this.columnHeight, this.symptomRowHeight) + {chartHeight && chartLoaded && ( + ) } {chartHeight && diff --git a/components/chart/horizontal-grid.js b/components/chart/horizontal-grid.js new file mode 100644 index 0000000..e7cf7cc --- /dev/null +++ b/components/chart/horizontal-grid.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { View } from 'react-native' + +import { getTickPositions } from '../helpers/chart' + +import styles from './styles' + +const HorizontalGrid = ({ height, startPosition }) => { + return getTickPositions(height).map(tick => { + return ( + + ) + }) +} + +HorizontalGrid.propTypes = { + height: PropTypes.number, + startPosition: PropTypes.number, +} + +export default HorizontalGrid diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 09a5210..50abf63 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -2,26 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import { View } from 'react-native' -import { getTickPositions } from '../helpers/chart' - import SymptomIcon from './symptom-icon' import TickList from './tick-list' import ChartLegend from './chart-legend' import styles from './styles' -export function makeHorizontalGrid(columnHeight, symptomRowHeight) { - return getTickPositions(columnHeight).map(tick => { - return ( - - ) - }) -} - const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length return ( From 0adbf3436b3846334ef91620151013df82d07d91 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 20:38:29 +0100 Subject: [PATCH 8/9] Introduces SymptomCell component --- components/chart/day-column.js | 57 ++++++++++---------------------- components/chart/symptom-cell.js | 52 +++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 39 deletions(-) create mode 100644 components/chart/symptom-cell.js diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 425f293..1597697 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -18,7 +18,10 @@ import styles from './styles' import config from '../../config' import cycleModule from '../../lib/cycle' import { getCycleDay } from '../../db' + import DotAndLine from './dot-and-line' +import SymptomCell from './symptom-cell' + import { normalizeToScale } from '../helpers/chart' const label = styles.column.label @@ -139,42 +142,6 @@ class DayColumn extends Component { return false } - drawSymptom = (symptom) => { - - const { symptomHeight } = this.props - const shouldDrawSymptom = this.data.hasOwnProperty(symptom) - const styleParent = [styles.symptomRow, {height: symptomHeight}] - - if (shouldDrawSymptom) { - const styleSymptom = styles.iconColors[symptom] - const symptomData = this.data[symptom] - const symptomColor = styleSymptom.shades[symptomData] - - const dataIsComplete = this.isSymptomDataComplete(symptom) - const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix') - - const backgroundColor = (isMucusOrCervix && !dataIsComplete) ? - 'white' : symptomColor - const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0 - const borderColor = symptomColor - const styleChild = [styles.symptomDot, { - backgroundColor, - borderColor, - borderWidth - }] - - return ( - - - - ) - } else { - return ( - - ) - } - } - render() { const columnElements = [] const { dateString, @@ -264,9 +231,21 @@ class DayColumn extends Component { onPress={() => this.onDaySelect(dateString)} activeOpacity={1} > - - {symptomRowSymptoms.map(symptom => this.drawSymptom(symptom))} - + + { symptomRowSymptoms.map(symptom => { + const hasSymptomData = this.data.hasOwnProperty(symptom) + return ( + ) + } + )} {column} diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js new file mode 100644 index 0000000..fa76042 --- /dev/null +++ b/components/chart/symptom-cell.js @@ -0,0 +1,52 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { View } from 'react-native' + +import styles from './styles' + +const SymptomCell = ({ + height, + symptom, + symptomValue, + isSymptomDataComplete +}) => { + + const shouldDrawDot = symptomValue !== false + const styleParent = [styles.symptomRow, { height }] + let styleChild + + if (shouldDrawDot) { + const styleSymptom = styles.iconColors[symptom] + const symptomColor = styleSymptom.shades[symptomValue] + + const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix') + + const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ? + 'white' : symptomColor + const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0 + const borderColor = symptomColor + styleChild = [styles.symptomDot, { + backgroundColor, + borderColor, + borderWidth + }] + } + + return ( + + {shouldDrawDot && } + + ) +} + +SymptomCell.propTypes = { + height: PropTypes.number, + symptom: PropTypes.string, + symptomValue: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.number, + ]), + isSymptomDataComplete: PropTypes.bool, +} + +export default SymptomCell From 03a235d8cb821e2791322b8dcc254149af222c9f Mon Sep 17 00:00:00 2001 From: mashazyu Date: Sun, 17 Nov 2019 20:39:00 +0100 Subject: [PATCH 9/9] Formatting fix --- components/chart/y-axis.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index 50abf63..acd3ccf 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -13,15 +13,14 @@ const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => { return ( - {symptomsToDisplay.map(symptom => { - return ( - - ) - })} + {symptomsToDisplay.map(symptom => ( + + ) + )}