From a1c1c93bc40bd83c2a0f4ed68773d75eb1059171 Mon Sep 17 00:00:00 2001 From: rxf Date: Fri, 31 Mar 2023 17:38:55 +0200 Subject: [PATCH] *** WIP WIP *** All charts work (mostly) --- public/javascripts/global.js | 12 +------ public/javascripts/map.js | 2 +- public/javascripts/showcharts.js | 62 +++++++++++++++++++++++++++++++- public/stylesheets/style.css | 3 +- public/stylesheets/style.css.map | 2 +- public/stylesheets/style.sass | 4 +-- views/index.pug | 3 +- 7 files changed, 69 insertions(+), 19 deletions(-) diff --git a/public/javascripts/global.js b/public/javascripts/global.js index 9aa0c94..e575d7b 100644 --- a/public/javascripts/global.js +++ b/public/javascripts/global.js @@ -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 = () => { diff --git a/public/javascripts/map.js b/public/javascripts/map.js index d812851..f5e22b6 100644 --- a/public/javascripts/map.js +++ b/public/javascripts/map.js @@ -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', { diff --git a/public/javascripts/showcharts.js b/public/javascripts/showcharts.js index 6c256b0..f57818f 100644 --- a/public/javascripts/showcharts.js +++ b/public/javascripts/showcharts.js @@ -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 '
' + + fmt + '
' + + '● ' + + this.series.name + ':  ' + y + '
' + } + } + } + + 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 '' + v + ''; + } 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) + } } + + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index fa9a046..3c5cf58 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -154,9 +154,8 @@ footer #author #versn { margin-top: 44px; } -#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak { +#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak1, #dpeak2 { width: 100%; - height: 100%; margin: auto; } diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map index 1a6d5ea..eea3cff 100644 --- a/public/stylesheets/style.css.map +++ b/public/stylesheets/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EAEA;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"} \ No newline at end of file diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index 1416737..9e452bf 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -150,9 +150,9 @@ footer .tab-pane margin-top: 44px -#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak +#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak1, #dpeak2 width: 100% - height: 100% + // height: 100% margin: auto #dialogError diff --git a/views/index.pug b/views/index.pug index 16a3696..e5f0789 100644 --- a/views/index.pug +++ b/views/index.pug @@ -35,9 +35,10 @@ block content #dlive .tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab") #dhour - #dpeak + #dpeak1 .tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab") #dday + #dpeak2 .tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab") #ddaynight DayNightTAB .tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")