Klagarge/MSE-SoftwEng
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat(web-app): set plot options

Browse Source
This commit is contained in:
fastium
2025-05-20 13:09:00 +02:00
parent 803f93041b
commit c9be1ba772
7 changed files with 127 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web-app/package-lock.json generated
View File

@@ -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",
"peer": true
"license": "MIT"
},
"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": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/chartjs/-/chartjs-0.3.24.tgz",
"integrity": "sha512-h6G9qcDqmFYnSWqjWCzQMeOLiypS+pM6Fq2Rj7LPty8Kjx5yHonwwJ7oEHImZpQ2u9Pu36XGYfardvvBiQVrhg==",
"license": "MIT"
"node_modules/chartjs-adapter-date-fns": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
"integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
"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",

3
web-app/package.json
View File

@@ -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",

21
web-app/src/Measures/Serie.ts
View File

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

8
web-app/src/Measures/TimeSeriesManager.ts
View File

@@ -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 = [

18
web-app/src/Measures/Utils.ts Normal file
View File

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

73
web-app/src/components/ChartComponent.vue
View File

@@ -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 {

8
web-app/src/components/ControlPanel.vue
View File

@@ -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,