diff --git a/www/css/main.css b/www/css/main.css
index a2b2b07..f9f9d7b 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -58,25 +58,28 @@ h1 {
position: relative;
}
+.weight-widget h1, .new-user {
+ text-align: center;
+}
+
.weight-widget .weight {
margin: 0;
width: 200px;
text-align: center;
position: absolute;
- left: 50%;
+ right: 100px;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.2s ease-out;
}
.weight-widget.show-content .weight {
- left: 0%;
+ right: 0;
transform: translate(0, -50%);
}
.weight-content {
width: 100%;
- padding-left: 200px;
}
.weight-number {
@@ -173,15 +176,6 @@ h1 {
opacity: 0;
}
-
-.new-user {
- text-align: center;
-}
-
-.new-user h1, .new-user p {
- text-align: left;
+.chart {
+ margin-left: 30px
}
-
-.new-user p {
- font-size: 20px;
-}
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index f57c630..af7b342 100644
--- a/www/index.html
+++ b/www/index.html
@@ -35,6 +35,7 @@
<%- summary %>
@@ -69,8 +73,8 @@ provided by theysaidso.com
diff --git a/www/js/fake-balance-board.js b/www/js/fake-balance-board.js
index 83d9eb3..14f3115 100644
--- a/www/js/fake-balance-board.js
+++ b/www/js/fake-balance-board.js
@@ -1,6 +1,6 @@
(function (exports) {
- var weight = 60;
+ var weight = 68;
function getData (v) {
return {
@@ -20,7 +20,6 @@
setTimeout(function () {
-
fn(getData(weight));
fn(getData(weight));
fn(getData(weight));
@@ -42,11 +41,11 @@
fn(getData(weight));
fn(getData(weight));
setTimeout(function () {
- fn(getData(weight));
+ //fn(getData(weight));
- }, 500);
+ }, 1000);
- }, 1000);
+ }, 0);
}
},
off: function () {}
diff --git a/www/js/weight.js b/www/js/weight.js
index 69d4200..70c225e 100644
--- a/www/js/weight.js
+++ b/www/js/weight.js
@@ -42,19 +42,71 @@
}
function handleLogin (data) {
- var html;
-
if (data.status === "not_found") {
- html = newUserTemplate({qrURL: data.qr_code})
+ $('.weight-content', self).html(newUserTemplate({qrURL: data.qr_code}));
+
} else {
- html = welcomeUserTemplate({name: data.name});
+ $('.weight-content', self).html(welcomeUserTemplate({name: data.name}));
+ drawChart(data.history);
}
self.classList.add("show-content");
+ }
- $('.weight-content', self).html(html);
+ function drawChart (progress) {
+ var padding = 20;
+ var width = 375;
+ var height = 250;
+ var chart = d3.select("#chart");
+
+ progress = progress.sort(function (a, b) {return a.day - b.day}).slice(-14);
+
+ var xRange = d3.scale.linear()
+ .range([0, width])
+ .domain([
+ d3.min(progress, function(d) {return d.day;}),
+ d3.max(progress, function(d) {return d.day;})
+ ]);
+
+ var yRange = d3.scale.linear()
+ .range([0, height - 2*padding])
+ .domain([
+ d3.min(progress, function(d) {return d.weight;}),
+ d3.max(progress, function(d) {return d.weight;})
+ ]);
+
+
+ var lineFunc = d3.svg.line()
+ .x(function(d) {
+ return xRange(d.day);
+ })
+ .y(function(d) {
+ return height -padding*2 - yRange(d.weight);
+ })
+ .interpolate('basis');
+
+
+ var path = chart
+ .append('svg:g')
+ .attr('transform', 'translate(0, '+ padding +')')
+ .append('svg:path')
+ .attr('d', lineFunc(progress))
+ .attr('stroke', 'white')
+ .attr('stroke-width', 2)
+ .attr('fill', 'none');
+
+ var totalLength = path.node().getTotalLength();
+
+ path
+ .attr("stroke-dasharray", totalLength + " " + totalLength)
+ .attr("stroke-dashoffset", totalLength)
+ .transition()
+ .duration(1000)
+ .ease("basis-open")
+ .attr("stroke-dashoffset", 0);
}
+
function render () {
self.innerHTML = template({weight: weight});
}