Add graph

Konkrad · Sep 27, 2015 · 6588a13 · 6588a13
1 parent a357929
commit 6588a13
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 27 deletions.
diff --git 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;
-}
diff --git a/www/index.html b/www/index.html
@@ -35,6 +35,7 @@ <h2 class="weather-summary"><%- summary %></h2>
     </script>
 
     <script type="template" id="weight-template">
+
      <h1 class="weight">
      <span class="weight-number"><%- weight %></span><span class="weight-unit">kg</span>
      </h1>
@@ -44,12 +45,15 @@ <h1 class="weight">
 
     <script type="template" id="welcome-user-template">
      <h1>Hello <%= name %>!</h1>
+
+     <svg id="chart" class="chart" width="375" height="250"></svg>
+
     </script>
 
     <script type="template" id="new-user-template">
      <div class="new-user">
      <h1>Hello!</h1>
-     <p>Scan the QR-Code to create a new account</p>
+     <p>Please scan the QR-Code to create a new account</p>
      <img src="<%= qrURL %>" class="qr-code" width="200px" height="200px">
      </div>
     </script>
@@ -69,8 +73,8 @@ <h3>provided by theysaidso.com</h3>
     </script>
 
     <script type="template" id="image-template">
-      <img src="<%- url %>">
-      <p><%- copyright %></p>
+     <img src="<%- url %>">
+     <p><%- copyright %></p>
     </script>
 
     <!-- vendor  -->

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