add initial controls bar
This commit is contained in:
@@ -1,27 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, provide, ref } from 'vue';
|
||||
import { computed, onUnmounted, onWatcherCleanup, provide, ref, useTemplateRef, watch } from 'vue';
|
||||
import { useNow } from '@/composables/ticker';
|
||||
import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
|
||||
import TimeText from '@/components/TimeText.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
duration?: number;
|
||||
utc?: boolean;
|
||||
left_axis?: boolean;
|
||||
right_axis?: boolean;
|
||||
hide_time_labels?: boolean;
|
||||
hide_time_ticks?: boolean;
|
||||
include_controls?: boolean;
|
||||
legend?: GraphSide;
|
||||
}>();
|
||||
|
||||
const width = computed(() => {
|
||||
return props.width;
|
||||
const divRef = useTemplateRef<HTMLDivElement>("graph-div");
|
||||
|
||||
const width = ref(0);
|
||||
const height = ref(0);
|
||||
|
||||
const controls_height = 32;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const height = computed(() => {
|
||||
return props.height;
|
||||
watch([divRef], ([divRef]) => {
|
||||
if (divRef) {
|
||||
resize_observer.observe(divRef);
|
||||
onWatcherCleanup(() => {
|
||||
resize_observer.unobserve(divRef);
|
||||
});
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
resize_observer.disconnect();
|
||||
});
|
||||
|
||||
const now = useNow(33);
|
||||
@@ -107,8 +126,8 @@ provide<GraphData>(GRAPH_DATA, {
|
||||
border_top: border_top,
|
||||
min_x: min_x,
|
||||
max_x: now,
|
||||
width: () => width.value - border_left.value - border_right.value,
|
||||
height: () => height.value - border_top.value - border_bottom.value,
|
||||
width: () => Math.max(width.value - border_left.value - border_right.value, 0),
|
||||
height: () => Math.max(height.value - border_top.value - border_bottom.value, 0),
|
||||
x_map: x_map,
|
||||
lines: telemetry_lines,
|
||||
max_update_rate: 1000 / 10,
|
||||
@@ -140,52 +159,60 @@ const lines = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg ref="svg_graph" class="graph" :width="width" :height="height">
|
||||
<defs>
|
||||
<clipPath id="content">
|
||||
<rect
|
||||
:x="border_left"
|
||||
:y="border_top"
|
||||
:width="width - border_left - border_right"
|
||||
:height="height - border_top - border_bottom"
|
||||
></rect>
|
||||
</clipPath>
|
||||
<clipPath id="y_ticker">
|
||||
<rect
|
||||
:x="0"
|
||||
:y="border_top"
|
||||
:width="width"
|
||||
:height="height - border_top - border_bottom"
|
||||
></rect>
|
||||
</clipPath>
|
||||
<clipPath id="x_ticker">
|
||||
<rect
|
||||
:x="border_left"
|
||||
:y="0"
|
||||
:width="width - border_left - border_right"
|
||||
:height="height"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g class="time_tick" clip-path="url(#x_ticker)">
|
||||
<template v-for="tick of lines" :key="tick">
|
||||
<polyline
|
||||
v-if="!hide_time_ticks"
|
||||
:points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
|
||||
></polyline>
|
||||
<TimeText
|
||||
v-if="!hide_time_labels"
|
||||
class="bottom_edge"
|
||||
:x="x_map(tick)"
|
||||
:y="height - border_bottom + text_offset"
|
||||
:timestamp="tick"
|
||||
:utc="props.utc"
|
||||
:show_millis="line_duration < 1000"
|
||||
></TimeText>
|
||||
</template>
|
||||
</g>
|
||||
<slot></slot>
|
||||
</svg>
|
||||
<div ref="graph-div" class="full-size">
|
||||
<div v-if="include_controls" class="controls-header" :style="`height: ${controls_height}px`">
|
||||
<div class="grow"></div>
|
||||
<div>
|
||||
<span>Duration Dropdown</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg ref="svg_graph" class="graph" :width="width" :height="height">
|
||||
<defs>
|
||||
<clipPath id="content">
|
||||
<rect
|
||||
:x="border_left"
|
||||
:y="border_top"
|
||||
:width="Math.max(width - border_left - border_right, 0)"
|
||||
:height="Math.max(height - border_top - border_bottom, 0)"
|
||||
></rect>
|
||||
</clipPath>
|
||||
<clipPath id="y_ticker">
|
||||
<rect
|
||||
:x="0"
|
||||
:y="border_top"
|
||||
:width="width"
|
||||
:height="Math.max(height - border_top - border_bottom, 0)"
|
||||
></rect>
|
||||
</clipPath>
|
||||
<clipPath id="x_ticker">
|
||||
<rect
|
||||
:x="border_left"
|
||||
:y="0"
|
||||
:width="Math.max(width - border_left - border_right, 0)"
|
||||
:height="height"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g class="time_tick" clip-path="url(#x_ticker)">
|
||||
<template v-for="tick of lines" :key="tick">
|
||||
<polyline
|
||||
v-if="!hide_time_ticks"
|
||||
:points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
|
||||
></polyline>
|
||||
<TimeText
|
||||
v-if="!hide_time_labels"
|
||||
class="bottom_edge"
|
||||
:x="x_map(tick)"
|
||||
:y="height - border_bottom + text_offset"
|
||||
:timestamp="tick"
|
||||
:utc="props.utc"
|
||||
:show_millis="line_duration < 1000"
|
||||
></TimeText>
|
||||
</template>
|
||||
</g>
|
||||
<slot></slot>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -201,4 +228,24 @@ const lines = computed(() => {
|
||||
stroke: variables.$time-tick;
|
||||
fill: variables.$time-tick;
|
||||
}
|
||||
|
||||
div.full-size {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.controls-header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
gap: 1em 0;
|
||||
margin: 0 1em 0 1em;
|
||||
}
|
||||
|
||||
div.controls-header > div.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user