From f8a59825e6f2b611a4b12d30d399bc3a4c16006f Mon Sep 17 00:00:00 2001
From: Joerg Lehmann <joerg.lehmann@nbit.ch>
Date: Fri, 20 Aug 2021 21:21:36 +0200
Subject: [PATCH] make chart more user-friendly on small devices

---
 snippets/graph.html                   | 6 ++----
 static/css/mini-beieli-web-custom.css | 8 ++++++++
 static/js/chart.js                    | 7 ++++++-
 static/js/graph.js                    | 6 +++---
 templates/layout.html                 | 2 +-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/snippets/graph.html b/snippets/graph.html
index 2bda2f7..f2cdccf 100644
--- a/snippets/graph.html
+++ b/snippets/graph.html
@@ -47,11 +47,9 @@
 
 <script src="static/js/graph.js"></script>
 
-<div>
-  <section id="chart">
+<section id="chart">
     <!-- Content ... -->
-  </section>
-</div>
+</section>
 
     <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.3"></script>
 
diff --git a/static/css/mini-beieli-web-custom.css b/static/css/mini-beieli-web-custom.css
index 9af06f1..1389882 100644
--- a/static/css/mini-beieli-web-custom.css
+++ b/static/css/mini-beieli-web-custom.css
@@ -1,3 +1,11 @@
+html,body {
+  height: 100%;
+}
+
+.section,.container {
+  height: calc(100% - 24px);
+}
+
 hr {
   margin: 0 0 15px 0;
 }
diff --git a/static/js/chart.js b/static/js/chart.js
index 3b5c718..db77cde 100644
--- a/static/js/chart.js
+++ b/static/js/chart.js
@@ -29,6 +29,8 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
     minfunc = function(min) { if (min > 5000) { return min  - 2000 } else { return 0 } }
     maxfunc = function(max) { return max + 2000 }
     labels = {
+      offsetX: 50,
+      offsetY: -4,
       formatter: function(val, index) {
         return (val / 1000.0).toFixed(3);
       }
@@ -71,9 +73,11 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
       }
       return;
     }
+    calculated_height = $('.container').height() - $('.navbar').height() - $('#myselectors').height();
     var options = {
       chart: {
         type: 'line',
+        height: calculated_height + 'px',
         animations: {
           enabled: false
         }
@@ -108,7 +112,8 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
         min: minfunc,
         max: maxfunc,
         forceNiceScale: forceNiceScale,
-        labels: labels 
+        labels: labels,
+        floating: true
       },
       tooltip: {
         x: {
diff --git a/static/js/graph.js b/static/js/graph.js
index 3be9191..a9e6e78 100644
--- a/static/js/graph.js
+++ b/static/js/graph.js
@@ -5,7 +5,7 @@ $(function() {
     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());
+    //console.log("XXX: "+start.format());
 
     function change_property(new_property) {
         if (new_property != property) {
@@ -20,10 +20,10 @@ $(function() {
 
     function cb(start, end) {
         $('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
-        console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
+        //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);
+        //console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property);
         drawGraph(deveui, alias, property, s_start,s_end, false);
     }
 
diff --git a/templates/layout.html b/templates/layout.html
index 5eee39a..9f2945f 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -75,7 +75,7 @@
       </nav>
       <hr />
       {{template "body_content" . }}
-     </div>
+      </div>
     </div>
     <script src="/static/js/mini-beieli-web.js"></script>
   </body>