diff --git a/public/javascripts/chart_live.js b/public/javascripts/chart_live.js index bb1dcc8..2ae1595 100644 --- a/public/javascripts/chart_live.js +++ b/public/javascripts/chart_live.js @@ -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 = - '' + - '' + - '' + - '' - infoTafel += - '' + - '' - infoTafel += - '' + - '' - infoTafel += - '
Aktuelle Werte
LAeq' + (aktVal.LAeq).toFixed(1) + 'dbA
LAmin' + (aktVal.LAMin).toFixed(0) + 'dbA
LAmax' + (aktVal.LAMax).toFixed(0) + 'dbA
' + - '' - } - } 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
 ' - 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] - - 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) } - +*/ diff --git a/public/javascripts/global.js b/public/javascripts/global.js index c8c675f..9aa0c94 100644 --- a/public/javascripts/global.js +++ b/public/javascripts/global.js @@ -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) diff --git a/public/javascripts/map.js b/public/javascripts/map.js index 8270b1a..d812851 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -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') }) }) diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js new file mode 100644 index 0000000..6c256b0 --- /dev/null +++ b/public/javascripts/showcharts.js @@ -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) + }) +}