1.8 KiB
web-app
This is a web application that uses Vue.js and Chart.js to display data from a database. The data is fetched from the database using an API and displayed in a chart.
Usage
The web page contains two buttons:
- New measurments: fetch the data from the database and add it to the chart.
- Fetch measurments: ask for a new measurement at the currrent time.
It has too 3 selectors:
- User: select the user to fetch the data from.
- Room: select the room to fetch the data from.
- Device: select the device to fetch the data from.
The chart is updated when the web page is loaded with default values for the selectors.
The chart can be updated by clicking on the New measurments button after selecting the user, room and device. But, the application doesn't care if the combination of user, room and device is valid or not. It will just fetch the data from the database and plot it on the chart.
Environment setup
Install Node.js version v22.15.0 from Node.js (LTS version).
Verify the installation by running the following command in your terminal:
node --version
npm --version
With the following output:
v22.15.0
10.9.2
Then install the project dependencies by running:
npm install
Setup the environment:
linux:
export VUE_APP_REST_USER=
export VUE_APP_REST_PASSWORD=
export VUE_APP_REST_URL=
export VUE_APP_REST_PAGE=
windows:
# use wsl ...
Compile and run for development
npm run serve
Compile and minifie for production
npm run build
Links
See Configuration Reference.
See Vue.js.
See chartjs.
See vue-chartjs.