275 lines
7.7 KiB
JavaScript
275 lines
7.7 KiB
JavaScript
// Show the live data chart
|
|
import {logit, logerror} from './logit.js'
|
|
import * as utils from './chart_utilities.js'
|
|
import {DateTime} from "./luxon.min.js";
|
|
|
|
// ******************************************************************
|
|
// PlotDayLive_Noise
|
|
// ******************************************************************
|
|
|
|
|
|
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}`
|
|
let ret = await fetch(url)
|
|
.catch(e => {
|
|
logerror(e)
|
|
});
|
|
let data = 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 butOpts = [
|
|
{fill: 'lightblue', r: 2},
|
|
{fill: 'blue', r: 2, style: {color: 'white'}},
|
|
{fill: 'lightblue', r: 2},
|
|
{fill: 'lightblue', r: 2}
|
|
]
|
|
|
|
|
|
function renderPfeil(n, chart, x, y, txt, time) {
|
|
chart.renderer.button(txt, x, y, null, butOpts[0], butOpts[1], butOpts[2], butOpts[3])
|
|
.attr({
|
|
id: 'button' + n,
|
|
zIndex: 3,
|
|
width: 30,
|
|
})
|
|
.on('click', function () {
|
|
prevHour(time)
|
|
})
|
|
.add()
|
|
}
|
|
|
|
function prevHour(hours) {
|
|
console.log("Zurück um ", hours, "Stunden")
|
|
let start
|
|
if (startDay == "") {
|
|
start = moment()
|
|
start.subtract(24, 'h')
|
|
} else {
|
|
start = moment(startDay)
|
|
}
|
|
let mrk = moment()
|
|
mrk.subtract(24, 'h')
|
|
let startDay = ""
|
|
if (hours < 0) {
|
|
start.subtract(Math.abs(hours), 'h')
|
|
startDay = start.format("YYYY-MM-DDTHH:mm:ssZ")
|
|
} else if (hours > 0) {
|
|
start.add(hours, 'h')
|
|
if (!start.isAfter(mrk)) {
|
|
startDay = start.format("YYYY-MM-DDTHH:mm:ssZ")
|
|
}
|
|
}
|
|
doPlot('live', startDay)
|
|
}
|
|
|