make chart more user-friendly on small devices

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>
 

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;
 }

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: {

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);
     }
 

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>