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

@@ -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 = [];
       });
   }
 

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,
     };
   },
 });