noise/public/javascripts/showcharts.js

import * as utils from "./chart_utilities.js";
import { DateTime } from './luxon.min.js'
import * as map from "./map.js";
import {fetchfromserver, showError} from "./chart_utilities.js";
import * as spin from './spinner.js'

export const tabtable = [
    {id: 'maptab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
    {id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 2, dformat: "dd.LL - HH:mm:ss"},
    {id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 1, dformat: "dd.LL - HH'h'"},
    {id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 1, dformat: "dd.LL"},
    {id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart, div: 1, dformat: "dd.LL"},
    {id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 1, dformat: "dd.LL"},
]


export async function showChart(params, index) {
    let container = tabtable[index].container
    let typ = tabtable[index].type
    let id = tabtable[index].id
    function form() {
        for (let item of tabtable) {
            if (item.type === typ) {
                const d = DateTime.fromMillis(this.x)
                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')}`
                }
                if (this.series.name === 'Peaks') {
                    item.div = 0
                }
                return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
                    fmt + '<br />' +
                    '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
                    this.series.name + ':&nbsp; <b>' +
                    Highcharts.numberFormat(this.y, item.div) +
                    '</b></div>'
            }
        }
    }

    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 '<span style="font-weight:bold;color:red">' + v + '<span>';
            } else {
                return v;
            }
        } else {
            return this.axis.defaultLabelFormatter.call(this);
        }
    }
    let url = `/srv/getsensordata?sensorid=${params.sid}&data=${typ}&datetime=${params.datetime}`
    if (typ === 'live') {
        url += `&span=${params.span}`
    } else if ((typ === 'havg') || (typ === 'davg')) {
        url += `&peak=${params.peak}`
    }
    console.log(`fetch ${typ} from server ${url}`)

    let errdiv = document.querySelector(`#${id}err`)
    errdiv.innerHTML = ''

    let erg = await fetchfromserver(url)
    if(sysparams.category === 'noise') {
        utils.showTabs()
    }
    if (!erg.err) {
        erg.options.xAxis.labels.formatter = xformat
        erg.options.tooltip.formatter = form
        let chart = Highcharts.chart(container, erg.options, function (chart) {
            utils.addSensorID2chart(chart, {
                sid: erg.params.sid,
                indoor: erg.params.indoor
            }, document.getElementById(container).offsetWidth)
            if(erg.info) {
                let wbreit = window.innerWidth
                let cbreit = chart.chartWidth
                let infoposx = wbreit - ((wbreit-cbreit)/2) -200
                let infoposy = chart.plotTop - 80
                chart.renderer.label(
                    erg.info.text,
                    infoposx,
                    infoposy,
                    'rect', 0, 0, true)
                    .css({
                        fontSize: '10pt',
                        color: 'green'
                    })
                    .attr({
                        zIndex: 5,
                    }).add();
            }
        })
        return {error: false}
    } else {
        errdiv.innerHTML = erg.err
        return {error: true}
    }
}

export const loadAll = async (params, start = 2, curtab = '') => {
    console.log('now load all in Background')
    let messzeit = DateTime.now()
    if (start == 0) {
        map.showMap(params)
        start++
    }
    if (params.sid !== -1) {
        for (let i = start; i < tabtable.length; i++) {
            let err = await showChart(params, i)
            if(tabtable[i].id === curtab) {
                spin.spinner.stop()
                let errtxt = document.querySelector(`#${tabtable[i].id}err`).innerHTML
                if (errtxt !== '') {
                    showError(errtxt)
                }
            }
        }
        let dauer = DateTime.now().diff(messzeit,['seconds']).toObject().seconds
        console.log(`now all loaded. Zeitdauer: ${dauer}`)
    }
}

export const setNoUTC = () => {
    Highcharts.setOptions({
        time: {
            useUTC: false                                   // Don't use UTC on the charts
        },
        accessibility: {                                    // supress warning concerning accessability
            enabled: false
        }
    });
}