noise/public/javascripts/chart_daynight.js

// Sh0w the hour average chart
import {logit, logerror} from './logit.js'
import * as utils from './chart_utilities.js'
import {DateTime, Duration} from "./luxon.min.js"

// ******************************************************************
// PlotDayNightAVG_Noise
// ******************************************************************


export const showDaynight = async (params) => {
    await PlotDayNight_Noise(params.sid)
}


const PlotDayNight_Noise = async function (sid) {

    let series1 = []
    let series2 = []

    // read the data from the server
    const url = `${utils.url}/getsensordata?sensorid=${sid}&data=daynight`
    let ret = await fetch(url)
        .catch(e => {
            logerror(e)
        })
    let data = await ret.json()

    if(!data.err) {
    // Put values into the serieses
    let cnt = 0
    data.values.forEach((x) => {
        if(x.n_AVG != -1) {
            let dat = new Date(x.datetime).getTime()	// retrieve the date
            series1.push([dat, x.n_dayAVG])
            series2.push([dat, x.n_nightAVG])
        }
    })
    } else {
        utils.showError(data.err)
    }
    let dlt = DateTime.now()	// retrieve the date
    dlt = dlt.minus({day:30})

    // 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 () {
            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 = 'Noise Average values during the day and night hours'
    options.subtitle.text =  'Daily mean values of LAeq from 6h00 to 22h00 <br /> 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'
    }
    options.tooltip.formatter = function () {
        let n = this.series.name.startsWith('Night')
        let d = DateTime.fromMillis(this.x, {zone: 'utc'})
        let d1 = d.plus({days: 1})
        let txt = n ? d.toFormat('dd') + '/' + d1.toFormat('dd.LL') :
            d.toFormat('dd.LL')
        return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
            '&nbsp;&nbsp;' + txt + '<br />' +
            '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
            this.series.name + ':&nbsp; <b>' +
            Highcharts.numberFormat(this.y, 1) +
            '</b></div>';
    }

/*
    formatter =  function () {
        let y = Math.round(this.y * 10) / 10
        return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
            DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL") + '<br />' +
            '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
            this.series.name + ':&nbsp; <b>' + y + '</b></div>'
    }
*/

    // Do PLOT 1
    let ch = Highcharts.chart('ddaynight', options, function (chart) {
        utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('ddaynight').offsetWidth)
    })
/*
    // Do PLOT 2
    options.series[0] = {
        name: 'Peaks',
        data: series2,
        color: utils.colors.peaks,
        type: 'column'
    }
    options.title.text = 'Peaks more than ' + data.peak + ' dbA'
    options.subtitle.text = 'Number of exceedances per hour <br />&nbsp'
    options.yAxis = {
        title: {
            text: 'Counts',
            useHTML: true,
        },
        tickAmount: 10,
        allowDecimals: false,
        gridLineColor: 'lightgray',
    }
    options.tooltip.formatter =  function () {
        let y = Math.round(this.y)
        return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
            DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH'h'") + '<br />' +
            '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
            this.series.name + ':&nbsp; <b>' + y + '</b></div>'
    }

    let ch1 = Highcharts.chart('dpeak', options)
*/
}