From cd1e689aae98cb467e8a5124e3f68819978c6f34 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sun, 12 Aug 2018 11:21:11 +0200 Subject: [PATCH] Get actual amount of cycle days to display --- components/chart/chart.js | 21 ++++++++++++++------- components/chart/config.js | 3 +-- components/chart/day-column.js | 1 - db/index.js | 14 ++++++++++++-- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/components/chart/chart.js b/components/chart/chart.js index dcc5be8..c08e0dc 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -4,9 +4,8 @@ import range from 'date-range' import { LocalDate } from 'js-joda' import { yAxis, normalizeToScale } from './y-axis' import DayColumn from './day-column' -import { getCycleDay, cycleDaysSortedByDate } from '../../db' +import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db' import styles from './styles' -import config from './config' const yAxisView = {yAxis.labels} @@ -14,7 +13,7 @@ export default class CycleChart extends Component { constructor(props) { super(props) this.state = { - columns: makeColumnInfo(config.xAxisRangeInDays) + columns: makeColumnInfo(), } this.renderColumn = ({item, index}) => { return ( @@ -29,7 +28,7 @@ export default class CycleChart extends Component { this.reCalculateChartInfo = (function(Chart) { return function() { - Chart.setState({columns: makeColumnInfo(config.xAxisRangeInDays)}) + Chart.setState({columns: makeColumnInfo()}) } })(this) @@ -60,8 +59,16 @@ export default class CycleChart extends Component { } } -function makeColumnInfo(n) { - const xAxisDates = getPreviousDays(n).map(jsDate => { +function makeColumnInfo() { + let amountOfCycleDays = getAmountOfCycleDays() + // if there's not much data yet, we want to show at least 30 days on the chart + if (amountOfCycleDays < 30) { + amountOfCycleDays = 30 + } else { + // we don't want the chart to end abruptly before the first data day + amountOfCycleDays += 5 + } + const xAxisDates = getTodayAndPreviousDays(amountOfCycleDays).map(jsDate => { return LocalDate.of( jsDate.getFullYear(), jsDate.getMonth() + 1, @@ -85,7 +92,7 @@ function makeColumnInfo(n) { }) } -function getPreviousDays(n) { +function getTodayAndPreviousDays(n) { const today = new Date() today.setHours(0) today.setMinutes(0) diff --git a/components/chart/config.js b/components/chart/config.js index 39d8a51..a83eafc 100644 --- a/components/chart/config.js +++ b/components/chart/config.js @@ -4,8 +4,7 @@ const config = { temperatureScale: { low: 35, high: 38 - }, - xAxisRangeInDays: 1000 + } } const margin = 3 diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 419042d..f356e7c 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -57,7 +57,6 @@ export default class DayColumn extends Component { } if (typeof mucus === 'number') { - console.log('ever') const mucusIcon = (