X-Git-Url: https://git.toastfreeware.priv.at/chrisu/seepark.git/blobdiff_plain/bb26bfac1dc27f1710898654a496c812844ad8de..3c0da30b37d61aa8ebeb2672ef64b1ce68e97112:/web/static/seepark_web.js?ds=sidebyside diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js index 025aefa..47bd334 100644 --- a/web/static/seepark_web.js +++ b/web/static/seepark_web.js @@ -1,104 +1,203 @@ -var api_base_url = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3'; +var api_base_url_sensors = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3'; +var api_base_url_weather = '/api/1/openweathermap/city/3319578?mode=consolidated&format=c3'; -var chart = c3.generate({ - bindto: '#chart', - transition: { - duration: null - }, - title: { - text: 'Der See' - }, - data: { -// url: '/data/', // redirects to /data/1 - url: api_base_url + beginend(1), - mimeType: 'json', - xs: { - '0316a2193bff': '0316a2193bff_x', - '0316a21383ff': '0316a21383ff_x' +function dayschart(element, title, days, xtickformat) { + var chartdata; + if (element.substr(0, 7) == 'chart_w') { + chartdata = { + url: api_base_url_sensors + beginend(days), + mimeType: 'json', + xs: { + '0416a1ac66ff': '0416a1ac66ff_x', + '0516a207a4ff': '0516a207a4ff_x', + '0416a1bab9ff': '0416a1bab9ff_x', + '0316a2193bff': '0316a2193bff_x' + }, + names: { + '0416a1ac66ff': 'Wassertemperatur 30cm Tiefe', + '0516a207a4ff': 'Wassertemperatur 50cm Tiefe', + '0416a1bab9ff': 'Wassertemperatur 1m Tiefe', + '0316a2193bff': 'Wassertemperatur in 30 cm Tiefe' + }, + xFormat: '%Y-%m-%d %H:%M:%S', + // https://en.wikipedia.org/wiki/Web_colors + colors: { + '0416a1ac66ff': 'lightskyblue', + '0516a207a4ff': 'royalblue', + '0416a1bab9ff': 'mediumblue', + '0316a2193bff': 'midnightblue' + }, + /* + xSort: false, + order: function (a, b) { + // gets 2 x objects. seems to be a "sort function" for js's sort() + // -1: a before b etc. + // only handle cases that appear in the wild + // console.log("a.id", a.id, "b.id", b.id); + if (a.id == '0416a1ac66ff') {return -1}; + if (a.id == '0416a1bab9ff') {return 1}; + } + */ + }; + } else { + chartdata = { + url: api_base_url_weather + beginend(days), + mimeType: 'json', + xs: { + '3319578': '3319578_x' + }, + names: { + '3319578': 'Lufttemperatur in Obsteig' + }, + xFormat: '%Y-%m-%d %H:%M:%S', + colors: { + '3319578': 'red' + } + }; + }; + var chart = c3.generate({ + bindto: '#' + element, + size: { + width: getwidth(element) }, - names: { - '0316a2193bff': 'Wassertemperatur in 4 m Tiefe', - '0316a21383ff': 'Wassertemperatur in 5 m Tiefe' + onresized: function () { + chart.resize({ + width: getwidth(element) + }); + // chart.flush(); }, - xFormat: '%Y-%m-%d %H:%M:%S', - colors: { - '0316a2193bff': 'lightblue', - '0316a21383ff': 'darkblue' - } - }, - axis: { - x: { - type: 'timeseries', - tick: { - format: '%Y-%m-%d %H:%M', - fit: false, - multiline: true, // broken? so → - rotate: -90 - } + transition: { + duration: null }, - y: { - label: { - text: 'Temperatur in °C', - position: 'outer-middle' + title: { + text: title + }, + data: chartdata, + point: { + r: 1.5 // default 2.5 + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: function (d) { + var strftimeDE = strftime.localizeByIdentifier('de_DE'); + return strftimeDE(xtickformat, new Date(d)); + }, + fit: false, + multiline: true, // broken? so → + rotate: -90 + } }, - tick: { - format: function (d) { - return d + '°'; + y: { + label: { + text: 'Temperatur in °C', + position: 'outer-middle' + }, + tick: { + format: function (d) { + return d.toFixed(1) + '°'; + } } } - } - }, - zoom: { - enabled: true, - onzoomend: function (domain) { - // UNIX epoch - var start = domain[0].getTime()/1000; - var end = domain[1].getTime()/1000; - var duration = end - start; - // duration is now the diff of the "viewport in seconds" - // FIXME - var days = Math.round(duration / 86400 / 2); - if (days > 0) { - loaddays(days); + }, + zoom: { + enabled: true, + /* + onzoomend: function (domain) { + // UNIX epoch + var start = domain[0].getTime()/1000; + var end = domain[1].getTime()/1000; + var duration = end - start; + // duration is now the diff of the "viewport in seconds" + // FIXME + var days = Math.round(duration / 86400 / 2); + if (days > 0) { + loaddays(this, element, days); // this = chart + } } - } - }, - tooltip: { - format: { - name: function (name, ratio, id, index) { - var re = /\d m/; - var res = re.exec(name); - return res; - }, - value: function (value, ratio, id, index) { - return value.toFixed(2) + '°'; + */ + }, + tooltip: { + format: { + // TODO: maybe move to top + name: function (name, ratio, id, index) { + var prefix = ''; + if (element.substr(0, 7) == 'chart_w') { + var re = /\d+ ?c?m/; + prefix = 'Wasser '; + } else { + var re = /Luft/; + }; + var result = re.exec(name); + return prefix + result; + }, + value: function (value, ratio, id, index) { + return value.toFixed(2) + '°'; + }, + title: function (datetime) { + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString + options = { + weekday: 'short', + year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', second: 'numeric', + timeZone: 'Europe/Vienna', timeZoneName: 'short' + }; + return datetime.toLocaleString('de-AT', options); + } } - } - }, - grid: { - y: { - show: true - } - }, - regions: [ - {axis: 'y', start: -999, end: 0, class: 'region-frozen'}, - {axis: 'y', start: 0, end: 25, class: 'region-ok'}, - {axis: 'y', start: 25, end: 100, class: 'region-warm'}, - {axis: 'y', start: 100, end: 999, class: 'region-boiling'} - ] -}); - -function loaddays(days) { - chart.load({ -// url: '/data/' + days, - url: api_base_url + beginend(days), - mimeType: 'json' + }, + grid: { + y: { + show: true + } + }, + regions: [ + {axis: 'y', start: -999, end: 0, class: 'region-frozen'}, + {axis: 'y', start: 0, end: 25, class: 'region-ok'}, + {axis: 'y', start: 25, end: 100, class: 'region-warm'}, + {axis: 'y', start: 100, end: 999, class: 'region-boiling'} + ] }); +}; + +function loaddays(chart, element, days) { + // TODO: maybe move to top or factor out somehow + if (element.substr(0, 7) == 'chart_w') { + chart.load({ + url: api_base_url_sensors + beginend(days), + mimeType: 'json' + }); + } else { + chart.load({ + url: api_base_url_weather + beginend(days), + mimeType: 'json' + }); + } } function beginend(days) { var now = Date.now(); - var end = new Date(now).toISOString().substr(0, 19); // 2018-06-13T16:52:30.995Z - var begin = new Date(now - days * 60*60*24 * 1000).toISOString().substr(0, 19); + + // TODO: this timezone calculation relies on the browser being in Europe/Vienna + var refdate = new Date(now); + var offset = refdate.getTimezoneOffset(); // -120 for UTC+2 + + var end = new Date(now - offset * 60 * 1000).toISOString().substr(0, 19); // 2018-06-13T16:52:30.995Z + var begin = new Date(now - days * 60*60*24 * 1000 - offset * 60 * 1000).toISOString().substr(0, 19); return '&begin=' + begin + '&end=' + end; } + +function getwidth(element) { + return document.getElementById(element).parentElement.clientWidth * 80 / 100; +} + +dayschart('chart_water_1', 'Der See (Tag)', 1, '%H:%M'); +dayschart('chart_water_7', 'Der See (Woche)', 7, '%a %d'); +dayschart('chart_water_31', 'Der See (Monat)', 31, '%Y-%m-%d'); +dayschart('chart_water_365', 'Der See (Jahr)', 365, '%b %Y'); + +dayschart('chart_air_1', 'Die Luft (Tag)', 1, '%H:%M'); +dayschart('chart_air_7', 'Die Luft (Woche)', 7, '%a %d'); +dayschart('chart_air_31', 'Die Luft (Monat)', 31, '%Y-%m-%d'); +dayschart('chart_air_365', 'Die Luft (Jahr)', 365, '%b %Y');