From a2d52d8e5775bbb6e5456d9152d751f820badf14 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sat, 2 Jan 2016 11:35:20 -0800
Subject: [PATCH] Example SVG generation.

---
 static/babystats.css |  2 ++
 static/babystats.js  | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/static/babystats.css b/static/babystats.css
index 3f8938d..dc63a3f 100644
--- a/static/babystats.css
+++ b/static/babystats.css
@@ -58,6 +58,7 @@ babyStatsFlipperBack {
   flex-direction: column;
   backface-visibility: hidden;
   transform: rotateY(180deg);
+  overflow: scroll;
 }
 
 .babyStatsChildName, .babyStatsYourName {
@@ -260,6 +261,7 @@ babyStatsDisplayDate {
 }
 
 babyStatsDisplayDateTitle {
+  display: block;
   color: rgb(189,21,80);
   font-size: 20px;
   font-weight: bold;
diff --git a/static/babystats.js b/static/babystats.js
index 6b575f4..bcf392e 100644
--- a/static/babystats.js
+++ b/static/babystats.js
@@ -860,5 +860,24 @@ BabyStats.prototype.updateDisplayDate_ = function(message) {
     dateObj.appendChild(dateTitle);
     dateTitle.textContent =
         date.toLocaleDateString() + ' (' + days[date.getDay()] + ')';
+
+    var svgns = 'http://www.w3.org/2000/svg';
+    var svg = document.createElementNS(svgns, "svg");
+    svg.setAttributeNS(null, 'viewBox', '0 0 500 ' + (this.tiles_.length * 10));
+    svg.setAttributeNS(null, 'preserveAspectRatio', 'none');
+    svg.style.display = 'block';
+    svg.style.width = '100%';
+    for (var i = 0; i < this.tiles_.length; i++) {
+      var line = document.createElementNS(svgns, 'line');
+      line.setAttributeNS(null, 'x1', 0);
+      line.setAttributeNS(null, 'x2', 500);
+      line.setAttributeNS(null, 'y1', i * 10 + 5);
+      line.setAttributeNS(null, 'y2', i * 10 + 5);
+      line.setAttributeNS(null, 'stroke',
+                          i % 2 ? 'rgb(233,127,2)' : 'rgb(248,202,0)');
+      line.setAttributeNS(null, 'stroke-width', 1);
+      svg.appendChild(line);
+    }
+    dateObj.appendChild(svg);
   }
 };