initial graph

frontend/src/views/HomeView.vue

@@ -1,30 +1,25 @@
 <script setup lang="ts">
-import { useTelemetry } from '@/composables/telemetry'
-import { useWebsocket } from '@/composables/websocket'
-
-const { data: sin_data, error: sin_error } = useTelemetry("simple_producer/sin");
-const { data: cos_data, error: cos_error } = useTelemetry("simple_producer/cos");
+import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket'
+import { provide } from 'vue'
+import Graph from '@/components/Graph.vue'
+import Axis from '@/components/Axis.vue'
+import Line from '@/components/Line.vue'
 
 const websocket = useWebsocket();
-
-let sin_value = websocket.value.listen_to_telemetry(sin_data);
-let cos_value = websocket.value.listen_to_telemetry(cos_data);
+provide(WEBSOCKET_SYMBOL, websocket);
 
 </script>
 
 <template>
-  <main>
-    <div v-if="sin_value">
-      {{ sin_data.name }} ({{ sin_data.data_type }}) = {{ sin_value[sin_data.data_type] }}
-    </div>
-    <div v-if="sin_error">
-      {{ sin_error }}
-    </div>
-    <div v-if="cos_value">
-      {{ cos_data.name }} ({{ cos_data.data_type }}) = {{ cos_value[cos_data.data_type] }}
-    </div>
-    <div v-if="cos_error">
-      {{ cos_error }}
-    </div>
-  </main>
+    <main>
+        <Graph :width=1500 :height=800>
+            <Axis>
+                <Line data="simple_producer/sin" color="#FF0000"></Line>
+                <Line data="simple_producer/cos" color="#00FF00"></Line>
+            </Axis>
+        </Graph>
+    </main>
 </template>
+
+<style>
+</style>