add boolean type

frontend/src/components/BooleanText.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+const props = defineProps<{
+    value: boolean;
+}>();
+const emit = defineEmits<{
+    (e: 'update', value: string): void;
+}>();
+
+const display_value = computed(() => {
+    return props.value ? 'true' : 'false';
+});
+watch(
+    [display_value],
+    ([display_str]) => {
+        emit('update', display_str);
+    },
+    {
+        immediate: true,
+    },
+);
+</script>
+
+<template>
+    {{ display_value }}
+</template>
+
+<style scoped lang="scss"></style>

frontend/src/components/NumericText.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
     value: number;
     max_width: number;
     copyable?: boolean;
+    include_span?: boolean;
 }>();
 const emit = defineEmits<{
     (e: 'update', value: string): void;
@@ -14,6 +15,9 @@ const emit = defineEmits<{
 const copyable = computed(() => {
     return props.copyable || false;
 });
+const include_span = computed(() => {
+    return props.include_span || false;
+});
 
 const display_value = computed(() => {
     if (props.value == 0) {
@@ -61,9 +65,15 @@ const display_value = computed(() => {
     }
     return precision;
 });
-watch([display_value], ([display_str]) => {
-    emit('update', display_str);
-});
+watch(
+    [display_value],
+    ([display_str]) => {
+        emit('update', display_str);
+    },
+    {
+        immediate: true,
+    },
+);
 </script>
 
 <template>
@@ -73,11 +83,14 @@ watch([display_value], ([display_str]) => {
             v-bind="$attrs"
         ></CopyableDynamicSpan>
     </template>
-    <template v-else>
+    <template v-else-if="include_span">
         <span v-bind="$attrs">
             {{ display_value }}
         </span>
     </template>
+    <template v-else>
+        {{ display_value }}
+    </template>
 </template>
 
 <style scoped lang="scss"></style>

frontend/src/components/TelemetryLine.vue

@@ -96,12 +96,21 @@ watch([value], ([val]) => {
     if (val) {
         const val_t = Date.parse(val.timestamp);
         if (val_t >= min_x) {
-            const item_val = val.value[
-                telemetry_data.value!.data_type
-            ] as number;
+            const raw_item_val = val.value[telemetry_data.value!.data_type];
+            let item_val = 0;
+            if (
+                ['Float32', 'Float64'].some(
+                    (e) => e == telemetry_data.value!.data_type,
+                )
+            ) {
+                item_val = raw_item_val as number;
+            } else if (telemetry_data.value!.data_type == 'Boolean') {
+                item_val = (raw_item_val as boolean) ? 1 : 0;
+            }
             const new_item = {
                 x: val_t,
                 y: item_val,
+                value: raw_item_val,
             } as Point;
             memo.value.insert(new_item, data_min_sep.value);
             if (item_val < min.value) {
@@ -131,10 +140,21 @@ watch(
                 const response = (await res.json()) as TelemetryDataItem[];
                 for (const data_item of response) {
                     const val_t = Date.parse(data_item.timestamp);
-                    const item_val = data_item.value[type] as number;
+                    const raw_item_val = data_item.value[type];
+                    let item_val = 0;
+                    if (
+                        ['Float32', 'Float64'].some(
+                            (e) => e == telemetry_data.value!.data_type,
+                        )
+                    ) {
+                        item_val = raw_item_val as number;
+                    } else if (type == 'Boolean') {
+                        item_val = (raw_item_val as boolean) ? 1 : 0;
+                    }
                     const new_item = {
                         x: val_t,
                         y: item_val,
+                        value: raw_item_val,
                     } as Point;
                     memo.value.insert(new_item);
                     if (item_val < min.value) {
@@ -392,7 +412,7 @@ function onMouseExit(event: MouseEvent) {
             class="fade_other_selected label"
             :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
             :y="axis_data.y_map(current_data_point.y)"
-            :value="current_data_point.y"
+            :value="current_data_point.value"
         >
         </ValueLabel>
         <template v-if="toValue(graph_data.legend_enabled)">
@@ -445,9 +465,10 @@ function onMouseExit(event: MouseEvent) {
                                 <span>{{ telemetry_data?.data_type }}</span>
                             </div>
                             <div class="row">
-                                <span>{{
-                                    current_data_point?.y || 'Missing Data'
+                                <span v-if="current_data_point !== undefined">{{
+                                    current_data_point.value
                                 }}</span>
+                                <span v-else>Missing Data</span>
                             </div>
                         </template>
                         <template v-else>

frontend/src/components/TelemetryValue.vue

@@ -55,6 +55,7 @@ const numeric_data = computed(() => {
             v-bind="$attrs"
             :value="numeric_data"
             :max_width="10"
+            include_span
         ></NumericText>
         <span v-else v-bind="$attrs">
             Cannot Display Data of Type {{ telemetry_data!.data_type }}

frontend/src/components/ValueLabel.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import NumericText from '@/components/NumericText.vue';
+import BooleanText from '@/components/BooleanText.vue';
 
 defineProps<{
     x: number;
     y: number;
-    value: number;
-    class?: string;
+    value: number | boolean;
 }>();
 
 const background_offset = computed(() => 5);
@@ -34,7 +34,7 @@ function update_value_text(text: string) {
 
 <template>
     <rect
-        :class="$props.class"
+        :class="$attrs.class"
         :x="x - background_offset"
         :y="y - y_offset - background_offset"
         :width="label_width + background_offset * 2"
@@ -42,10 +42,16 @@ function update_value_text(text: string) {
     ></rect>
     <text :class="$props.class" ref="label-ref" :x="x" :y="y">
         <NumericText
+            v-if="typeof value == 'number'"
             :value="value"
             :max_width="6"
             @update="update_value_text"
         ></NumericText>
+        <BooleanText
+            v-else-if="typeof value == 'boolean'"
+            :value="value"
+            @update="update_value_text"
+        ></BooleanText>
     </text>
 </template>
 

frontend/src/graph/line.ts

@@ -1,6 +1,7 @@
 export interface Point {
     x: number;
     y: number;
+    value: number | boolean;
 }
 
 export class PointLine {