--- 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>