feat: add line chart in Home

frontend/src/components/charts/LineChart.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import { Line } from 'vue-chartjs'
-import type { Device, EnvironmentData } from '@domain/device/core'
-import type { DeviceFactory, DeviceIdFactory } from '@domain/device/factories'
-import { EnvironmentDataFactoryImpl, DeviceFactoryImpl, DeviceIdFactoryImpl } from '@domain/device/factories'
-import { Measure, MeasureUnit } from '@domain/device/core'
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -15,34 +11,12 @@ import {
   Tooltip
 } from 'chart.js'
 
-defineProps<{
-  device: Device
+const { chartData, chartOptions } = defineProps<{
+  chartData: { labels: string[]; datasets: { data: number[] } },
+  chartOptions: Object
 }>()
 
 ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)
-const chartData = {
-  labels: ['January', 'February', 'March'],
-  datasets: [{ data: [40, 20, 12] }]
-}
-
-const chartOptions = {
-  responsive: true
-}
-
-const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
-const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
-
-const sensor = deviceFactory.createSensor(deviceIdFactory.createSensorId('Sensor 1'), '192.168.1.10', 5, [
-  Measure.HUMIDITY,
-  Measure.TEMPERATURE,
-  Measure.PRESSURE
-])
-const environmentDataFactory = new EnvironmentDataFactoryImpl()
-const data: EnvironmentData[] = [
-  environmentDataFactory.createEnvironmentData(sensor.deviceId, 20, Measure.PRESSURE, MeasureUnit.PASCAL),
-  environmentDataFactory.createEnvironmentData(sensor.deviceId, 20, Measure.PRESSURE, MeasureUnit.PASCAL),
-  environmentDataFactory.createEnvironmentData(sensor.deviceId, 20, Measure.PRESSURE, MeasureUnit.PASCAL)
-]
 </script>
 
 <template>

frontend/src/components/devices/SensorData.vue

@@ -2,10 +2,114 @@
 import type { EnvironmentData, Sensor } from '@domain/device/core'
 import { Measure } from '@domain/device/core'
 import { getMeasureAcronym, getMeasureColor } from '@/utils/MeasureUtils'
+import LineChart from '@/components/charts/LineChart.vue'
+import { ref, watch } from 'vue'
 
-defineProps<{
+const { sensorData } = defineProps<{
   sensorData: { sensor: Sensor; values: EnvironmentData[] }
 }>()
+
+const bufferLength: number = 20
+const removeIfFull = (buffer: any[]): any[] => {
+  if (buffer.length > bufferLength) {
+    return buffer.shift()
+  } else {
+    return buffer
+  }
+}
+let temperatureBuffer: number[] = []
+let humidityBuffer: number[] = []
+let pressureBuffer: number[] = []
+let timestampsBuffer: string[] = []
+
+watch(sensorData, (newSensorData) => {
+  newSensorData.values.forEach((value) => {
+    switch (value.measure) {
+      case Measure.TEMPERATURE:
+        removeIfFull(temperatureBuffer)
+        temperatureBuffer.push(value.value)
+        break
+      case Measure.HUMIDITY:
+        removeIfFull(humidityBuffer)
+        humidityBuffer.push(value.value)
+        break
+      case Measure.PRESSURE:
+        removeIfFull(pressureBuffer)
+        pressureBuffer.push(value.value)
+        break
+    }
+    removeIfFull(timestampsBuffer)
+    timestampsBuffer.push(value.timestamp.toLocaleString().split(' ')[1])
+
+    chartData.value = {
+      labels: timestampsBuffer as never[],
+      datasets: [
+        {
+          label: 'Temperature',
+          borderColor: 'red',
+          data: temperatureBuffer as never[]
+        },
+        {
+          label: 'Humidity',
+          borderColor: 'orange',
+          data: humidityBuffer as never[]
+        },
+        {
+          label: 'Pressure',
+          borderColor: 'teal',
+          data: pressureBuffer as never[]
+        }
+      ]
+    }
+  })
+})
+
+const chartData = ref({
+  labels: [],
+  datasets: [
+    {
+      label: 'Temperature',
+      borderColor: 'red',
+      data: []
+    },
+    {
+      label: 'Humidity',
+      borderColor: 'orange',
+      data: [],
+      hidden: true
+    },
+    {
+      label: 'Pressure',
+      borderColor: 'teal',
+      data: [],
+      hidden: true
+    }
+  ]
+})
+
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      // display: false
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      grid: {
+        display: false
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -16,19 +120,23 @@ defineProps<{
     <div class="measures">
       <div v-for="value in sensorData.values">
         <span
-          ><i
-            :style="{
+        ><i
+          :style="{
               color: getMeasureColor(value.measure)
             }"
-            >{{ Measure[value.measure] }}</i
-          >
+        >{{ Measure[value.measure] }}</i
+        >
           :
           {{ value.value }}{{ getMeasureAcronym(value.measureUnit) }}</span
         >
         <span class="timestamp">{{ value.timestamp.toLocaleString().split(' ')[1] }}</span>
       </div>
     </div>
+    <div class="chart-container">
+      <line-chart :chart-data="chartData" :chart-options="chartOptions" />
+    </div>
   </li>
+
 </template>
 
 <style scoped lang="scss">
@@ -42,12 +150,25 @@ li {
   align-items: center;
   gap: 20px;
 
+  @media screen and (max-width: 756px) {
+    flex-wrap: wrap;
+  }
+
+  div.chart-container {
+    flex-grow: 1;
+    height: 100px;
+
+    canvas {
+      max-width: 100%;
+    }
+  }
+
   div.measures {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    gap: 2rem;
+    gap: 10px;
 
     div {
       width: 180px;
@@ -63,7 +184,7 @@ li {
     flex-basis: 200px;
     line-height: 1.5;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (max-width: 756px) {
       flex-basis: 100px;
     }
   }

frontend/src/topics.ts

@@ -15,7 +15,6 @@ export const subscribeToAllTopics = async (): Promise<void> => {
     for (let i = 0; i < res.data.length; i++) {
       useTopicsStore().addTopic(res.data[i]._id.type + '_' + res.data[i]._id.code)
     }
-    console.log('ARR', useTopicsStore().subscribedTopics)
     monitoringSocket.on('subscribed', (): void => {
       console.log('subscribed')