Example SVG generation.
This commit is contained in:
@@ -58,6 +58,7 @@ babyStatsFlipperBack {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
transform: rotateY(180deg);
|
transform: rotateY(180deg);
|
||||||
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.babyStatsChildName, .babyStatsYourName {
|
.babyStatsChildName, .babyStatsYourName {
|
||||||
@@ -260,6 +261,7 @@ babyStatsDisplayDate {
|
|||||||
}
|
}
|
||||||
|
|
||||||
babyStatsDisplayDateTitle {
|
babyStatsDisplayDateTitle {
|
||||||
|
display: block;
|
||||||
color: rgb(189,21,80);
|
color: rgb(189,21,80);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
@@ -860,5 +860,24 @@ BabyStats.prototype.updateDisplayDate_ = function(message) {
|
|||||||
dateObj.appendChild(dateTitle);
|
dateObj.appendChild(dateTitle);
|
||||||
dateTitle.textContent =
|
dateTitle.textContent =
|
||||||
date.toLocaleDateString() + ' (' + days[date.getDay()] + ')';
|
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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user