Example SVG generation.

This commit is contained in:
Ian Gulliver
2016-01-02 11:35:20 -08:00
parent a74b64f457
commit a2d52d8e57
2 changed files with 21 additions and 0 deletions

View File

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

View File

@@ -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);
}
};