noise/public/javascripts/chart_utilities.js

// Utility routine for plotting the data

import {DateTime} from './luxon.min.js'
export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'};

// Defaults für die Mittelwertbildungen
const refreshRate = 5;                  // Grafik so oft auffrischen (in Minuten)
let txtMeldung = false;					// falls keine Daten da sind, Text melden
const avgTime = 30;						// defaul average time für particulate matter
let doUpdate = true;					// update every 5 min
let optSidsArray = [];                  // Arrray der letzten 5 Einträge
let nbrofdaysforavg = 8;                // Stundenmittel Anzahl Tagte (default = 5)
let nbrofdaysfordaynight = 30;          // use 30 days or day/night graphic
let stucols = 1;                        // Anzeige nur Balken (StundenMittel)


export function createGlobObtions() {
    var globObject = {};

    // Options, die für alle Plots identisch sind
    globObject = {
        chart: {
            height: 600,
//            width: 1000;
            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: {
//				text: 'Feinstaub über 1 Tag',
            align: 'left',
            style: {'fontSize': '25px'},
            useHTML: true,
        },
        subtitle: {
            text: 'Gemessene Werte und ' + avgTime + 'min-gleitende Mittelwerte',
            align: 'left',
        },
        tooltip: {
            valueDecimals: 1,
            backgroundColor: 0,
            borderWidth: 0,
            borderRadius: 0,
            useHTML: true,
            formatter: function () {
                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 + '">&#9679;&nbsp;</span>' +
                    this.series.name + ':&nbsp; <b>' +
                    Highcharts.numberFormat(this.y, 1) +
                    '</b></div>';
            }
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: 'date/time',
            },
            gridLineWidth: 2,
            labels: {
                formatter: function () {
                    let v = this.axis.defaultLabelFormatter.call(this);
                    if (v.indexOf(':') == -1) {
                        return '<span style="font-weight:bold;color:red">' + v + '<span>';
                    } 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;
}

function calcWeekends(data, isyear) {
    var weekend = [];
    var oldDay = 8;
    for (var i = 0; i < data.length; i++) {
        var mom = moment(data[i].date);
        if (isyear) {
            mom = moment(data[i]._id)
        }
        var day = mom.day();
        var 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;
}

function calcDays(data, isyear) {
    var days = [];
    if (data.length == 0) {
        return days
    }
    var oldday = moment(data[0].date).day();
    if (isyear) {
        oldday = moment(data[0]._id).day();
    }
    for (var i = 0; i < data.length; i++) {
        var m = moment(data[i].date);
        if (isyear) {
            m = moment(data[i]._id);
        }
        var tag = m.day()
        if (tag != oldday) {
            m.startOf('day');
            days.push({color: 'lightgray', value: m.valueOf(), width: 1, zIndex: 2});
            oldday = tag;
        }
    }
    return days;
};

function getIndoor(sensor) {
    let p = new Promise(function (resolve, reject) {
        let url = '/api/getdata?data=props&sensorid=' + sensor;
        $.get(url, (data, err) => {
            if (err != 'success') {
                resolve(false)
            } else {
                resolve(data.values[0].indoor == 1)
            }
        })
    })
    return p
}

export async function addSensorID2chart(chart, props, width) {
    console.log('widht: ',width);
    let indoor = props.location[0].indoor
    console.log('indoor: ',indoor)
    let sens = chart.renderer.label(
        `Sensor: ${props._id} ${indoor ? ' (indoor)' : ''}`,
        width / 2 - 100, 65,
        'text', 0, 0, true)
        .css({
            fontSize: '12pt',
            'font-weight': 'bold',
        })
        .attr({
            zIndex: 5,
        }).add();
}