show a graph of battery usage at the bottom of the map

compass/app/Http/Controllers/Api.php

@@ -50,17 +50,20 @@ class Api extends BaseController
     $results = $qz->queryRange($start, $end);
 
     $locations = [];
+    $properties = [];
 
     foreach($results as $id=>$record) {
       $record->date->format('U.u');
       $locations[] = $record->data;
+      $properties[] = $record->data->properties;
     }
 
     if($request->input('format') == 'linestring') {
 
       $response = array(
         'type' => 'LineString',
-        'coordinates' => array()
+        'coordinates' => array(),
+        'properties' => $properties
       );
       foreach($locations as $loc) {
         $response['coordinates'][] = $loc->geometry->coordinates;

compass/public/assets/map.css

@@ -1,16 +1,15 @@
-html, body, #map {
+html, body {
   height: 100%;
 }
 
-.leaflet-top .leaflet-control-zoom {
-  margin-top: 60px;
-  margin-left: 26px;
+#map {
+  height: calc(100% - 120px);
 }
 
 #calendar {
   z-index: 100;
   width: 200px;
-  height: calc(100% - 40px);
+  height: calc(100% - 160px);
   position: absolute;
   top: 10px;
   right: 10px;
@@ -27,7 +26,7 @@ html, body, #map {
 }
 #calendar .scroll {
   overflow: scroll;      
-  height: calc(100%);
+  height: 100%;
 }
 
 table.calendar {
@@ -50,3 +49,14 @@ table.calendar {
 .calendar td a.selected {
   background: #6699ff;
 }
+
+#battery-chart {
+  width: 100%;
+}
+
+
+/* Move the map zoom controls away from the Compass logo */
+.leaflet-top .leaflet-control-zoom {
+  margin-top: 60px;
+  margin-left: 26px;
+}

compass/public/assets/map.js

@@ -1,3 +1,76 @@
+Array.prototype.clean = function(deleteValue) {
+  for (var i = 0; i < this.length; i++) {
+    if (this[i] == deleteValue) {         
+      this.splice(i, 1);
+      i--;
+    }
+  }
+  return this;
+};
+
+/*
+  Array.findRanges
+  
+  Turns this:
+  
+  ["a","a","a","b","b","c","c","c","c","c","a","a","c"]
+  
+  into this:
+  
+  {
+    "a":[
+      {
+        "from":0,
+        "to":2
+      },
+      {
+        "from":10,
+        "to":11
+      }
+    ],
+    "b":[
+      {
+        "from":3,
+        "to":4
+      }
+    ],
+    "c":[
+      {
+        "from":5,
+        "to":9
+      },
+      {
+        "from":12,
+        "to":12
+      }
+    ]
+  }
+
+*/
+
+Array.prototype.findRanges = function() {
+  var buckets = {};
+  for(var i = 0; i < this.length; i++) {
+    if(!(this[i] in buckets)) {
+      buckets[this[i]] = [{
+        from: i,
+        to: i
+      }]
+    } else {
+      var last = buckets[this[i]][ buckets[this[i]].length-1 ];
+      if(i == last.to + 1) {
+        last.to = i;
+      } else {
+        buckets[this[i]].push({
+          from: i,
+          to: i
+        })
+      }
+    }
+  }
+  return buckets;
+};
+
 var map = L.map('map', { zoomControl: false }).setView([45.516, -122.660], 14, null, null, 24);
 
 var layer = L.esri.basemapLayer("Topographic");
@@ -15,9 +88,18 @@ var geojsonLineOptions = {
 
 var visible_layers = [];
 var visible_data = [];
+var highlightedMarker;
 var animatedMarker;
 var timers = [];
 
+var batteryChart;
+
+/*
+Chart.defaults.global.animation = false;
+Chart.defaults.global.responsive = true;
+*/
+
+  
 function resetAnimation() {
   if(animatedMarker) {
     map.removeLayer(animatedMarker);
@@ -77,6 +159,107 @@ jQuery(function($){
           }
           map.fitBounds(full_bounds);
         }
+        
+        var batteryStateBands = [];
+        var buckets = data.properties.map(function(d){return d.battery_state}).findRanges();
+
+        for(var i in buckets) {
+          for(var j=0; j<buckets[i].length; j++) {
+            switch(i) {
+              case "charging":
+                buckets[i][j].color = "rgba(193,236,171,0.4)";
+                break;
+              case "full":
+                buckets[i][j].color = "rgba(171,204,236,0.4)";
+                break;
+              case "unplugged":
+                buckets[i][j].color = "rgba(236,178,171,0.4)";
+                break;
+              default:
+                buckets[i][j].color = "#ffffff";
+                break;
+            }
+            batteryStateBands.push(buckets[i][j]);
+          }
+        }
+
+        $('#battery-chart').highcharts({
+          title: {
+            text: '',
+            style: {
+              display: 'none'
+            }
+          },
+          subtitle: {
+            text: '',
+            style: {
+              display: 'none'
+            }
+          },
+          chart: {
+            height: 80
+          },
+          legend: {
+            enabled: false
+          },
+          xAxis: {
+            categories: data.properties.map(function(d){
+              if(isNaN(d.timestamp)) {
+                return d.timestamp.substr(11,5);
+              } else {
+                var date = new Date(d.timestamp * 1000);
+                return date.getHours() + ":" + ("0" + date.getMinutes()).substr(-2);
+              }
+            }),
+            plotBands: batteryStateBands,
+            labels: {
+              style: {
+                fontSize: '8px'
+              }
+            }
+          },
+          yAxis: {
+            title: {
+              text: ''
+            },
+            plotLines: [{
+              value: 0,
+              width: 1,
+              color: '#808080'
+            }],
+            max: 100,
+            min: 0
+          },
+          series: [{
+            name: 'Battery',
+            data: data.properties.map(function(d,i){
+              return {
+                x: i, 
+                y: ('battery_level' in d ? d.battery_level * 100 : -1), 
+                state: d.battery_state
+              }
+            }),
+            tooltip: {
+              animation: true,
+              pointFormat: '{point.state}<br><b>{point.y}</b>',
+              valueSuffix: '%'
+            },
+            turboThreshold: 0
+          }]
+        });
+        $('#battery-chart').mousemove(function(event){
+          var chart = $('#battery-chart').highcharts();
+          var percent = (event.offsetX - chart.plotLeft) / chart.plotWidth;
+          if(percent >= 0 && percent <= 1) {
+            var coord = pointFromGeoJSON(visible_data[0].coordinates[Math.round(percent * visible_data[0].coordinates.length)]);
+            if(!highlightedMarker) {
+              highlightedMarker = L.marker(coord).addTo(map);
+            } else {
+              highlightedMarker.setLatLng(coord);
+            }
+          }
+        });
+                
       }
     });
 
@@ -110,4 +293,10 @@ jQuery(function($){
 
   });
 
+  $(".calendar a[data-date='"+((new Date()).toISOString().slice(0,10))+"']").focus().click();
+
+  ////////////////////
+
+  //batteryChart = new Chart(document.getElementById("battery-chart").getContext("2d"));
+
 });

compass/resources/views/layouts/map.blade.php

@@ -17,6 +17,7 @@
 
     <script src="/assets/leaflet-0.7.3/leaflet.js"></script>
     <script src="/assets/leaflet-0.7.3/esri-leaflet.js"></script>
+    <script src="/assets/highcharts/js/highcharts.js"></script>
     <script src="/assets/map.js"></script>
   </body>
 </html>

compass/resources/views/map.blade.php

@@ -31,12 +31,10 @@
 </div>
 
 <div id="map"></div>
+<div id="graphs">
+  <div id="battery-chart" width="800" height="80"></div>
+</div>
 
 <div id="database" data-name="{{ $database->name }}" data-token="{{ $database->read_token }}"></div>
 
-<script>
-jQuery(function($){
-  $(".calendar a[data-date='{{ date('Y-m-d') }}']").focus().click();
-});
-</script>
 @endsection