Live Chart woks

2023-03-20 20:01:26 +01:00
parent 586b2641e2
commit be8d364116
10 changed files with 663 additions and 93 deletions
@@ -0,0 +1,194 @@
+// 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();
+}