feat(web-app): set plot options

web-app/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.9.0",
-        "chartjs": "^0.3.24",
+        "chart.js": "^4.4.9",
+        "chartjs-adapter-date-fns": "^3.0.0",
         "dotenv": "^16.5.0",
         "vue": "^3.2.13",
         "vue-chartjs": "^5.3.2",
@@ -371,8 +372,7 @@
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
@@ -2114,7 +2114,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
       "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2122,11 +2121,15 @@
         "pnpm": ">=8"
       }
     },
-    "node_modules/chartjs": {
+    "node_modules/chartjs-adapter-date-fns": {
-      "version": "0.3.24",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chartjs/-/chartjs-0.3.24.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
-      "integrity": "sha512-h6G9qcDqmFYnSWqjWCzQMeOLiypS+pM6Fq2Rj7LPty8Kjx5yHonwwJ7oEHImZpQ2u9Pu36XGYfardvvBiQVrhg==",
+      "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=2.8.0",
+        "date-fns": ">=2.0.0"
+      }
     },
     "node_modules/chokidar": {
       "version": "3.6.0",
@@ -2904,6 +2907,17 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",

web-app/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "axios": "^1.9.0",
-    "chartjs": "^0.3.24",
+    "chart.js": "^4.4.9",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "dotenv": "^16.5.0",
     "vue": "^3.2.13",
     "vue-chartjs": "^5.3.2",

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)",
+        borderColor: Colors.BLUE,
-        backgroundColor: "rgba(255, 99, 132, 0.2)",
+        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)",
+        borderColor: Colors.GREEN,
-        backgroundColor: "rgba(54, 162, 235, 0.2)",
+        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)",
+        borderColor: Colors.RED,
-        backgroundColor: "rgba(255, 206, 86, 0.2)",
+        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",
+    room: "Terrasse",
-    tag: "Bedroom",
+    tag: "Terrasse",
   };
   selected_device = {
-    device: "Door sensor",
+    device: "Shed",
-    tag: "DoorSensor",
+    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,