index.html

---
layout: default
description: Charts and stuff
---

<link rel="stylesheet" type="text/css" href="vendor/slick-carousel/slick.css">
<link rel="stylesheet" type="text/css" href="assets/slick-theme.css">
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/lodash/lodash.js"></script>
<script src="vendor/moment/moment.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="vendor/bootstrap-sass/javascripts/bootstrap.js"></script>
<script src="vendor/slick-carousel/slick.js"></script>
<script src="vendor/mathjs/math.min.js"></script>
<script src="js/data.js"></script>
<script src="js/charts.js"></script>
<script src="js/headerShrink.js"></script>
<script src="js/milestonesCarousel.js"></script>

<div data-spy="scroll" data-target=".navbar" data-offset="150">

<nav class="row kpis navbar-nav navbar-fixed-top">
	<div class="container-fluid">
		<div class="nav col-xs-2 kpi">
			<a href="#age">
			{% if site.data.baby.picture_url %}
			<img src="{{ site.data.baby.picture_url }}" class="img-responsive circle" alt="Baby">
			{% elsif site.data.baby.gender == 'female' %}
			<img src="assets/images/baby-1.png" class="img-responsive" alt="Baby">
			{% else %}
			<img src="assets/images/baby.png" class="img-responsive" alt="Baby">
			{% endif %}
			</a>
			<h4 class="kpi-metric hidden-xs" id="ageKPI"></h4>
			<span class="kpi-description text-muted hidden-xs" id="ageKPIUnits"></span>
		</div>
		<div class="nav col-xs-2 kpi">
			<a href="#sleep">
			<img src="assets/images/crib-toy.png" class="img-responsive" alt="Sleep">
			</a>
			<h4 class="kpi-metric hidden-xs" id="sleepHoursKPI"></h4>
			<span class="kpi-description text-muted hidden-xs">Hours sleeping</span>
		</div>
		<div class="nav col-xs-2 kpi">
			<a href="#feedings">
			<img src="assets/images/feeding-bottle-1.png" class="img-responsive" alt="Feeding">
			</a>
			<h4 class="kpi-metric hidden-xs" id="feedingsKPI"></h4>
			<span class="kpi-description text-muted hidden-xs">Feedings</span>
		</div>
		<div class="nav col-xs-2 kpi">
			<a href="#diapers">
			<img src="assets/images/diaper.png" class="img-responsive" alt="Diaper">
			</a>
			<h4 class="kpi-metric hidden-xs" id="diapersKPI"></h4>
			<span class="kpi-description text-muted hidden-xs">Diapers changed</span>
		</div>
		<div class="nav col-xs-2 kpi">
			<a href="#baths">
			<img src="assets/images/bathtub.png" class="img-responsive" alt="Bath">
			</a>
			<h4 class="kpi-metric hidden-xs" id="bathsKPI"></h4>
			<span class="kpi-description text-muted hidden-xs">Baths</span>
		</div>
		<div class="nav col-xs-2 kpi">
			<a href="#growth">
			<img src="assets/images/body.png" class="img-responsive" alt="Growth">
			</a>
			<h4 class="kpi-metric hidden-xs" id="growthKPI"></h4>
			<span class="kpi-description text-muted hidden-xs">
			Bigger
			</span>
		</div>
	</div>
</nav>

<div class="sections">
<div id="age" class="container-fluid section firstSection">
	{% if site.data.milestones.size > 0 %}
	<div class="row">
		<div class="col-xs-12">
			<h2>Milestones</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="milestones">

			</div>
		</div>
	</div>
	{% endif %}

	<div class="row">
		<div class="col-xs-12">
			<h2>Recent Events</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="timeline" class="google-chart"></div>
		</div>
	</div>
</div>

<div id="sleep" class="container-fluid section">
	<div class="row">
		<div class="col-xs-12">
			<h2>Night Sleeps</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="nightSleepChart" class="google-chart"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<h2>Total Sleep</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="sleepChart" class="google-chart"></div>
		</div>
	</div>
</div>

