*** WIP WIP *** woks now for live and havg
This commit is contained in:
@@ -9,224 +9,18 @@ import {DateTime} from "./luxon.min.js";
|
||||
|
||||
|
||||
export const showLive = async (params) => {
|
||||
await PlotDayLive_Noise(params.sid)
|
||||
}
|
||||
|
||||
const PlotDayLive_Noise = async (sid) => {
|
||||
|
||||
let series1 = []
|
||||
let series2 = []
|
||||
let series3 = []
|
||||
|
||||
// ave the current (actual) values here
|
||||
let aktVal = {}
|
||||
|
||||
// read the data from the server
|
||||
const url = `/chart/getsensordata?&sensorid=${sid}`
|
||||
const url = `/chart/getsensordata?&sensorid=${params.sid}`
|
||||
let ret = await fetch(url)
|
||||
.catch(e => {
|
||||
logerror(e)
|
||||
});
|
||||
let data = await ret.json()
|
||||
let erg = await ret.json()
|
||||
|
||||
if(!data.err) {
|
||||
let lastidx = data.count - 1
|
||||
// Put values into the arrays
|
||||
let cnt = 0
|
||||
data.values.forEach((x) => {
|
||||
let dat = new Date(x.datetime).getTime()
|
||||
series1.push([dat, x.noise_LAeq])
|
||||
series2.push([dat, x.noise_LA_max])
|
||||
series3.push([dat, x.noise_LA_min]) // put data and value into series array
|
||||
})
|
||||
|
||||
if (data.values.length != 0) {
|
||||
// Aktuelle Werte speichern
|
||||
aktVal['LAeq'] = data.values[lastidx].noise_LAeq
|
||||
aktVal['LAMax'] = data.values[lastidx].noise_LA_max
|
||||
aktVal['LAMin'] = data.values[lastidx].noise_LA_min
|
||||
|
||||
// InfoTafel füllen
|
||||
let infoTafel =
|
||||
'<table class="infoTafel"><tr >' +
|
||||
'<th colspan="3">Aktuelle Werte</th>' +
|
||||
'</tr><tr>' +
|
||||
'<td>LAeq</td><td>' + (aktVal.LAeq).toFixed(1) + '</td><td>dbA</td>'
|
||||
infoTafel +=
|
||||
'</tr><tr>' +
|
||||
'<td>LAmin</td><td>' + (aktVal.LAMin).toFixed(0) + '</td><td>dbA</td>'
|
||||
infoTafel +=
|
||||
'</tr><tr>' +
|
||||
'<td>LAmax</td><td>' + (aktVal.LAMax).toFixed(0) + '</td><td>dbA</td>'
|
||||
infoTafel +=
|
||||
'</tr></table>' +
|
||||
'</div>'
|
||||
}
|
||||
} else {
|
||||
utils.showError(data.err)
|
||||
}
|
||||
let txtMeldung = false
|
||||
|
||||
|
||||
// Plot-Options
|
||||
let options = utils.createGlobObtions('dd.LL HH:mm:ss')
|
||||
|
||||
let series_LAeq = {
|
||||
name: 'LAeq',
|
||||
data: series1,
|
||||
color: utils.colors.eq,
|
||||
yAxis: 0,
|
||||
zIndex: 1,
|
||||
marker: {
|
||||
enabled: false,
|
||||
symbol: 'square',
|
||||
},
|
||||
visible: true,
|
||||
fillColor: {
|
||||
linearGradient: [0, 600, 0, 0],
|
||||
stops: [
|
||||
[0, 'rgb(238,223,236)'],
|
||||
[1, 'rgb(238,223,236)']
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
let series_LAMax = {
|
||||
name: 'LAmax',
|
||||
data: series2,
|
||||
color: utils.colors.max,
|
||||
yAxis: 0,
|
||||
zIndex: 0,
|
||||
marker: {
|
||||
enabled: false,
|
||||
symbol: 'square',
|
||||
},
|
||||
visible: true,
|
||||
fillColor: {
|
||||
linearGradient: [0, 600, 0, 0],
|
||||
stops: [
|
||||
[0, 'rgb(255,233,236)'],
|
||||
[1, 'rgb(255,233,236)']
|
||||
]
|
||||
},
|
||||
// fillOpacity: 0.2,
|
||||
}
|
||||
|
||||
let series_LAMin = {
|
||||
name: 'LAmin',
|
||||
data: series3,
|
||||
color: utils.colors.min,
|
||||
yAxis: 0,
|
||||
zIndex: 6,
|
||||
marker: {
|
||||
enabled: false,
|
||||
symbol: 'square',
|
||||
},
|
||||
visible: true,
|
||||
fillColor: {
|
||||
linearGradient: [0, 600, 0, 0],
|
||||
stops: [
|
||||
[0, 'rgb(219,216,217)'],
|
||||
[1, 'rgb(219,216,217)']
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
let yAxis_LAeq = { // 1
|
||||
title: {
|
||||
text: 'dbA',
|
||||
style: {
|
||||
color: 'black'
|
||||
}
|
||||
},
|
||||
max: utils.noise_ymax,
|
||||
// min: utils.noise_ymin,
|
||||
min: 20,
|
||||
// opposite: true,
|
||||
tickAmount: 11,
|
||||
useHTML: true,
|
||||
}
|
||||
|
||||
options.series = []
|
||||
options.yAxis = []
|
||||
options.series[0] = series_LAeq
|
||||
options.series[1] = series_LAMin
|
||||
options.title.text = 'Noise level for one day'
|
||||
options.subtitle.useHTML = true
|
||||
options.subtitle.text = '2.5min log. average values <br />  '
|
||||
options.series[2] = series_LAMax
|
||||
// options.yAxis[2] = yAxis_LAMin
|
||||
options.yAxis[0] = yAxis_LAeq
|
||||
// options.yAxis[1] = yAxis_LAMax
|
||||
options.chart.zoomType = 'x'
|
||||
options.chart.type = 'area'
|
||||
options.chart.resetZoomButton= {
|
||||
position: {
|
||||
align: 'left',
|
||||
verticalAlign: 'bottom',
|
||||
x: 20,
|
||||
y: -50,
|
||||
},
|
||||
relativeTo: 'chart'
|
||||
}
|
||||
options.tooltip.formatter = function () {
|
||||
let y = Math.round(this.y * 100) / 100
|
||||
return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
|
||||
DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH:mm:ss") + '<br />' +
|
||||
'<span style="color: ' + this.point.color + '">● </span>' +
|
||||
this.series.name + ': <b>' + y + '</b></div>'
|
||||
}
|
||||
|
||||
|
||||
let noDataTafel = '<div class="errTafel">' +
|
||||
'Für heute liegen leider keine Daten vor!<br /> Bitte den Sensor überprüfen!\' <br />' +
|
||||
'</div>'
|
||||
|
||||
|
||||
let navy = 20
|
||||
let navbreit = 55
|
||||
let navtxt = ['-24h', '-12h', 'live', '+12h', '+24h']
|
||||
let navtime = [-24, -12, 0, 12, 24]
|
||||
|
||||
let chr = Highcharts.chart('dlive', options, function (chart) {
|
||||
utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('dlive').offsetWidth)
|
||||
// let breit = $(window).width()
|
||||
// let navx = breit-350
|
||||
// chart.renderer.label(
|
||||
// infoTafel,
|
||||
// breit - 250,
|
||||
// 78, 'rect', 0, 0, true)
|
||||
// .css({
|
||||
// fontSize: '10pt',
|
||||
// color: 'green'
|
||||
// })
|
||||
// .attr({
|
||||
// zIndex: 5,
|
||||
// }).add()
|
||||
// for (let i = 0; i < navtxt.length; i++) {
|
||||
// renderPfeil(i, chart, navx + (i * navbreit), navy, navtxt[i], navtime[i])
|
||||
// }
|
||||
if (txtMeldung == true) {
|
||||
let labeText = ''
|
||||
let errtext = chart.renderer.label(
|
||||
noDataTafel,
|
||||
250,
|
||||
120, 'rect', 0, 0, true)
|
||||
.css({
|
||||
fontSize: '18pt',
|
||||
color: 'red'
|
||||
})
|
||||
.attr({
|
||||
zIndex: 1000,
|
||||
stroke: 'black',
|
||||
'stroke-width': 2,
|
||||
fill: 'white',
|
||||
padding: 10,
|
||||
}).add()
|
||||
}
|
||||
let chr = Highcharts.chart('dlive', erg.options, function (chart) {
|
||||
utils.addSensorID2chart(chart, {sid: erg.params.sensorid, indoor: erg.params.indoor}, document.getElementById('dlive').offsetWidth)
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
let butOpts = [
|
||||
{fill: 'lightblue', r: 2},
|
||||
{fill: 'blue', r: 2, style: {color: 'white'}},
|
||||
@@ -271,4 +65,4 @@ function prevHour(hours) {
|
||||
}
|
||||
doPlot('live', startDay)
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@@ -3,12 +3,14 @@
|
||||
|
||||
import * as map from './map.js'
|
||||
import * as dt from './datetime.js'
|
||||
import {logit} from './logit.js'
|
||||
import {logerror, logit} from './logit.js'
|
||||
import * as chart_live from './chart_live.js'
|
||||
import * as chart_houravg from './chart_houravg.js'
|
||||
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'
|
||||
|
||||
(async () => {
|
||||
|
||||
@@ -32,22 +34,30 @@ import * as chart_lden from './chart_lden.js'
|
||||
}
|
||||
// END global variables
|
||||
|
||||
// table to distribute the different charts
|
||||
const tabtable = [
|
||||
{id: 'kartentab', func: map.showMap},
|
||||
{id: 'livetab', func: chart_live.showLive},
|
||||
{id: 'houravgtab', func: chart_houravg.showHouravg},
|
||||
{id: 'dayavgtab', func: chart_dayavg.showDayavg},
|
||||
{id: 'daynighttab', func: chart_daynight.showDaynight},
|
||||
{id: 'ldentab', func: chart_lden.showLden},
|
||||
{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 = () => {
|
||||
document.querySelector('#navi').style.display = 'none'
|
||||
}
|
||||
|
||||
// show thw tabs again
|
||||
const showTabs = () => {
|
||||
document.querySelector('#navi').style.display = 'block'
|
||||
}
|
||||
|
||||
// main function:
|
||||
// show the map if calle w/o any parameter
|
||||
// if called with a sensor-ID, show the live chart for this sensor
|
||||
async function main() {
|
||||
// initialise tabs
|
||||
let triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
|
||||
@@ -59,29 +69,13 @@ import * as chart_lden from './chart_lden.js'
|
||||
tabTrigger.show()
|
||||
for(let x of tabtable) {
|
||||
if (x.id === event.currentTarget.id) {
|
||||
x.func(params)
|
||||
x.func(params, x.type, x.container)
|
||||
}
|
||||
}
|
||||
logit(`tab chaned to ${event.currentTarget.id}`)
|
||||
})
|
||||
})
|
||||
|
||||
// var triggerEl = document.querySelector('#tablist a[href="#profile"]')
|
||||
// bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
|
||||
//
|
||||
// var triggerFirstTabEl = document.querySelector('#tablist li:first-child a')
|
||||
// bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
|
||||
|
||||
|
||||
// let nl = document.querySelectorAll('.nav-link')
|
||||
// for (let x of nl) {
|
||||
// x.addEventListener('click', (event) => {
|
||||
// event.preventDefault()
|
||||
// console.log(event)
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
dt.showDate(true)
|
||||
// and show date/time every minute
|
||||
setInterval(() => dt.showDate(false), 1000)
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
// all function related to the map
|
||||
|
||||
import * as dt from './datetime.js'
|
||||
import * as chart_live from "./chart_live.js";
|
||||
import * as utils from "./chart_utilities.js";
|
||||
import * as chart_live from "./chart_live.js"
|
||||
import * as utils from "./chart_utilities.js"
|
||||
import { showChart } from './showcharts.js'
|
||||
|
||||
let map = null
|
||||
let bounds
|
||||
@@ -52,7 +53,7 @@ export const showMap = async (params) => {
|
||||
params.sid = clickedSensor
|
||||
let triggerEl = document.querySelector('#livetab')
|
||||
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
|
||||
await chart_live.showLive(params)
|
||||
await showChart(params, 'live', 'dlive')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import {logerror} from "./logit.js";
|
||||
import * as utils from "./chart_utilities.js";
|
||||
|
||||
export async function showChart(params, typ, container) {
|
||||
const url = `/chart/getsensordata?&sensorid=${params.sid}&data=${typ}`
|
||||
let ret = await fetch(url)
|
||||
.catch(e => {
|
||||
logerror(e)
|
||||
});
|
||||
let erg = await ret.json()
|
||||
|
||||
let chr = Highcharts.chart(container, erg.options, function (chart) {
|
||||
utils.addSensorID2chart(chart, {sid: erg.params.sensorid, indoor: erg.params.indoor}, document.getElementById(container).offsetWidth)
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user