*** WIP WIP *** All charts work (mostly)

2023-03-31 17:38:26 +02:00
parent 126acfeb7f
commit aeeb660823
4 changed files with 333 additions and 58 deletions
@@ -1,6 +1,14 @@
 // Prepare all data to plot the charts
 import * as utils from '../utilities/chartoptions.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 = []
@@ -146,13 +154,14 @@ export const liveData = (params, values) => {
        },
        relativeTo: 'chart'
    }
-    options.tooltip.formatter =  function () {
-        let y = Math.round(this.y * 100) / 100
-        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>' + y + '</b></div>'
-    }
+
+        // options.tooltip.formatter =  function () {
+        //     let y = Math.round(this.y * 100) / 100
+        //     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>' + y + '</b></div>'
+        // }


    let noDataTafel = '<div class="errTafel">' +
@@ -169,7 +178,14 @@ export const liveData = (params, values) => {
 }


-
+/********************************************
+ * 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 = []
@@ -219,37 +235,23 @@ export const havgData = (params, values) => {
    options.chart.resetZoomButton=  {
        position: {
            align: 'left',
-//				verticalAlign: 'bottom',
            x: 20,
            y: 300,
        },
        relativeTo: 'chart'
    }
-    options.tooltip.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 - HH'h'") + '<br />' +
-            '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
-            this.series.name + ':&nbsp; <b>' + y + '</b></div>'
-    }

-    return { options: options, params: params}
-/*
-
-    // Do PLOT 1
-    let ch = Highcharts.chart('dhour', options, function (chart) {
-        utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('dhour').offsetWidth)
-    })
-    // Do PLOT 2
-    options.series[0] = {
+    // Calculate to plot peaks
+    let options2 = JSON.parse(JSON.stringify(options));
+    options2.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 = {
+    options2.title.text = 'Peaks more than ' + params.peak + ' dbA'
+    options2.subtitle.text = 'Number of exceedances per hour <br />&nbsp'
+    options2.yAxis = {
        title: {
            text: 'Counts',
            useHTML: true,
@@ -258,16 +260,273 @@ export const havgData = (params, values) => {
        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)
+    return { options: options, options2: options2, 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.chart.height = 350
+
+    options.yAxis = {
+        title: {
+            text: 'dbA',
+            useHTML: true,
+        },
+        min: utils.noise_ymin,
+        tickAmount: 10,
+        gridLineColor: 'lightgray',
+    }
+    options.series = [
+        {
+            name: 'Mean value LAeq',
+            data: series1,
+            color: utils.colors.eq,
+            type: 'column',
+            zIndex: 2,
+        },
+    ]
+    options.plotOptions.column = {
+        pointWidth: 20,
+        groupPadding: 0.1
+    }
+    options.title.text = 'Noise daily mean values'
+    options.subtitle.text = 'Daily mean values of LAeq for each full day <br />&nbsp'
+    options.subtitle.useHTML = true
+    options.chart.zoomType = 'x'
+    options.chart.resetZoomButton = {
+        position: {
+            align: 'left',
+//				verticalAlign: 'bottom',
+            x: 20,
+            y: 300,
+        },
+        relativeTo: 'chart'
+    }
+
+    // Calculate to plot peaks
+    let options2 = JSON.parse(JSON.stringify(options));
+    options2.series[0] = {
+        name: 'Peaks',
+        data: series2,
+        color: utils.colors.peaks,
+        type: 'column'
+    }
+    options2.title.text = 'Peaks more than ' + params.peak + ' dbA'
+    options2.subtitle.text = 'Number of exceedances per day <br />&nbsp'
+    options2.yAxis = {
+        title: {
+            text: 'Counts',
+            useHTML: true,
+        },
+        tickAmount: 10,
+        allowDecimals: false,
+        gridLineColor: 'lightgray',
+    }
+
+    return {options: options, options2: options2, 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 = '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'
+    }
+    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) {
+        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 = 'Noise L<sub>DEN</sub>-Index'
+    options.subtitle.text = 'Daily mean values of L<sub>DEN</sub>\-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 '<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>';
+    }
+
+ */
+    return {options: options, params: params}
 }

-*/
-}