<div id="feedings" class="container-fluid section">
	<div class="row">
		<div class="col-xs-12">
			<h2>Feeding Frequency</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="feedingsChart" class="google-chart"></div>
		</div>
	</div>
</div>

<div id="diapers" class="container-fluid section">
	<div class="row">
		<div class="col-xs-12">
			<h2>Diapers</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="diapersChart" class="google-chart"></div>
		</div>
	</div>
</div>

<div id="growth" class="container-fluid section">
	<div class="row">
		<div class="col-xs-12">
			<h2>Weight compared to 25th and 75th percentiles</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="weightChart" class="google-chart"></div>
		</div>
	</div>
</div>

<div id="medicines" class="container-fluid section">
	<div class="row">
		<div class="col-xs-12">
			<h2>Medicines</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div id="medicinesChart" class="google-chart"></div>
		</div>
	</div>
</div>

</div>

</div>

<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'timeline']});
google.charts.setOnLoadCallback(createCharts);

var urlParams = new URLSearchParams(window.location.search);

var startDate = urlParams.get('start') && moment(urlParams.get('start'));
var endDate = urlParams.get('end') && moment(urlParams.get('end'));

var dataDateFormat = '{{site.data.config.dataDateFormat}}';
var dataDateTimeFormat = '{{site.data.config.dataDateTimeFormat}}';
var metadata = new Metadata({{ site.data.baby | jsonify }});
var sleeps = new Sleeps({{ site.data.sleeps | jsonify }}, dataDateTimeFormat);
var feeds = new Feeds({{ site.data.feeds | jsonify }}, dataDateTimeFormat);
var excretions = new Excretions({{ site.data.excretions | jsonify }}, dataDateTimeFormat);
var journals = new Journals({{ site.data.journal_entries | jsonify }}, dataDateTimeFormat);
var medicines = new Medicines({{ site.data.medicines | jsonify }}, dataDateTimeFormat);
var medicineRecords = new MedicineRecords({{ site.data.medicine_records | jsonify }}, dataDateTimeFormat);
var growths = new Growths({{ site.data.growths | jsonify }}, dataDateFormat);
{% if site.data.baby.gender == 'female' %}
var weightPercentiles = new GrowthPercentiles({{ site.data.who_growth_percentiles_girls | jsonify }});
{% else %}
var weightPercentiles = new GrowthPercentiles({{ site.data.who_growth_percentiles_boys | jsonify }});
{% endif %}

$("#ageKPI").html(metadata.age.value);
$("#ageKPIUnits").html(metadata.age.unit);
$("#sleepHoursKPI").html(Math.round(sleeps.totalHours));
$("#feedingsKPI").html(feeds.data.length);
$("#diapersKPI").html(excretions.data.length);
$("#bathsKPI").html(_.filter(journals.data, {type: "Bath"}).length);
$("#growthKPI").html(growths.weightChange.toFixed(1) + "x");

var milestones = {{ site.data.milestones | jsonify }};
var milestonesCarousel;
if (milestones && milestones.length) {
	milestonesCarousel = new MilestonesCarousel(milestones, $("#milestones"), metadata);
}

function init() {
	addHeaderShrink();
	if (milestonesCarousel) {
		milestonesCarousel.draw();
	}
}

window.onload = init();

var charts = [];

function createCharts() {
	charts.push(new TimelineChart(document.getElementById('timeline'), sleeps, feeds, excretions, journals));
	charts.push(new NightSleepChart(document.getElementById('nightSleepChart'), sleeps));
	charts.push(new SleepChart(document.getElementById('sleepChart'), sleeps));
	charts.push(new FeedingsChart(document.getElementById('feedingsChart'), feeds));
	charts.push(new DiapersChart(document.getElementById('diapersChart'), excretions));
	charts.push(new WeightChart(document.getElementById('weightChart'), growths));
	charts.push(new MedicinesChart(document.getElementById('medicinesChart'), medicines, medicineRecords, startDate, endDate));

	drawCharts();
}

function drawCharts() {
	_.each(charts, function (chart) {
		chart.draw();
	});
}

$(window).resize(drawCharts);

</script>