Update bucketing

visual_playground/api.rb

@@ -31,7 +31,14 @@ class API
         if group_by == :yearmonth
           row[:as_date] = Date.strptime(row[:yearmonth].to_s, "%Y%m")
         elsif group_by == :yearweek
-          row[:as_date] = Date.strptime(row[:yearweek].to_s, "%Y%W")
+          begin
+            year_week = row[:yearweek].to_s
+            # TODO
+            year_week = (year_week.gsub("53", "01").to_i - 100).to_s if year_week.end_with?("53") # Week 53 can't be parsed by Ruby, messy for now
+            row[:as_date] = Date.strptime(year_week, "%Y%W")
+          rescue => ex
+            require 'pry'; binding.pry
+          end
         else
           raise "not yet implemented"
         end
@@ -113,7 +120,6 @@ class API
 end
 
 if __FILE__ == $0
-  # puts API.new.fetch(key: "mood")
   puts API.new.bucket(
     by: "gym",
     value: "steps",

visual_playground/frontend.js

@@ -140,7 +140,6 @@ function reloadIndex(index) {
 
             Plotly.redraw('myGraph');
             console.log(allData);
-            // console.log(layout);
         });
     } else {
         allData[index].y = [];
@@ -174,6 +173,7 @@ function updateBucket() {
 }
 
 function updateBucketByOption() {
+    const minDiff = 0.1;
     if (!currentBucketData) { return; }
 
     bucket1 = document.getElementById("bucket-by-option-1").value
@@ -184,7 +184,7 @@ function updateBucketByOption() {
         val = currentBucketData[key]
         let diff = parseFloat(val[bucket1]["value"] - val[bucket2]["value"].toFixed(5))
 
-        if (Math.abs(diff) > 0.2) {
+        if (Math.abs(diff) > minDiff) {
             dataToRender.push({
                 "key": key,
                 "bucket1": val[bucket1],
@@ -194,7 +194,7 @@ function updateBucketByOption() {
         }
     }
     dataToRender.sort(function(a, b) {
-        return a.diff - b.diff;
+        return b.diff - a.diff;
     })
     console.log(dataToRender)
 
@@ -202,6 +202,7 @@ function updateBucketByOption() {
     allBucketData[0]["y"] = dataToRender.map(({ diff }) => diff);
     console.log(allBucketData)
 
+    bucketLayout["title"] = `${bucket} being ${bucket1} had the following effects on that day`
     Plotly.redraw('bucketGraph');
 }
 

visual_playground/style.css

@@ -1,51 +1,70 @@
 * {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
-  font-weight: 300;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    font-weight: 300;
 }
+
 #myGraph {
-  width: "100%";
-  height: 500;
+    width: "100%";
+    height: 500;
 }
-#keysTable > tbody > tr > th {
-  padding: 15px;
-  font-weight: 800;
+
+#keysTable>tbody>tr>th {
+    padding: 15px;
+    font-weight: 800;
 }
-#keysTable > tbody > tr > td {
-  padding: 5px;
-  text-align: center;  
+
+#keysTable>tbody>tr>td {
+    padding: 5px;
+    text-align: center;
 }
-#keysTable > tbody > tr > td > input {
-  cursor: pointer;
+
+#keysTable>tbody>tr>td>input {
+    cursor: pointer;
 }
+
 select {
-  display: block;
-  height: 40px;
-  width: 100%;
-  line-height: 40px;
+    display: block;
+    height: 40px;
+    width: 100%;
+    line-height: 40px;
 }
+
 #keysContainer {
-  float: left;
-  width: 340px;
+    float: left;
+    width: 340px;
 }
+
 #keysContainer input {
-  height: 20px;
-  width: 20px;
+    height: 20px;
+    width: 20px;
 }
+
 #keysContainer tr {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
+
 #attributesContainer {
-  float: right;
-  width: calc(100% - 550px);
+    float: right;
+    width: calc(100% - 550px);
 }
-#attributesTable > tbody > tr > td {
-  padding: 10px;
+
+#attributesTable>tbody>tr>td {
+    padding: 10px;
 }
+
 #mainForm {
-  height: 300px;
-  padding: 20px;
+    height: 300px;
+    padding: 20px;
 }
+
 td:first-child {
-  text-align: right;
+    text-align: right;
 }
+
+.bucket-by-option {
+    width: 200px;
+    display: inline;
+    margin-right: 50px;
+    margin-top: 20px;
+}