40 lines
861 B
Vue
40 lines
861 B
Vue
<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> |