diff --git a/app.js b/app.js index dfb3d5f..aff6cc2 100644 --- a/app.js +++ b/app.js @@ -13,10 +13,6 @@ const __dirname = path.dirname(__filename); import indexRouter from './routes/index.js' import apiRouter from './routes/api.js' -import chartRouter from './routes/api.js' - -// import getdataRouter from './routes/getdata.js' -// import putdataRouter from './routes/putdata.js' // view engine setup app.set('views', path.join(__dirname, 'views')); @@ -30,7 +26,6 @@ app.use(express.static(path.join(__dirname, 'public'))); app.use('/api', apiRouter) app.use('/', indexRouter); -app.use('/chart', chartRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { diff --git a/charts/preparecharts.js b/charts/preparecharts.js new file mode 100644 index 0000000..c6b7658 --- /dev/null +++ b/charts/preparecharts.js @@ -0,0 +1,546 @@ +// Prepare all data to plot the charts +import * as utils from '../charts/utilities.js' + +/********************************************** + * Live-Data + * * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params}} + * + ***********************************************/ +export const liveData = (params, values) => { + let series1 = [] + let series2 = [] + let series3 = [] + let infoTafel + + // save the current (actual) values here + let aktVal = {} + + + // Put values into the arrays + let cnt = 0 + 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 (values.length != 0) { + const lastidx = values.length - 1 + // Aktuelle Werte speichern + aktVal['LAeq'] = values[lastidx].noise_LAeq + aktVal['LAMax'] = values[lastidx].noise_LA_max + aktVal['LAMin'] = values[lastidx].noise_LA_min + + // InfoTafel füllen + infoTafel = + '' + + '' + + '' + + '' + infoTafel += + '' + + '' + infoTafel += + '' + + '' + infoTafel += + '
Aktuelle Werte
LAeq' + (aktVal.LAeq).toFixed(1) + 'dbA
LAmin' + (aktVal.LAMin).toFixed(0) + 'dbA
LAmax' + (aktVal.LAMax).toFixed(0) + 'dbA
' + + '' + } + 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 levels last 24 hours' + options.subtitle.useHTML = true + options.subtitle.text = '2.5min log. average values
 ' + 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 '
' + + // DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH:mm:ss") + '
' + + // '● ' + + // this.series.name + ':  ' + y + '
' + // } + + + let noDataTafel = '
' + + 'Für heute liegen leider keine Daten vor!
Bitte den Sensor überprüfen!\'
' + + '
' + + + let navy = 20 + let navbreit = 55 + let navtxt = ['-24h', '-12h', 'live', '+12h', '+24h'] + let navtime = [-24, -12, 0, 12, 24] + + return { options: options, params: params, info: {class: 'infoTafel', text:infoTafel}} +} + + +/******************************************** + * havg - Data + * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params, options2: any}} + * + ********************************************/ +export const havgData = (params, values) => { + let series1 = [] + let series2 = [] + // Put values into the serieses + let cnt = 0 + values.forEach((x) => { + if (x.n_AVG != -1) { + let dat = new Date(x.datetime).getTime() // retrieve the date + series1.push([dat, x.n_AVG]) + series2.push([dat, x.peakcount]) + } + }) + + // Plot-Options + let options = utils.createGlobObtions() + options.xAxis.tickInterval = 6 * 3600 * 1000 +// options.xAxis.plotBands = utils.calcWeekends(data, true) + options.xAxis.minTickInterval = 3600 * 1000 + + options.yAxis = [ + { + title: { + text: 'dbA', + useHTML: true, + }, + min: utils.noise_ymin, + tickAmount: 10, + gridLineColor: 'lightgray' + }, { + title: { + text: 'Counts', + useHTML: true, + }, + tickAmount: 10, + allowDecimals: false, + gridLineColor: 'lightgray', + opposite: true + } + ] + options.series = [ + { + name: 'Mean value LAeq', + data: series1, + color: utils.colors.eq, + type: 'column', + zIndex: 2, + yAxis: 0 + }, { + name: 'Peaks', + data: series2, + color: utils.colors.peaks, + type: 'column', + yAxis: 1, + zIndex: 2 + } + ] + // options.plotOptions.column = { + // pointWidth: 8, + // groupPadding: 0.5 + // } + options.plotOptions.column = { + pointWidth: 8, + groupPadding: 0.1 + } + + options.title.text = 'Hourly mean values / Peaks over ' + params.peak + ' dbA' + options.subtitle.text = 'Hourly mean values of LAeq for each full hour / Number of peaks per hour' + options.subtitle.useHTML = true + options.chart.zoomType = 'x' + options.chart.resetZoomButton= { + position: { + align: 'left', + x: 20, + y: 300, + }, + relativeTo: 'chart' + } + + return { options: options, params: params} + +} + +/******************************************** + * davg - Data + * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params, options2: any}} + * + ********************************************/ + +export const davgData = (params, values) => { + let series1 = [] + let series2 = [] + + // Put values into the serieses + let cnt = 0 + values.forEach((x) => { + if (x.n_AVG != -1) { + let dat = new Date(x.datetime).getTime() // retrieve the date + series1.push([dat, x.n_AVG]) + series2.push([dat, x.peakcount]) + } + }) + // Plot-Options + let options = utils.createGlobObtions() + // options.xAxis.plotBands = utils.calcWeekends(values, true) + options.xAxis.tickInterval = 24 * 3600 * 1000 + options.xAxis.title.text = 'Date' + // options.xAxis.labels = { + // formatter: function () { + // return this.axis.defaultLabelFormatter.call(this); + // } + // } + + options.chart.type = 'column' + + options.yAxis = [ + { + title: { + text: 'dbA', + useHTML: true, + }, + min: utils.noise_ymin, + tickAmount: 10, + gridLineColor: 'lightgray', + }, { + title: { + text: 'Counts', + useHTML: true, + }, + tickAmount: 10, + allowDecimals: false, + gridLineColor: 'lightgray', + opposite: true + } + ] + + options.series = [ + { + name: 'Mean value LAeq', + data: series1, + color: utils.colors.eq, + type: 'column', + zIndex: 2, + yAxis: 0 + },{ + name: 'Peaks', + data: series2, + color: utils.colors.peaks, + type: 'column', + yAxis: 1, + zIndex: 2, + } + ] + options.plotOptions.column = { + pointWidth: 20, + groupPadding: 0.1 + } + options.title.text = 'Daily mean values / Peaks over ' + params.peak + ' dbA' + options.subtitle.text = 'Daily mean values of LAeq for each full day / Number of peaks per day' + options.subtitle.useHTML = true + options.chart.zoomType = 'x' + options.chart.resetZoomButton = { + position: { + align: 'left', +// verticalAlign: 'bottom', + x: 20, + y: 300, + }, + relativeTo: 'chart' + } + + return {options: options, params: params} + +} + +/******************************************** + * dayNight - Data + * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params}} + * + ********************************************/ +export const dayNightData = (params, values) => { + + let series1 = [] + let series2 = [] + // Put values into the serieses + let cnt = 0 + values.forEach((x) => { + if (x.n_dayAVG > 0) { + let dat = new Date(x.datetime).getTime() // retrieve the date + series1.push([dat, x.n_dayAVG]) + series2.push([dat, x.n_nightAVG]) + } + }) + // Plot-Options + let options = utils.createGlobObtions() +// options.xAxis.plotBands = utils.calcWeekends(data, true) + options.xAxis.tickInterval = 24 * 3600 * 1000 + options.xAxis.title.text = 'Date' + // options.xAxis.labels = { + // formatter: function () { + // return this.axis.defaultLabelFormatter.call(this); + // } + // } + + options.chart.type = 'column' + options.yAxis = { + title: { + text: 'dbA', + useHTML: true, + }, + min: utils.noise_ymin, + tickAmount: 10, + gridLineColor: 'lightgray', + } + options.series = [ + { + name: 'Day', + data: series1, + color: utils.colors.eq, + type: 'column', + zIndex: 2, + }, + { + name: 'Night', + data: series2, + color: utils.colors.max, + type: 'column', + zIndex: 2, + }, + ] + options.plotOptions.series = { + animation: false + } + options.plotOptions.column = { + pointWidth: 20, + groupPadding: 0.3 + } + options.title.text = 'Average values during the day and night hours' + options.subtitle.text = 'Daily mean values of LAeq from 6h00 to 22h00
Nightly mean values of LAeq from 22h00 to 6h00' + options.subtitle.useHTML = true + options.chart.zoomType = 'x' + options.chart.resetZoomButton = { + position: { + align: 'left', +// verticalAlign: 'bottom', + x: 20, + y: 300, + }, + relativeTo: 'chart' + } + return {options: options, params: params} +} + +/*********************************** + Lden - Data + * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params}} + **********************************/ +export const ldenData = (params, values) => { + + let series1 = [] + + // Put values into the series + let cnt = 0 + values.forEach((x) => { + if (!((x.lden === -1) || (x.datetime === undefined))) { + let dat = new Date(x.datetime).getTime() // retrieve the date + series1.push([dat, x.lden]) + } + }) + // Plot-Options + let options = utils.createGlobObtions() + +// options.xAxis.plotBands = utils.calcWeekends(data, true) + options.xAxis.tickInterval = 24 * 3600 * 1000 + options.xAxis.title = 'Date' + options.xAxis.labels = { + formatter: function () { + let lbl = this.axis.defaultLabelFormatter.call(this); + this.value += 86400000; + let lbl1 = this.axis.defaultLabelFormatter.call(this); + return parseInt(lbl) + '/' + lbl1; + } + } + options.chart.type = 'column' + options.yAxis = { + title: { + text: 'dbA', + useHTML: true, + }, + min: utils.noise_ymin, + tickAmount: 10, + gridLineColor: 'lightgray', + } + options.series = [ + { + name: 'lden', + data: series1, + color: utils.colors.eq, + type: 'column', + zIndex: 2, + } + ] + options.plotOptions.series = { + animation: false + } + options.plotOptions.column = { + pointWidth: 20, + groupPadding: 0.1 + } + options.title.text = 'LDEN-Index' + options.subtitle.text = 'Daily mean values of LDEN\-Index' + options.subtitle.useHTML = true + options.chart.zoomType = 'x' + options.chart.resetZoomButton = { + position: { + align: 'left', +// verticalAlign: 'bottom', + x: 20, + y: 300, + }, + relativeTo: 'chart' + } + /* options.tooltip.formatter = function () { + let d = DateTime.fromMillis(this.x, {zone: 'utc'}) + let d1 = d.plus({days: 1}) + let txt = d.toFormat('dd') + '/' + d1.toFormat('dd.LL') + return '
' + + '  ' + txt + '
' + + '● ' + + this.series.name + ':  ' + + Highcharts.numberFormat(this.y, 1) + + '
'; + } + + */ + return {options: options, params: params} +} + +/*********************************** + Map - Data + * + * @param params + * @param values + * @returns {{options: {plotOptions: {series: {marker: {enabled: boolean}, turboThreshold: number, animation: boolean}}, xAxis: {gridLineWidth: number, type: string, title: {text: string}, labels: {formatter: function(): (string|*)}}, legend: {layout: string, borderWidth: number, align: string, enabled: boolean}, subtitle: {align: string}, tooltip: {backgroundColor: number, valueDecimals: number, borderRadius: number, useHTML: boolean, borderWidth: number}, title: {useHTML: boolean, style: {fontSize: string}, align: string}, chart: {backgroundColor: {linearGradient: number[], stops: [[number,string],[number,string]]}, spacingTop: number, borderWidth: string, spacingLeft: number, type: string, spacingRight: number, events: {selection: function(*): void}, height: number}}, params}} + **********************************/ +export const mapData = (params, values) => { + return {...params, values: values} +} + diff --git a/charts/utilities.js b/charts/utilities.js new file mode 100644 index 0000000..df39af1 --- /dev/null +++ b/charts/utilities.js @@ -0,0 +1,139 @@ +// Utility routine for plotting the data + +export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'}; +export const noise_ymin = 30; + +export function createGlobObtions() { + // Options, die für alle Plots identisch sind + let globObject = { + chart: { + spacingRight: 20, + spacingLeft: 20, + spacingTop: 25, + backgroundColor: { + linearGradient: [0, 400, 0, 0], + stops: [ + [0, '#eee'],//[0, '#ACD0AA'], //[0, '#A18D99'], // [0, '#886A8B'], // [0, '#F2D0B5'], + [1, '#fff'] + ] + }, + type: 'line', + borderWidth: '2', + // events: { + // selection: function (event) { + // if (event.xAxis) { + // doUpdate = false; + // } else { + // doUpdate = true; + // } + // } + // } + }, + title: { + align: 'left', + style: {'fontSize': '25px'}, + useHTML: true, + }, + subtitle: { + align: 'left', + }, + tooltip: { + valueDecimals: 1, + backgroundColor: '#ffffff', + borderWidth: 0, + borderRadius: 0, + useHTML: true, + }, + xAxis: { + type: 'datetime', + title: { + text: 'date/time', + }, + gridLineWidth: 2, + labels: { + formatter: function () { + let v = this.axis.defaultLabelFormatter.call(this); + if (v.indexOf(':') == -1) { + return '' + v + ''; + } else { + return v; + } + } + }, + }, + legend: { + enabled: true, + layout: 'horizontal', +// verticalAlign: 'top', + borderWidth: 1, + align: 'center', + }, + plotOptions: { + series: { + animation: false, + turboThreshold: 0, + marker: { + enabled: false, + }, + }, + } + }; + return globObject; +} + +export function calcWeekends(data, isyear) { +/* let weekend = []; + let oldDay = 8; + for (let i = 0; i < data.length; i++) { + let mom = moment(data[i].date); + if (isyear) { + mom = moment(data[i]._id) + } + let day = mom.day(); + let st = mom.startOf('day'); + if (day != oldDay) { + if (day == 6) { + weekend.push({ + color: 'rgba(169,235,158,0.4)', + from: st.valueOf(), + to: st.add(1, 'days').valueOf(), + zIndex: 0 + }) + } else if (day == 0) { + weekend.push({ + color: 'rgba(169,235,158,0.4)', + from: st.valueOf(), + to: st.add(1, 'days').valueOf(), + zIndex: 0 + }) + } + oldDay = day; + } + } + return weekend; +*/} + +export function calcDays(data, isyear) { + let days = []; + if (data.length == 0) { + return days + } + let oldday = moment(data[0].date).day(); + if (isyear) { + oldday = moment(data[0]._id).day(); + } + for (let i = 0; i < data.length; i++) { + let m = moment(data[i].date); + if (isyear) { + m = moment(data[i]._id); + } + let tag = m.day() + if (tag != oldday) { + m.startOf('day'); + days.push({color: 'lightgray', value: m.valueOf(), width: 1, zIndex: 2}); + oldday = tag; + } + } + return days; +}; + diff --git a/public/javascripts/map.js b/public/javascripts/map.js index dc27f72..8d7f26e 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -165,7 +165,7 @@ export async function buildMarkers() { west: bounds.getWest(), south: bounds.getSouth(), east: bounds.getEast(), north: bounds.getNorth() } - const url = `/chart/getmapdata?type=noise&box=${bounds.toBBoxString()}` + const url = `/api/getmapdata?type=noise&box=${bounds.toBBoxString()}` let ret = await fetch(url) .catch(e => { @@ -265,7 +265,7 @@ async function setCenter(adr) { // Show the last date below tha map grafics async function showLastDate(ld) { - const url = `/chart/getmapdata?type=noise` + const url = `/api/getmapdata?type=noise` let ret = await fetch(url) .catch(e => { console.log(e) diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js index c1030d4..c5f0499 100644 --- a/public/javascripts/showcharts.js +++ b/public/javascripts/showcharts.js @@ -56,7 +56,7 @@ export async function showChart(params, typ, container) { } } - const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}&span=${params.span}&datetime=${params.datetime.slice(0,-10)}&peak=${params.peak}` + const url = `/api/getsensordata?sensorid=${params.sid}&data=${typ}&span=${params.span}&datetime=${params.datetime.slice(0,-10)}&peak=${params.peak}` let ret = await fetch(url) .catch(e => { logerror(e) diff --git a/routes/api.js b/routes/api.js index 4c8895a..ff7c174 100644 --- a/routes/api.js +++ b/routes/api.js @@ -1,10 +1,20 @@ import express from 'express' import pkg from '../package.json' assert { type: "json" } import axios from 'axios' +import * as prep from '../charts/preparecharts.js' const router = express.Router() const { name, version, date } = pkg +const disttable = [ + {type: 'live', func: prep.liveData }, + {type: 'havg', func: prep.havgData }, + {type: 'davg', func: prep.davgData }, + {type: 'daynight', func: prep.dayNightData }, + {type: 'lden', func: prep.ldenData }, + {type: 'map', func: prep.mapData }, +] + let APIHOST = process.env.APIHOST || 'http://localhost:3004' /* GET home page. */ @@ -22,7 +32,14 @@ router.get('/:cmd', async function(req, res, next) { if (response.status !== 200) { res.json({err: `Error from servercall: status = ${response.status}`}) } - res.json(response.data) + const options = response.data.options + for(let x of disttable) { + if (x.type === options.data) { + let ret = x.func(options, response.data.values) + res.json(ret) + break; + } + } } catch (e) { res.json({err: `Error from servercall: ${e}`}) } diff --git a/routes/users.js b/routes/users.js deleted file mode 100644 index 623e430..0000000 --- a/routes/users.js +++ /dev/null @@ -1,9 +0,0 @@ -var express = require('express'); -var router = express.Router(); - -/* GET users listing. */ -router.get('/', function(req, res, next) { - res.send('respond with a resource'); -}); - -module.exports = router;