From 83008b42af7860bd9710ae2bd8950064fb84eae4 Mon Sep 17 00:00:00 2001
From: fastium <yannsierro.pro@gmail.com>
Date: Sat, 14 Jun 2025 17:08:23 +0200
Subject: [PATCH] feat(web-app): control wrong multiselect input

- handle wraong multiselect input with a text which says "No data to
display"
---
 web-app/src/Measures/TimeSeriesManager.ts |  8 ++------
 web-app/src/components/ChartComponent.vue | 10 +++++++++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web-app/src/Measures/TimeSeriesManager.ts b/web-app/src/Measures/TimeSeriesManager.ts
index 525b1c4..53a1f37 100644
--- a/web-app/src/Measures/TimeSeriesManager.ts
+++ b/web-app/src/Measures/TimeSeriesManager.ts
@@ -1,7 +1,6 @@
-import { Prop } from "vue";
 import { Serie } from "./Serie";
 import { HttpClient } from "../Services/HttpClient";
-import { TEMPERATURE, HUMIDITY, TYPE, VALUE } from "../const";
+import { TEMPERATURE, HUMIDITY, TYPE } from "../const";
 import { ref } from "vue";
 
 export class TimeSeriesManager {
@@ -57,8 +56,6 @@ export class TimeSeriesManager {
     },
   ];
 
-  error = ref(false);
-  loading = ref("");
 
   series = ref<Serie[]>([]);
 
@@ -125,12 +122,11 @@ export class TimeSeriesManager {
           this.selected_room.room,
           this.selected_device.device
         );
-
         this.series.value = [temperatureSerie, humiditySerie];
       })
       .catch((error) => {
         console.error("Error fetching time series data:", error);
-        throw error; // Re-throw to allow calling code to handle it
+        this.series.value = [];
       });
   }
 
diff --git a/web-app/src/components/ChartComponent.vue b/web-app/src/components/ChartComponent.vue
index 30b0869..171bf44 100644
--- a/web-app/src/components/ChartComponent.vue
+++ b/web-app/src/components/ChartComponent.vue
@@ -1,6 +1,6 @@
 <!-- src/components/ChartComponent.vue -->
 <template>
-  <div v-if="chartData.datasets.length > 0" class="chart-wrapper">
+  <div v-if="isTimeSeries" class="chart-wrapper">
     <Scatter data-cy="main-chart" :data="chartData" :options="chartOptions" />
   </div>
   <div v-else class="no-data-state" data-cy="no-data-display">
@@ -127,9 +127,17 @@ export default defineComponent({
       },
     };
 
+    const isTimeSeries = computed(() => {
+      return (
+        props.manager.series.value &&
+        (props.manager.series.value as Serie[]).length > 0
+      );
+    });
+
     return {
       chartOptions,
       chartData,
+      isTimeSeries,
     };
   },
 });