mini-beieli-web/snippets/graph.html

{{define "body_content"}}
{{ if ne .UserName "" }}

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>

<div class="columns">
  <div class="column is-half">
    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
      <i class="fa fa-calendar"></i>&nbsp;
      <span></span> <i class="fa fa-caret-down"></i>
    </div>
  </div>
  <div class="column is-half">
    <a id="btn_w" class="button">
      <span class="icon">
        <i class="fa fa-balance-scale"></i>
      </span>
    </a>
    <a id="btn_t" class="button">
      <span class="icon">
        <i class="fa fa-thermometer-half"></i>
      </span>
    </a>
    <a id="btn_h" class="button">
      <span class="icon">
        <i class="fa fa-tint"></i>
      </span>
    </a>
    <a id="btn_p" class="button">
      <span class="icon">
        <i class="fa fa-cloud"></i>
      </span>
    </a>
    <a id="btn_vp" class="button">
      <span class="icon">
        <i class="fa fa-battery-three-quarters"></i>
      </span>
    </a>
  </div>
</div>

<script type="text/javascript">

$(function() {

    var start = moment.utc({hour: 0});
    var end = moment.utc();
    var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
    var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');

    console.log("XXX: "+start.format());

    function cb(start, end) {
        $('#reportrange span').html(start.format('D. MMM YYYY') + ' - ' + end.format('D. MMM YYYY'));
        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
        s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
        s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
        console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property);
        drawGraph(deveui, alias, property, s_start,s_end, false);
    }

    $('#btn_w').on("click", function() {
      property = 'w';
      drawGraph(deveui, alias, property, s_start, s_end, false);
    });

    $('#btn_t').on("click", function() {
      property = 't';
      drawGraph(deveui, alias, property, s_start, s_end, false);
    });

    $('#btn_h').on("click", function() {
      property = 'h';
      drawGraph(deveui, alias, property, s_start, s_end, false);
    });

    $('#btn_p').on("click", function() {
      property = 'p';
      drawGraph(deveui, alias, property, s_start, s_end, false);
    });

    $('#btn_vp').on("click", function() {
      property = 'vp';
      drawGraph(deveui, alias, property, s_start, s_end, false);
    });

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        regional: [ "de" ],
        "locale": {
            format: 'DD.MM.YYYY',
            "separator": " - ",
            "applyLabel": "Anwenden",
            "cancelLabel": "Abbrechen",
            "fromLabel": "Von",
            "toLabel": "Bis",
            customRangeLabel: 'Benutzerdefiniert',
            "weekLabel": "W",
            "daysOfWeek": [
                "So",
                "Mo",
                "Di",
                "Mi",
                "Do",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "Jan",
                "Feb",
                "M&auml;r",
                "Apr",
                "Mai",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Okt",
                "Nov",
                "Dez"
            ],
            "firstDay": 1
        },
        ranges: {
           'Heute': [moment(), moment()],
           'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
           'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
           'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
           'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    //cb(start, end);

});
</script>

<div>
  <section id="chart">
    <!-- Content ... -->
  </section>
</div>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
var chart;

function drawGraph(deveui, alias, property, start, stop, create_graph) {
  range = ""
  range = range + "&start=" + start;
  range = range + "&stop=" + stop;

  var label;
  $(".button").removeClass("is-success");
  if (property=="t") {
    $("#btn_t").addClass("is-success");
    label = 'Temperatur';
    minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
    maxfunc = function(max) { return max + 5 }
  } else if (property=="vp") {
    $("#btn_vp").addClass("is-success");
    label = 'Akkuladung';
    minfunc = function(min) { return 0 }
    maxfunc = function(max) { return 100 }
  } else if (property=="w") {
    $("#btn_w").addClass("is-success");
    label = 'Gewicht';
    minfunc = function(min) { if (min > 40000) { return min  - 2000 } else { return 0 } }
    maxfunc = function(max) { return max + 2000 }
  } else if (property==="h") {
    $("#btn_h").addClass("is-success");
    label = 'Luftfeuchtigkeit';
    minfunc = function(min) { return 0 } 
    maxfunc = function(max) { return 100 }
  } else if (property=="p") {
    $("#btn_p").addClass("is-success");
    label = 'Luftdruck';
    minfunc = function(min) { return 900 } 
    maxfunc = function(max) { return 1060 }
  } else {
    label = 'Unknown';
  }
  
  $.getJSON('https://mini-beieli.ch/metrics?deveui=' + deveui + '&alias=' + alias + '&property=' + property + range, function(mydata) {
    var options = {
      chart: {
        type: 'line',
        animations: {
          enabled: false
        }
      },
      stroke: {
        curve: 'smooth'
      },
      title: {
        text: urlParams.get('alias'),
        align: 'center',
        offsetY: 20,
        style: {
          fontSize: '32px'
        }
      },
      xaxis: {
        type: "datetime",
        labels: {
          rotate: 0
        }
      },
      yaxis: {
        min: minfunc,
        max: maxfunc
      },
      tooltip: {
        x: {
          format: 'dd.MM.yyyy HH:mm'
        }
      },
      series: [{
        name: label,
        data: mydata
      }]
    }
  
    if (create_graph) {
      chart = new ApexCharts(document.querySelector("#chart"), options);
    } else {
      chart.destroy();
      chart = new ApexCharts(document.querySelector("#chart"), options);
      //chart.updateOptions(options);
      //chart.updateSeries(mydata);
    }
    
    chart.render();
  });
}

var urlParams = new URLSearchParams(window.location.search);
var deveui = urlParams.get('deveui');
var alias = urlParams.get('alias');
var property = urlParams.get('property');
var start = urlParams.get('start');
var stop = urlParams.get('stop');

range="";
if (start == null) {
  var dstart = moment({hour: 0});
  var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
  range = range + "&start=" + start;
}

if (stop == null) {
  var dstop = moment();
  var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
  range = range + "&stop=" + stop;
}

$('#reportrange span').html(moment(start).format('D. MMM YYYY') + ' - ' + moment(stop).format('D. MMM YYYY'));

drawGraph(deveui, alias, property, start, stop, true);

</script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}