Improve histogram view

ui/src/assets/css/main.css

@@ -116,3 +116,7 @@ hr {
     padding: 20px;
     border-radius: 5px; 
 }
+
+.card-narrow {
+    padding: 5px !important;
+}

ui/src/components/dashboard/Histogram.vue

@@ -2,18 +2,22 @@
 <div class="card card-default">
     <div class="card-header">
         <h5>Histogram</h5>
-        <p class="small">
-            Showing data in period {{from}} - {{to}} ({{period}}s), 
-            <b>{{ numberOfEvents }}</b> events with
-            bin size <b>{{ binSize }}s</b>
-        </p>
+        <div class="row">
+            <div class="col-10">
+                <p class="small">
+                    Showing data in period {{from}} - {{to}} ({{period}}s), 
+                    <b>{{ numberOfEvents }}</b> events with
+                    bin size <b>{{ binSize }}s</b>
+                </p>
+            </div>
+            <div class="col-2">
+                <input v-model="binSize" class="form-control" min="1" type="number"/>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
+    <div class="card-body card-narrow">
         <canvas ref="canvas" style="height:300px"></canvas>
     </div>
-    <div class="card-footer">
-        <input v-model="binSize" class="form-control" min="1" type="number"/>
-    </div>
 </div>
 </template>
 

ui/src/components/dashboard/Location.vue

@@ -3,7 +3,7 @@
     <div class="card-header">
         <h5>Location</h5>
     </div>
-    <div class="card-body">
+    <div class="card-body card-narrow">
         <iframe class="google-map" ref="map" :src=googleMapsUrl></iframe>
     </div>
 </div>

ui/src/store.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import moment from 'moment';
 
 
-const SERIES_MAX_SIZE = 100;
+const SERIES_MAX_SIZE = 50;
 Vue.use(Vuex);
 
 
@@ -89,7 +89,7 @@ const mutations = {
             let last = state.series[state.series.length - 1];
             let lastUTCUnixTime = last ? last.UTCUnixTime : 0;
             let lastSubSeconds = last ? last.SubSeconds : 0;
-            if (item.UTCUnixTime + item.SubSeconds >= lastUTCUnixTime + lastSubSeconds) {
+            if (item.UTCUnixTime + item.SubSeconds > lastUTCUnixTime + lastSubSeconds) {
                 state.series.push(item);
             }
         }