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
+};