X-Git-Url: https://git.toastfreeware.priv.at/chrisu/seepark.git/blobdiff_plain/326fc2a8b86a2bcec5daf4dff07bcb6563f8978e..5e537928c545acf84bedf2fda50609584caecb41:/web/static/seepark_web.js

diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js
index b2e5a32..6d8e1f1 100644
--- a/web/static/seepark_web.js
+++ b/web/static/seepark_web.js
@@ -58,7 +58,13 @@ function dayschart(element, title, days, xtickformat) {
 	var chart = c3.generate({
 		bindto: '#' + element,
 		size: {
-			width: document.getElementById(element).parentElement.clientWidth * 80 / 100
+			width: getwidth(element)
+		},
+		onresized: function () {
+			chart.resize({
+				width: getwidth(element)
+			});
+			// chart.flush();
 		},
 		transition: {
 			duration: null
@@ -74,7 +80,10 @@ function dayschart(element, title, days, xtickformat) {
 			x: {
 				type: 'timeseries',
 				tick: {
-					format: xtickformat,
+					format: function (d) {
+						var strftimeDE = strftime.localizeByIdentifier('de_DE');
+						return strftimeDE(xtickformat, new Date(d));
+					},
 					fit: false,
 					multiline: true, // broken? so →
 					rotate: -90
@@ -96,13 +105,9 @@ function dayschart(element, title, days, xtickformat) {
 			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);
+				var duration = (domain[1] - domain[0]) / 1000; // duration is now the diff of the "viewport in seconds"
+				// FIXME?
+				var days = duration / 86400;
 				if (days > 0) {
 					loaddays(this, element, days); // this = chart
 				}
@@ -150,6 +155,20 @@ function dayschart(element, title, days, xtickformat) {
 			{axis: 'y', start:  100, end: 999, class: 'region-boiling'}
 		]
 	});
+
+	// workaround for unrendered dots
+	setTimeout(function () { chart.flush(); }, 5000);
+
+	// reload data
+	setInterval(
+		function() {
+			chart.load({
+				url: api_base_url_sensors + beginend(days),
+				mimeType: 'json'
+			})
+		},
+		5 * 60 * 1000
+	);
 };
 
 function loaddays(chart, element, days) {
@@ -179,6 +198,10 @@ function beginend(days) {
 	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');