initial graph

frontend/src/components/Graph.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { useNow } from '@/composables/ticker'
+import { GRAPH_DATA, type GraphData } from '@/graph/graph'
+
+const props = defineProps<{
+    width: number
+    height: number
+    // min_t?: number
+    // max_t?: number
+}>();
+
+const svg_viewbox = computed(() => {
+    return `0 0 ${props.width} ${props.height}`;
+})
+const now = useNow(33);
+const window_duration = 30 * 1000; // 30 seconds
+
+const min_x = computed(() => now.value - window_duration);
+
+provide<GraphData>(GRAPH_DATA, {
+    min_x: min_x,
+    max_x: now,
+    width: () => props.width,
+    height: () => props.height,
+});
+
+</script>
+
+<template>
+    <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
+        <slot></slot>
+    </svg>
+</template>
+
+<style scoped lang="scss">
+svg {
+    border: white 1px solid;
+}
+</style>