feat(ws): stream data to line chart

frontend/src/App.vue

@@ -1,30 +1,79 @@
 <script setup>
-  import HelloWorld from './components/HelloWorld.vue';
+  import LineChart from './components/LineChart.vue';
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import { tryCatchSync } from './utils/tryCatch.js';
+
+  const data = ref([]); // Handles data
+  const connected = ref(false); // Stores connection state
+  let socket = null;
+
+  // Start WS connection
+  onMounted(connectWebSocket);
+  onUnmounted(() => {
+    // Close socket when component gets unmounted
+    if (socket) socket.close();
+  });
+
+  function connectWebSocket() {
+    // Connect to WebSocket server
+    socket = new WebSocket('/ws');
+
+    // Event on connection
+    socket.onopen = () => {
+      connected.value = true;
+      console.log('Connected to websocker');
+    };
+
+    // Event on data received
+    socket.onmessage = (event) => {
+      // Try to parse socket message
+      const { data: message, error: parseErr } = tryCatchSync(() => JSON.parse(event.data));
+      if (parseErr) {
+        console.error(`[WS] Error while parsing `, parseErr);
+      }
+
+      // Load data initial data, or update it
+      switch (message.type) {
+        case 'history':
+          // Initial message with history data
+          data.value = message.data;
+          break;
+        case 'update':
+          // Update message, with new entry
+          data.value.push(message.data);
+
+          // Keep only 15 entries
+          if (data.value.length > 15) {
+            data.value = data.value.slice(-15);
+          }
+          break;
+      }
+    };
+
+    // Event on socket close
+    socket.onclose = () => {
+      connected.value = false;
+      console.warn('[WS] Disconnected, trying to reconnect in 5 seconds ...');
+      setTimeout(connectWebSocket, 5000);
+    };
+
+    // On socket error
+    socket.onerror = (err) => {
+      console.error('[WS] Error: ', err);
+      socket.close();
+    };
+  }
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <main class="container">
+    <h1 class="text-primary">Live data from WebSocket</h1>
+    <LineChart :data="data" />
+  </main>
 </template>
 
 <style scoped>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.vue:hover {
-    filter: drop-shadow(0 0 2em #42b883aa);
+  h1 {
+    text-align: center;
   }
 </style>

frontend/src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-  import { ref } from 'vue';
-
-  defineProps({
-    msg: String,
-  });
-
-  const count = ref(0);
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
-    official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-  .read-the-docs {
-    color: #888;
-  }
-</style>

frontend/src/components/LineChart.vue

@@ -0,0 +1,105 @@
+<script setup>
+  /**
+   * LineChart.vue
+   *
+   * A reusable line chart component using Chart.js via vue-chartjs.
+   * Accepts a list of data points as props with the structure:
+   * [{ number: 42, timestamp: 1720346500000 }]
+   */
+
+  import { Line } from 'vue-chartjs';
+  import {
+    Chart as ChartJS,
+    LineElement,
+    PointElement,
+    LinearScale,
+    TimeScale,
+    Title,
+    Tooltip,
+    Legend,
+  } from 'chart.js';
+  import 'chartjs-adapter-date-fns'; // Enables timestamp formatting with date-fns
+  import { computed } from 'vue';
+
+  // Register required chart.js components
+  ChartJS.register(LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip, Legend);
+
+  // Define props - expects `data` with { number, timestamp }
+  const props = defineProps({
+    data: {
+      type: Array,
+      required: true,
+      validator: (value) =>
+        value.every((p) => typeof p.number === 'number' && typeof p.timestamp === 'number'),
+    },
+  });
+
+  // Create reactive chart data computed from data prop
+  const chartData = computed(() => ({
+    datasets: [
+      {
+        label: 'Real time generated number',
+        data: props.data.map((p) => ({
+          x: p.timestamp,
+          y: p.number,
+        })),
+        borderColor: '#42b983',
+        backgroundColor: 'rgba(66, 185, 131, 0.15)',
+        pointRadius: 3,
+        tension: 0.4, // smooth curve
+        fill: true,
+      },
+    ],
+  }));
+
+  // Define chart configuration options
+  const chartOptions = {
+    animation: false,
+    responsive: true,
+    maintainAspectRatio: false, // allow flexible height
+    scales: {
+      x: {
+        type: 'time',
+        time: {
+          tooltipFormat: 'HH:mm:ss',
+          displayFormats: {
+            second: 'HH:mm:ss',
+            minute: 'HH:mm',
+          },
+        },
+        title: {
+          display: true,
+          text: 'Time',
+        },
+      },
+      y: {
+        beginAtZero: true,
+        min: 0,
+        max: 100,
+        title: {
+          display: true,
+          text: 'Number value',
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+      },
+      tooltip: {
+        callbacks: {
+          // Format tooltip values
+          label: (context) => `Value: ${context.parsed.y}`,
+        },
+      },
+    },
+  };
+</script>
+
+<template>
+  <!-- Chart container with max height -->
+  <div style="height: 600px">
+    <Line :data="chartData" :options="chartOptions" />
+  </div>
+</template>

frontend/src/style.css

@@ -1,79 +1,18 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  background-color: #212437;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+.text-primary {
+  color: oklch(92.8% 0.006 264.531);
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+.text-secondary {
+  color: oklch(70.7% 0.022 261.325);
 }
 
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
+.container {
+  width: 100%;
+  max-width: 1140px;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

frontend/src/utils/tryCatch.js

@@ -0,0 +1,9 @@
+// function for sync
+export function tryCatchSync(callback) {
+  try {
+    const data = callback();
+    return { data, error: null };
+  } catch (error) {
+    return { data: null, error: error };
+  }
+}