feat(web-app): set plot options

web-app/src/Measures/Serie.ts

@@ -1,8 +1,10 @@
 import { TEMPERATURE, HUMIDITY, TYPE, VALUE } from "../const";
 
+import { Colors } from "./Utils";
+
 export class Serie {
   private _type: string;
-  private _data: { time: number; value: number }[];
+  private _data: { time: number; value: Date }[];
 
   private _user: string;
   private _room: string;
@@ -10,7 +12,7 @@ export class Serie {
 
   constructor(
     type: string,
-    data: { time: number; value: number }[],
+    data: { time: number; value: Date }[],
     user: string,
     room: string,
     device: string
@@ -39,9 +41,10 @@ export class Serie {
         data: this._data.map((v: any) => {
           return { x: v.time, y: v.value };
         }),
-        borderColor: "rgba(255, 99, 132, 1)",
-        backgroundColor: "rgba(255, 99, 132, 0.2)",
+        borderColor: Colors.BLUE,
+        backgroundColor: Colors.BLUE,
         borderWidth: 1,
+        yAxisID: TEMPERATURE,
       };
     } else if (this._type === HUMIDITY) {
       return {
@@ -49,9 +52,10 @@ export class Serie {
         data: this._data.map((v: any) => {
           return { x: v.time, y: v.value };
         }),
-        borderColor: "rgba(54, 162, 235, 1)",
-        backgroundColor: "rgba(54, 162, 235, 0.2)",
+        borderColor: Colors.GREEN,
+        backgroundColor: Colors.GREEN,
         borderWidth: 1,
+        yAxisID: HUMIDITY,
       };
     } else {
       return {
@@ -59,9 +63,10 @@ export class Serie {
         data: this._data.map((v: any) => {
           return { x: v.time, y: v.value };
         }),
-        borderColor: "rgba(255, 206, 86, 1)",
-        backgroundColor: "rgba(255, 206, 86, 0.2)",
+        borderColor: Colors.RED,
+        backgroundColor: Colors.RED,
         borderWidth: 1,
+        yAxisID: TEMPERATURE,
       };
     }
   }

web-app/src/Measures/TimeSeriesManager.ts

@@ -12,12 +12,12 @@ export class TimeSeriesManager {
     tag: "remi",
   };
   selected_room = {
-    room: "Bedroom",
-    tag: "Bedroom",
+    room: "Terrasse",
+    tag: "Terrasse",
   };
   selected_device = {
-    device: "Door sensor",
-    tag: "DoorSensor",
+    device: "Shed",
+    tag: "Shed",
   };
 
   user_options = [

web-app/src/Measures/Utils.ts

@@ -0,0 +1,18 @@
+export const Colors = {
+  RED: "rgb(255, 99, 132)", // Red
+  LIGHT_RED: "rgba(255, 99, 132, 0.2)",
+
+  BLUE: "rgb(54, 162, 235)", // Blue
+  LIGHT_BLUE: "rgba(54, 162, 235, 0.2)",
+
+  YELLOW: "rgb(255, 206, 86)", // Yellow
+  LIGHT_YELLOW: "rgba(255, 206, 86, 0.2)",
+
+  GREEN: "rgb(56, 193, 114)", // Green
+  DARK_GREEN: "rgb(45, 153, 91)",
+
+  ORANGE: "rgb(246, 153, 63)", // Orange
+  DARK_ORANGE: "rgb(230, 126, 34)",
+
+  DARK_BLUE: "rgb(39, 121, 189)", // Dark Blue
+};

web-app/src/components/ChartComponent.vue

@@ -12,6 +12,7 @@
       <div v-else class="no-data-state">No data to display</div>
     </div>
   </div>
+  <br />
 </template>
 
 <script lang="ts">
@@ -23,13 +24,23 @@ import {
   LineElement,
   Tooltip,
   Legend,
+  TimeScale,
 } from "chart.js";
+import "chartjs-adapter-date-fns"; // Import the date adapter
 import { Scatter } from "vue-chartjs";
 import { Serie } from "../Measures/Serie";
 import { TimeSeriesManager } from "../Measures/TimeSeriesManager";
+import { Colors } from "../Measures/Utils";
 
 // Register Chart.js components
-ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend);
+ChartJS.register(
+  LinearScale,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Legend,
+  TimeScale
+);
 
 export default defineComponent({
   name: "ChartComponent",
@@ -37,10 +48,6 @@ export default defineComponent({
     Scatter,
   },
   props: {
-    series: {
-      type: Array as PropType<Serie[]>, // Use PropType to specify array of Serie
-      default: () => [],
-    },
     manager: {
       type: Object as PropType<TimeSeriesManager>,
       required: true,
@@ -67,7 +74,61 @@ export default defineComponent({
 
     const chartOptions = {
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: true,
+      scales: {
+        x: {
+          type: "time",
+          position: "bottom",
+          title: {
+            text: "Time",
+            display: true,
+          },
+          time: {
+            unit: "second", // Adjust the unit as needed (e.g., "minute", "hour", "day")
+            displayFormats: {
+              second: "HH:mm:ss", // Format for seconds
+              minute: "HH:mm", // Format for minutes
+              hour: "MMM dd HH:mm", // Format for hours
+              day: "MMM dd", // Format for days
+            },
+          },
+          grid: {
+            drawOnChartArea: true, // only want the grid lines for one axis to show up
+          },
+        },
+        temperature: {
+          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+          position: "left",
+          title: {
+            text: "Temperature [°C]",
+            display: true,
+          },
+          ticks: {
+            color: Colors.BLUE,
+          },
+          grid: {
+            drawOnChartArea: true, // only want the grid lines for one axis to show up
+          },
+          min: -10,
+          max: 40,
+        },
+        humidity: {
+          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+          position: "right",
+          title: {
+            text: "Humidity [%]",
+            display: true,
+          },
+          ticks: {
+            color: Colors.GREEN,
+          },
+          grid: {
+            drawOnChartArea: true, // only want the grid lines for one axis to show up
+          },
+          min: 0,
+          max: 100,
+        },
+      },
     };
 
     return {

web-app/src/components/ControlPanel.vue

@@ -61,14 +61,6 @@ import { TimeSeriesManager } from "@/Measures/TimeSeriesManager";
 export default defineComponent({
   name: "ControlPanel",
   props: {
-    showTemperature: {
-      type: Boolean,
-      required: true,
-    },
-    showHumidity: {
-      type: Boolean,
-      required: true,
-    },
     manager: {
       type: TimeSeriesManager,
       required: true,