From 871354dfbdba46bce38519670365948e31addbaf Mon Sep 17 00:00:00 2001
From: Emre Gezer <21geem1bif@hft-stuttgart.de>
Date: Wed, 30 Apr 2025 11:24:26 +0200
Subject: [PATCH] added Chart component to frontend, but didnt test
---
frontend/src/components/LiveChart.vue | 72 +++++++++++++++++++++++++++
1 file changed, 72 insertions(+)
create mode 100644 frontend/src/components/LiveChart.vue
diff --git a/frontend/src/components/LiveChart.vue b/frontend/src/components/LiveChart.vue
new file mode 100644
index 0000000..91f2fba
--- /dev/null
+++ b/frontend/src/components/LiveChart.vue
@@ -0,0 +1,72 @@
+
+<template>
+ <Line :date="charData" :options="chartOptions"/>
+</template>
+
+
+<script setup>
+import { Line } from 'vue-chartjs'
+import {
+ Chart as ChartJS,
+ Title,
+ Tooltip,
+ Legend,
+ LineElement,
+ PointElement,
+ LinearScale,
+ CategoryScale
+} from 'chart.js'
+import { ref, reactive } from 'vue'
+
+const chartRef = ref()
+
+ChartJS.register(Title,Tooltip,Legend,LineElement,PointElement,LinearScale,CategoryScale)
+
+const MAX_POINTS = 100
+
+const charData = reactive({
+ labels: [],
+ datasets:[
+ {
+ label: 'co2',
+ data: [],
+ borderColor: 'rgb(255,99,132)',
+ tension: 0.1
+ },
+ {
+ label: 'humidity',
+ data: [],
+ borderColor: 'rgb(255,99,132)',
+ tension: 0.1
+ },
+ {
+ label: 'temperature',
+ data: [],
+ borderColor: 'rgb(255,99,132)',
+ tension: 0.1
+ }
+ ]
+})
+
+const chartOptions = {
+ responsive: true,
+ animation: false,
+ scales:{
+ y:{
+ beginAtZero: true
+ }
+ }
+}
+
+defineExpose({ chartData,
+ updateChart: () => chartRef.value?.chart?.update()
+})defineProps({
+ msg: String,
+})
+
+const count = ref(0)
+
+</script>
+
+<style scoped>
+</style>
--
GitLab