web/static/seepark_web.js

   1 var api_base_url = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3';
   2
   3 var chart = c3.generate({
   4         bindto: '#chart',
   5         transition: {
   6                 duration: null
   7         },
   8         title: {
   9                 text: 'Der See'
  10         },
  11         data: {
  12 //              url: '/data/', // redirects to /data/1
  13                 url: api_base_url + beginend(1),
  14                 mimeType: 'json',
  15                 xs: {
  16                         '0316a2193bff': '0316a2193bff_x',
  17                         '0316a21383ff': '0316a21383ff_x'
  18                 },
  19                 names: {
  20                         '0316a2193bff': 'Wassertemperatur in 4 m Tiefe',
  21                         '0316a21383ff': 'Wassertemperatur in 5 m Tiefe'
  22                 },
  23                 xFormat: '%Y-%m-%d %H:%M:%S',
  24                 colors: {
  25                         '0316a2193bff': 'lightblue',
  26                         '0316a21383ff': 'darkblue'
  27                 }
  28         },
  29         axis: {
  30                 x: {
  31                         type: 'timeseries',
  32                         tick: {
  33                                 format: '%Y-%m-%d %H:%M',
  34                                 fit: false,
  35                                 multiline: true, // broken? so →
  36                                 rotate: -90
  37                         }
  38                 },
  39                 y: {
  40                         label: {
  41                                 text: 'Temperatur in °C',
  42                                 position: 'outer-middle'
  43                         },
  44                         tick: {
  45                                 format: function (d) {
  46                                         return d + '°';
  47                                 }
  48                         }
  49                 }
  50         },
  51         zoom: {
  52                 enabled: true,
  53                 onzoomend: function (domain) {
  54                         // UNIX epoch
  55                         var start = domain[0].getTime()/1000;
  56                         var end   = domain[1].getTime()/1000;
  57                         var duration = end - start;
  58                         // duration is now the diff of the "viewport in seconds"
  59                         // FIXME
  60                         var days = Math.round(duration / 86400 / 2);
  61                         if (days > 0) {
  62                                 loaddays(days);
  63                         }
  64                 }
  65         },
  66         tooltip: {
  67                 format: {
  68                         name: function (name, ratio, id, index) {
  69                                 var re = /\d m/;
  70                                 var res = re.exec(name);
  71                                 return res;
  72                         },
  73                         value: function (value, ratio, id, index) {
  74                                 return value.toFixed(2) + '°';
  75                         }
  76                 }
  77         },
  78         grid: {
  79                 y: {
  80                         show: true
  81                 }
  82         },
  83         regions: [
  84                 {axis: 'y', start: -999, end:   0, class: 'region-frozen'},
  85                 {axis: 'y', start:    0, end:  25, class: 'region-ok'},
  86                 {axis: 'y', start:   25, end: 100, class: 'region-warm'},
  87                 {axis: 'y', start:  100, end: 999, class: 'region-boiling'}
  88         ]
  89 });
  90
  91 function loaddays(days) {
  92         chart.load({
  93 //              url: '/data/' + days,
  94                 url: api_base_url + beginend(days),
  95                 mimeType: 'json'
  96         });
  97 }
  98
  99 function beginend(days) {
 100         var now = Date.now();
 101         var end = new Date(now).toISOString().substr(0, 19); // 2018-06-13T16:52:30.995Z
 102         var begin = new Date(now - days * 60*60*24 * 1000).toISOString().substr(0, 19);
 103         return '&begin=' + begin + '&end=' + end;
 104 }