pingu_98/cosmicpi-rpi_V1.5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve histogram view

Browse source
This commit is contained in:
Darko Lukic 2018-03-24 18:37:09 +01:00
parent 1e9dbb4df6
commit cd24669b45
4 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/assets/css/main.css
View file

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

22
ui/src/components/dashboard/Histogram.vue
View file

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

2
ui/src/components/dashboard/Location.vue
View file

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

4
ui/src/store.js
View file

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