diff --git a/public/javascripts/global.js b/public/javascripts/global.js
index 9aa0c94..e575d7b 100644
--- a/public/javascripts/global.js
+++ b/public/javascripts/global.js
@@ -10,7 +10,7 @@ import * as chart_dayavg from './chart_dayavg.js'
import * as chart_daynight from './chart_daynight.js'
import * as chart_lden from './chart_lden.js'
import * as utils from "./chart_utilities.js";
-import {showChart} from './showcharts.js'
+import {tabtable} from './showcharts.js'
(async () => {
@@ -34,16 +34,6 @@ import {showChart} from './showcharts.js'
}
// END global variables
- // table to distribute the different charts
- const tabtable = [
- {id: 'kartentab', type: 'map', container: 'map', func: map.showMap},
- {id: 'livetab', type: 'live', container: 'dlive', func: showChart},
- {id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart},
- {id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart},
- {id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart},
- {id: 'ldentab', type: 'lden', container: 'dlden', func: showChart},
- ]
-
// remove the taps (if shownig the map)
const removeTabs = () => {
diff --git a/public/javascripts/map.js b/public/javascripts/map.js
index d812851..f5e22b6 100644
--- a/public/javascripts/map.js
+++ b/public/javascripts/map.js
@@ -13,7 +13,7 @@ let clickedSensor = 0
const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
const dba = [100, 80, 60, 40, 20, 0, -999];
-export const showMap = async (params) => {
+export async function showMap(params) {
if (map) return
map = L.map('map',{ scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js
index 6c256b0..f57818f 100644
--- a/public/javascripts/showcharts.js
+++ b/public/javascripts/showcharts.js
@@ -1,15 +1,75 @@
import {logerror} from "./logit.js";
import * as utils from "./chart_utilities.js";
+import { DateTime } from './luxon.min.js'
+import * as map from "./map.js";
+
+// table to distribute the different charts
+export const tabtable = [
+ {id: 'kartentab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
+ {id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 100, dformat: "dd.LL - HH:mm:ss"},
+ {id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 10, dformat: "dd.LL - HH'h'"},
+ {id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 10, dformat: "dd.LL"},
+ {id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart, div: 10, dformat: "dd.LL"},
+ {id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 10, dformat: "dd.LL"},
+]
+
export async function showChart(params, typ, container) {
- const url = `/chart/getsensordata?&sensorid=${params.sid}&data=${typ}`
+ function form() {
+ for(let item of tabtable) {
+ if (item.type === typ) {
+ const d = DateTime.fromMillis(this.x, {zone: 'utc'})
+ const d1 = d.plus({days: 1})
+ let fmt = d.toFormat(item.dformat)
+ if(((typ === 'daynight') && (this.series.name.startsWith('N'))) || (typ === 'lden')) {
+ fmt = `${d.toFormat('dd')}/${d1.toFormat('dd.LL')}`
+ }
+ let y = Math.round(this.y * item.div) / item.div
+ return '
' +
+ fmt + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+ }
+ }
+
+ function xformat() {
+ if(typ === 'lden') {
+ let lbl = this.axis.defaultLabelFormatter.call(this);
+ this.value += 86400000;
+ let lbl1 = this.axis.defaultLabelFormatter.call(this);
+ return parseInt(lbl) + '/' + lbl1;
+ } else if ((typ === 'live') || (typ === 'havg')) {
+ let v = this.axis.defaultLabelFormatter.call(this);
+ if (v.indexOf(':') == -1) {
+ return '' + v + '';
+ } else {
+ return v;
+ }
+ } else {
+ return this.axis.defaultLabelFormatter.call(this);
+ }
+ }
+
+
+ const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}`
let ret = await fetch(url)
.catch(e => {
logerror(e)
});
let erg = await ret.json()
+ erg.options.xAxis.labels.formatter = xformat
+ erg.options.tooltip.formatter = form
let chr = Highcharts.chart(container, erg.options, function (chart) {
utils.addSensorID2chart(chart, {sid: erg.params.sensorid, indoor: erg.params.indoor}, document.getElementById(container).offsetWidth)
})
+
+ if((typ === 'havg') || (typ === 'davg')) {
+ erg.options2.tooltip.formatter = form
+ erg.options2.xAxis.labels.formatter = xformat
+ let ch1 = Highcharts.chart(typ === 'havg' ? 'dpeak1' : 'dpeak2', erg.options2)
+ }
}
+
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index fa9a046..3c5cf58 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -154,9 +154,8 @@ footer #author #versn {
margin-top: 44px;
}
-#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak {
+#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak1, #dpeak2 {
width: 100%;
- height: 100%;
margin: auto;
}
diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map
index 1a6d5ea..eea3cff 100644
--- a/public/stylesheets/style.css.map
+++ b/public/stylesheets/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EAEA;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass
index 1416737..9e452bf 100644
--- a/public/stylesheets/style.sass
+++ b/public/stylesheets/style.sass
@@ -150,9 +150,9 @@ footer
.tab-pane
margin-top: 44px
-#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak
+#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak1, #dpeak2
width: 100%
- height: 100%
+ // height: 100%
margin: auto
#dialogError
diff --git a/views/index.pug b/views/index.pug
index 16a3696..e5f0789 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -35,9 +35,10 @@ block content
#dlive
.tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
#dhour
- #dpeak
+ #dpeak1
.tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
#dday
+ #dpeak2
.tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
#ddaynight DayNightTAB
.tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")