allows scrolling backwards through history

frontend/src/components/SvgGraph.vue

@@ -11,6 +11,7 @@ import {
 import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
 import TimeText from '@/components/TimeText.vue';
+import { getDateString } from '@/datetime';
 
 const props = defineProps<{
     duration?: number;
@@ -107,11 +108,47 @@ const border_right = computed(
 const border_top = computed(() => 6);
 const border_bottom = computed(() => (props.hide_time_labels ? 6 : 24));
 
-const max_x = now;
+const max_x = ref(now.value);
 const min_x = computed(() => max_x.value - window_duration.value);
 
+const fetch_history = ref(0);
+
 const diff_x = computed(() => max_x.value - min_x.value);
 
+const live = ref(true);
+watch([live], ([live_value]) => {
+    if (live_value) {
+        fetch_history.value++;
+    }
+});
+const valid_max_x_text = ref(true);
+watch([now], ([now_value]) => {
+    if (live.value) {
+        max_x.value = now_value;
+        valid_max_x_text.value = true;
+    }
+});
+
+const max_x_text = computed({
+    // getter
+    get() {
+        return getDateString(new Date(max_x.value), props.utc, true);
+    },
+    // setter
+    set(newValue) {
+        const new_max_x = Date.parse(
+            newValue.replace('/', '-').replace('/', '-').replace(' ', 'T'),
+        );
+        if (!Number.isNaN(new_max_x)) {
+            fetch_history.value++;
+            max_x.value = new_max_x;
+            valid_max_x_text.value = true;
+        } else {
+            valid_max_x_text.value = false;
+        }
+    },
+});
+
 const x_map = (x: number) => {
     return (
         ((width.value - border_left.value - border_right.value) *
@@ -203,7 +240,9 @@ const should_fade = ref(false);
 provide<GraphData>(GRAPH_DATA, {
     border_top: border_top,
     min_x: min_x,
-    max_x: now,
+    max_x: max_x,
+    live: live,
+    fetch_history: fetch_history,
     width: () =>
         Math.max(width.value - border_left.value - border_right.value, 0),
     height: () =>
@@ -231,7 +270,17 @@ provide<GraphData>(GRAPH_DATA, {
         >
             <div class="grow"></div>
             <div>
-                <span>Duration Dropdown</span>
+                <input
+                    type="text"
+                    autocomplete="off"
+                    :disabled="live"
+                    :size="max_x_text.length"
+                    v-model="max_x_text"
+                />
+            </div>
+            <div>
+                <input type="checkbox" v-model="live" />
+                <label>Live</label>
             </div>
         </div>
         <svg