admin/noise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rxf
2023-03-31 17:38:55 +02:00
parent 1cdf03b064
commit a1c1c93bc4
7 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/global.js
+1 -11
View File
@@ -10,7 +10,7 @@ import * as chart_dayavg from './chart_dayavg.js'
import * as chart_daynight from './chart_daynight.js'
import * as chart_lden from './chart_lden.js'
import * as utils from "./chart_utilities.js";
import {showChart} from './showcharts.js'
import {tabtable} from './showcharts.js'
(async () => {
@@ -34,16 +34,6 @@ import {showChart} from './showcharts.js'
}
// END global variables
// table to distribute the different charts
const tabtable = [
{id: 'kartentab', type: 'map', container: 'map', func: map.showMap},
{id: 'livetab', type: 'live', container: 'dlive', func: showChart},
{id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart},
{id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart},
{id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart},
{id: 'ldentab', type: 'lden', container: 'dlden', func: showChart},
]
// remove the taps (if shownig the map)
const removeTabs = () => {
public/javascripts/map.js
+1 -1
View File
@@ -13,7 +13,7 @@ let clickedSensor = 0
const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
const dba = [100, 80, 60, 40, 20, 0, -999];
export const showMap = async (params) => {
export async function showMap(params) {
if (map) return
map = L.map('map',{ scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
public/javascripts/showcharts.js
+61 -1
View File
@@ -1,15 +1,75 @@
import {logerror} from "./logit.js";
import * as utils from "./chart_utilities.js";
import { DateTime } from './luxon.min.js'
import * as map from "./map.js";
// table to distribute the different charts
export const tabtable = [
{id: 'kartentab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
{id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 100, dformat: "dd.LL - HH:mm:ss"},
{id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 10, dformat: "dd.LL - HH'h'"},
{id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 10, dformat: "dd.LL"},
{id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart, div: 10, dformat: "dd.LL"},
{id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 10, dformat: "dd.LL"},
]
export async function showChart(params, typ, container) {
const url = `/chart/getsensordata?&sensorid=${params.sid}&data=${typ}`
function form() {
for(let item of tabtable) {
if (item.type === typ) {
const d = DateTime.fromMillis(this.x, {zone: 'utc'})
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')}`
}
let y = Math.round(this.y * item.div) / item.div
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>' + y + '</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);
}
}
const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}`
let ret = await fetch(url)
.catch(e => {
logerror(e)
});
let erg = await ret.json()
erg.options.xAxis.labels.formatter = xformat
erg.options.tooltip.formatter = form
let chr = Highcharts.chart(container, erg.options, function (chart) {
utils.addSensorID2chart(chart, {sid: erg.params.sensorid, indoor: erg.params.indoor}, document.getElementById(container).offsetWidth)
})
if((typ === 'havg') || (typ === 'davg')) {
erg.options2.tooltip.formatter = form
erg.options2.xAxis.labels.formatter = xformat
let ch1 = Highcharts.chart(typ === 'havg' ? 'dpeak1' : 'dpeak2', erg.options2)
}
}