sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve numeric labeling

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 14:28:05 -05:00
parent ac2014d27d
commit 6a8e076ee7
7 changed files with 124 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/GraphAxis.vue
View File

@@ -1,18 +1,19 @@
<script setup lang="ts">
import { computed, inject, provide, ref, toValue, watch } from 'vue';
import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
import { AXIS_DATA, type AxisData, AxisType } from '@/graph/axis';
import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
import NumericText from '@/components/NumericText.vue';
const props = defineProps<{
y_limits?: [number, number];
side?: AxisSide;
side?: GraphSide;
type?: AxisType;
}>();
const minor_tick_length = computed(() => 4);
const major_tick_length = computed(() => 8);
const text_offset = computed(() => 5);
const side = computed(() => props.side || AxisSide.Right);
const side = computed(() => props.side || GraphSide.Right);
const type = computed(() => props.type || AxisType.Linear);
const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)];
@@ -101,7 +102,7 @@ const max_y_value = computed(() => {
const y_map = (y: number) => {
const height = toValue(graph_data.height);
const border_top_bottom = toValue(graph_data.border_top_bottom);
const border_top = toValue(graph_data.border_top);
let max_value = toValue(max_y_value);
let min_value = toValue(min_y_value);
let y_value = y;
@@ -111,7 +112,7 @@ const y_map = (y: number) => {
y_value = Math.log(y_value);
}
const diff_y = max_value - min_value;
return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom;
return height * (1 - (y_value - min_value) / diff_y) + border_top;
};
provide<AxisData>(AXIS_DATA, {
@@ -167,7 +168,7 @@ const lines = computed(() => {
</script>
<template>
<template v-if="side == AxisSide.Right">
<template v-if="side == GraphSide.Right">
<g class="minor_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[0]" :key="tick">
<polyline
@@ -180,8 +181,7 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
><NumericText :value="tick" :max_width="7"></NumericText></text>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
@@ -196,7 +196,7 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
><NumericText :value="tick" :max_width="6"></NumericText></text
>
</template>
</g>
@@ -212,12 +212,14 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
<NumericText :value="tick" :max_width="5"></NumericText>
</text
>
</template>
</g>
</template>
<template v-if="side == AxisSide.Left">
<template v-if="side == GraphSide.Left">
<g class="minor_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[0]" :key="tick">
<polyline
@@ -230,8 +232,7 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
><NumericText :value="tick" :max_width="7"></NumericText></text>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
@@ -246,8 +247,7 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
>
><NumericText :value="tick" :max_width="6"></NumericText></text>
</template>
</g>
<g class="grid_tick" clip-path="url(#y_ticker)">
@@ -262,8 +262,7 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
><NumericText :value="tick" :max_width="5"></NumericText></text>
</template>
</g>
</template>