2944e90e760c976c725243bb10d9f2fefec6d859
[chrisu/seepark.git] / web / static / seepark_web.js
1 var api_base_url_sensors = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3';
2 var api_base_url_weather = '/api/1/openweathermap/city/3319578?mode=consolidated&format=c3';
3
4 function dayschart(element, title, days, xtickformat) {
5         var chartdata;
6         if (element.substr(0, 7) == 'chart_w') {
7                 chartdata = {
8                                 url: api_base_url_sensors + beginend(days),
9                                 mimeType: 'json',
10                                 xs: {
11                                         '0416a1ac66ff': '0416a1ac66ff_x',
12                                         '0516a207a4ff': '0516a207a4ff_x',
13                                         '0416a1bab9ff': '0416a1bab9ff_x'
14                                 },
15                                 names: {
16                                         '0416a1ac66ff': 'Wassertemperatur 30cm Tiefe',
17                                         '0516a207a4ff': 'Wassertemperatur 50cm Tiefe',
18                                         '0416a1bab9ff': 'Wassertemperatur 1m Tiefe'
19                                 },
20                                 xFormat: '%Y-%m-%d %H:%M:%S',
21                                 colors: {
22                                         '0416a1ac66ff': 'lightskyblue',
23                                         '0516a207a4ff': 'royalblue',
24                                         '0416a1bab9ff': 'midnightblue'
25                                 },
26                                 /*
27                                 xSort: false,
28                                 order: function (a, b) {
29                                         // gets 2 x objects. seems to be a "sort function" for js's sort()
30                                         // -1: a before b etc.
31                                         // only handle cases that appear in the wild
32                                         // console.log("a.id", a.id, "b.id", b.id);
33                                         if (a.id == '0416a1ac66ff') {return -1};
34                                         if (a.id == '0416a1bab9ff') {return  1};
35                                 }
36                                 */
37                 };
38         } else {
39                 chartdata = {
40                                 url: api_base_url_weather + beginend(days),
41                                 mimeType: 'json',
42                                 xs: {
43                                         '3319578': '3319578_x'
44                                 },
45                                 names: {
46                                         '3319578': 'Lufttemperatur in Obsteig'
47                                 },
48                                 xFormat: '%Y-%m-%d %H:%M:%S',
49                                 colors: {
50                                         '3319578': 'red'
51                                 }
52                 };
53         };
54         var chart = c3.generate({
55                 bindto: '#' + element,
56                 size: {
57                         width: document.getElementById(element).parentElement.clientWidth * 80 / 100
58                 },
59                 transition: {
60                         duration: null
61                 },
62                 title: {
63                         text: title
64                 },
65                 data: chartdata,
66                 point: {
67                         r: 1.5 // default 2.5
68                 },
69                 axis: {
70                         x: {
71                                 type: 'timeseries',
72                                 tick: {
73                                         format: xtickformat,
74                                         fit: false,
75                                         multiline: true, // broken? so →
76                                         rotate: -90
77                                 }
78                         },
79                         y: {
80                                 label: {
81                                         text: 'Temperatur in °C',
82                                         position: 'outer-middle'
83                                 },
84                                 tick: {
85                                         format: function (d) {
86                                                 return d.toFixed(1) + '°';
87                                         }
88                                 }
89                         }
90                 },
91                 zoom: {
92                         enabled: true,
93                         onzoomend: function (domain) {
94                                 // UNIX epoch
95                                 var start = domain[0].getTime()/1000;
96                                 var end   = domain[1].getTime()/1000;
97                                 var duration = end - start;
98                                 // duration is now the diff of the "viewport in seconds"
99                                 // FIXME
100                                 var days = Math.round(duration / 86400 / 2);
101                                 if (days > 0) {
102                                         loaddays(this, element, days); // this = chart
103                                 }
104                         }
105                 },
106                 tooltip: {
107                         format: {
108                                 // TODO: maybe move to top
109                                 name: function (name, ratio, id, index) {
110                                         var prefix = '';
111                                         if (element.substr(0, 7) == 'chart_w') {
112                                                 var re = /\d+ ?c?m/;
113                                                 prefix = 'Wasser ';
114                                         } else {
115                                                 var re = /Luft/;
116                                         };
117                                         var result = re.exec(name);
118                                         return prefix + result;
119                                 },
120                                 value: function (value, ratio, id, index) {
121                                         return value.toFixed(2) + '°';
122                                 },
123                                 title: function (x) {
124                                         // TODO: format datetime into something readable
125                                         return x;
126                                 }
127                         }
128                 },
129                 grid: {
130                         y: {
131                                 show: true
132                         }
133                 },
134                 regions: [
135                         {axis: 'y', start: -999, end:   0, class: 'region-frozen'},
136                         {axis: 'y', start:    0, end:  25, class: 'region-ok'},
137                         {axis: 'y', start:   25, end: 100, class: 'region-warm'},
138                         {axis: 'y', start:  100, end: 999, class: 'region-boiling'}
139                 ]
140         });
141 };
142
143 function loaddays(chart, element, days) {
144         // TODO: maybe move to top or factor out somehow
145         if (element.substr(0, 7) == 'chart_w') {
146                 chart.load({
147                         url: api_base_url_sensors + beginend(days),
148                         mimeType: 'json'
149                 });
150         } else {
151                 chart.load({
152                         url: api_base_url_weather + beginend(days),
153                         mimeType: 'json'
154                 });
155         }
156 }
157
158 function beginend(days) {
159         var now = Date.now();
160
161         // TODO: this timezone calculation relies on the browser being in Europe/Vienna
162         var refdate = new Date(now);
163         var offset = refdate.getTimezoneOffset(); // -120 for UTC+2
164
165         var end = new Date(now - offset * 60 * 1000).toISOString().substr(0, 19); // 2018-06-13T16:52:30.995Z
166         var begin = new Date(now - days * 60*60*24 * 1000 - offset * 60 * 1000).toISOString().substr(0, 19);
167         return '&begin=' + begin + '&end=' + end;
168 }
169
170 dayschart('chart_water_1',   'Der See (Tag)',     1, '%H:%M');
171 dayschart('chart_water_7',   'Der See (Woche)',   7, '%a %d');
172 dayschart('chart_water_31',  'Der See (Monat)',  31, 'Woche %V');
173 dayschart('chart_water_365', 'Der See (Jahr)',  365, '%b %Y');
174
175 dayschart('chart_air_1',     'Die Luft (Tag)',     1, '%H:%M');
176 dayschart('chart_air_7',     'Die Luft (Woche)',   7, '%a %d');
177 dayschart('chart_air_31',    'Die Luft (Monat)',  31, 'Woche %V');
178 dayschart('chart_air_365',   'Die Luft (Jahr)',  365, '%b %Y');