Look Ahead setting for graph widgets to show future data

Views/sidebar.php

@@ -18,6 +18,8 @@
 
             <input id="graphName" v-model="graphName" type="text" placeholder="<?php echo _('Graph Name') ?>">
 
+            <input id="lookAhead" v-model="lookAhead" type="text" placeholder="<?php echo _('Look Ahead (s)') ?>">
+
             <small v-if="selected > -1" class="help-block text-light">
                 <?php echo _('Selected graph id') ?>: {{ graphs[selected].id }}
             </small>

embed.php

@@ -14,6 +14,7 @@
     $fullwidth = true;
 
     $graphid = get("graphid");
+    $lookahead = get("lookahead");
 
     $apikey = "";
     if (isset($_GET['apikey'])) $apikey = $_GET['apikey'];
@@ -105,6 +106,7 @@
     embed = true;
 
     var graphid = "<?php echo $graphid; ?>";
+    var lookahead = "<?php echo $lookahead; ?>";
 
     var _lang = <?php
         $lang['Select a feed'] = _('Select a feed');
@@ -146,6 +148,16 @@
             yaxismax2 = result.yaxismax2;
             feedlist = result.feedlist;
 
+            // attempt to update time selector to match the view
+            var hours = Math.floor((view.end - view.start) / 3600 / 1000);
+            dropdown = $('.graph_time').children()
+            for (var i = dropdown.length - 1; i > 0; i--) {
+                if (hours >= dropdown[i].value) {
+                    $('.graph_time').val(dropdown[i].value);
+                    break;
+                }
+            }
+
             // show settings
             showmissing = result.showmissing;
             showtag = result.showtag;
@@ -154,7 +166,7 @@
             if (floatingtime) {
                 var timewindow = view.end - view.start;
                 var now = Math.round(+new Date * 0.001)*1000;
-                view.end = now;
+                view.end = now + lookahead * 3600 * 1000;
                 view.start = view.end - timewindow;
             }
 
@@ -170,6 +182,18 @@
             datetimepickerInit();
             graph_resize();
             graph_reload();
+
+            // automatic refresh every 60s < interval / 5 < 1 hour
+            var refresh = Math.min(Math.max(60, view.interval / 5), 3600);
+            window.setInterval(function() {
+              if (floatingtime) {
+                var timewindow = view.end - view.start;
+                var now = Math.round(+new Date * 0.001)*1000;
+                view.end = now + lookahead * 3600 * 1000;
+                view.start = view.end - timewindow;
+              }
+              graph_reload();
+            }, refresh * 1000); // ms
         }
     });
 

widget/graph_render.js

@@ -16,10 +16,10 @@ function graph_widgetlist(){
     {
       "offsetx":0,"offsety":0,"width":400,"height":300,
       "menu":"Visualisations",
-      "options":["graphid"],
-      "optionstype":["dropbox"],
-      "optionsname":[_Tr("Graph")],
-      "optionshint":[_Tr("Saved graphs from graph module")],
+      "options":["graphid", "lookahead"],
+      "optionstype":["dropbox", "value"],
+      "optionsname":[_Tr("Graph"),"Look Ahead"],
+      "optionshint":[_Tr("Saved graphs from graph module"), "Hours into the future to show on the graph (optional)"],
       "optionsdata":[savedgraphsnamelist],
       "html":""
     }