adds charts panel

frontend/src/components/SvgGraph.vue

@@ -16,6 +16,7 @@ import {
     getDurationString,
     parseDurationString,
 } from '@/datetime';
+import { onDocumentShown } from '@/composables/document.ts';
 
 const props = defineProps<{
     initial_duration?: number;
@@ -32,7 +33,7 @@ const props = defineProps<{
 const divRef = useTemplateRef<HTMLDivElement>('graph-div');
 
 const width = ref(0);
-const height = ref(0);
+const raw_height = ref(0);
 
 const controls_height = 32;
 const min_time_label_separation = 250;
@@ -41,13 +42,18 @@ const resize_observer = new ResizeObserver((elements) => {
     for (const element of elements) {
         if (element.target == divRef.value) {
             width.value = element.contentBoxSize[0].inlineSize;
-            height.value =
-                element.contentBoxSize[0].blockSize -
-                (props.include_controls ? controls_height : 0);
+            raw_height.value = element.contentBoxSize[0].blockSize;
         }
     }
 });
 
+const height = computed(() => {
+    return Math.max(
+        raw_height.value - (props.include_controls ? controls_height : 0),
+        1,
+    );
+});
+
 watch([divRef], ([divRef]) => {
     if (divRef) {
         resize_observer.observe(divRef);
@@ -132,6 +138,10 @@ watch([now], ([now_value]) => {
     }
 });
 
+onDocumentShown(() => {
+    fetch_history.value++;
+});
+
 const max_x_text = computed({
     // getter
     get() {
@@ -193,8 +203,12 @@ const legend_x_stride = computed(() => 0);
 const legend_y_stride = computed(() => 16);
 const legend_width_output = computed(() => legend_width - 8);
 
+const graph_width = computed(() => {
+    return Math.max(width.value - border_left.value - border_right.value, 1);
+});
+
 const line_duration = computed(() => {
-    const width_px = width.value;
+    const width_px = graph_width.value;
     const diff_x = max_x.value - min_x.value;
     return time_lines.find((duration) => {
         const line_count = diff_x / duration;
@@ -263,8 +277,7 @@ provide<GraphData>(GRAPH_DATA, {
     max_temporal_resolution: max_temporal_resolution,
     live: live,
     fetch_history: fetch_history,
-    width: () =>
-        Math.max(width.value - border_left.value - border_right.value, 0),
+    width: graph_width,
     height: () =>
         Math.max(height.value - border_top.value - border_bottom.value, 0),
     x_map: x_map,