enhance graph page

2019-12-26 20:44:32 +01:00
parent e707723250
commit 9e27e8b771
3 changed files with 139 additions and 499 deletions
@@ -9,10 +9,39 @@
 <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="column is-half is-gapless">
-  <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 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>

@@ -22,6 +51,8 @@ $(function() {

    var start = moment({hour: 0});
    var end = moment();
+    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());

@@ -31,9 +62,29 @@ $(function() {
        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);
-        reloadGraph(s_start,s_end);
+        drawGraph(deveui, alias, property, s_start,s_end, false);
    }

+    $('#btn_w').on("click", function() {
+      drawGraph(deveui, alias, 'w', s_start,s_end, false);
+    });
+
+    $('#btn_t').on("click", function() {
+      drawGraph(deveui, alias, 't', s_start,s_end, false);
+    });
+
+    $('#btn_h').on("click", function() {
+      drawGraph(deveui, alias, 'h', s_start,s_end, false);
+    });
+
+    $('#btn_p').on("click", function() {
+      drawGraph(deveui, alias, 'p', s_start,s_end, false);
+    });
+
+    $('#btn_vp').on("click", function() {
+      drawGraph(deveui, alias, 'vp', s_start,s_end, false);
+    });
+
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
@@ -98,19 +149,96 @@ $(function() {
 <script>
 var chart;

-function reloadGraph(start, stop) {
+function drawGraph(deveui, alias, property, start, stop, create_graph) {
  range = ""
  range = range + "&start=" + start;
  range = range + "&stop=" + stop;
-  $.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
-    chart.updateSeries([{
-      data: mydata
-    }])
+
+  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',
+        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.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');

@@ -127,72 +255,9 @@ if (stop == null) {
  range = range + "&stop=" + stop;
 }

-console.log("Start: "+start);
-console.log("Stop: "+stop);
 $('#reportrange span').html(moment(start).format('D. MMMM YYYY') + ' - ' + moment(stop).format('D. MMMM YYYY'));

-var sPageURL = window.location.search.substring(1);
-var label;
-if (sPageURL.search("property=t") > -1) {
-  label = 'Temperatur';
-  minfunc = function(min) { if (min > 0) { return 0 } else { return min } }
-  maxfunc = function(max) { return max + 5 }
-} else if (sPageURL.search("property=vp") > -1) {
-  label = 'Akkuladung';
-  minfunc = function(min) { return 0 }
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=w") > -1) {
-  label = 'Gewicht';
-  minfunc = function(min) { if (min > 40000) { return min  - 2000 } else { return 0 } }  
-  maxfunc = function(max) { return max + 2000 }
-} else if (sPageURL.search("property=h") > -1) {
-  label = 'Luftfeuchtigkeit';
-  minfunc = function(min) { return 0 } 
-  maxfunc = function(max) { return 100 }
-} else if (sPageURL.search("property=p") > -1) {
-  label = 'Luftdruck';
-  minfunc = function(min) { return 900 } 
-  maxfunc = function(max) { return 1060 }
-} else {
-  label = 'Unknown';
-}
-
-$.getJSON('https://mini-beieli.ch/metrics?' + sPageURL + range, function(mydata) {
-  var options = {
-    chart: {
-      type: 'line',
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: 'smooth'
-    },
-    xaxis: {
-      type: "datetime",
-      labels: {
-        rotate: 0
-      }
-    },
-    yaxis: {
-      min: minfunc,
-      max: maxfunc
-    },
-    tooltip: {
-      x: {
-        format: 'dd.MM.yyyy HH:mm'
-      }
-    },
-    series: [{
-      name: label,
-      data: mydata
-    }]
-  }
-
-  chart = new ApexCharts(document.querySelector("#chart"), options);
-  
-  chart.render();
-});
+drawGraph(deveui, alias, property, start, stop, true);

 </script>