diff --git a/docs/brainstorm/Questions Enquete.md b/docs/brainstorm/Questions Enquete.md index 5fc8bc8..e32bd27 100644 --- a/docs/brainstorm/Questions Enquete.md +++ b/docs/brainstorm/Questions Enquete.md @@ -9,7 +9,7 @@ Questions shouldn't be able to measure using sensors. 3 possible answers. - How clean is the study area? (clean, normal, disgusting). - What do you think of the temperature in the study area? (hot, perfect, cold). - How crowded would you say the study area is?(not at all, its fine, really crowded). -- Is there enough help available? (no, decently, yes). +- Is there enough help available on the 5th floor? (no, decently, yes). ### Feedback questions diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index d5bce51..3e6e359 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -52,10 +52,10 @@ class Graph { this.humiArray.push(value); break; case "eCO2": - this.eco2Array.push(value); + this.eco2Array.push(value / 10); break; case "TVOC": - this.tvocArray.push(value); + this.tvocArray.push(value / 10); break; default: console.error("Invalid type"); @@ -64,16 +64,11 @@ class Graph { updateGraph() { let update = { - x: [[this.timeArray]], - y: [ - [this.tempArray], - [this.humiArray], - [this.eco2Array], - [this.tvocArray], - ], + x: [this.timeArray], + y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - - Plotly.relayout(this.id, update); + + Plotly.update(this.id, update); } } @@ -126,11 +121,12 @@ class LiveGraph extends Graph { class DataProcessor { constructor(data) { this.data = data; + this.graph; } // You can add more filtering methods based on different criteria if needed update(data) { this.data = data; - this.graph; + console.log("Data updated"); console.log(data); } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 8058f94..e07f628 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,6 +1,7 @@ // Sample data - you can replace this with your actual dataset const data = []; processor = new DataProcessor(); +let link; // Function to create checkbox with label function createCheckBox(id, label) { @@ -16,106 +17,111 @@ function createCheckBox(id, label) { return { checkbox, checkboxLabel }; } -// Function to ceate filter container and all the input elements -function createFilterContainer() { - // Create HTML input elements for user input - const container = document.createElement("div"); - container.setAttribute("class", "container"); +// Create HTML input elements for user input +const container = document.createElement("div"); +container.setAttribute("class", "container"); - const dataTypesContainer = document.createElement("div"); - dataTypesContainer.setAttribute("class", "data-types"); +const dataTypesContainer = document.createElement("div"); +dataTypesContainer.setAttribute("class", "data-types"); - const temperatureCheckbox = createCheckBox("temperature", "Temperature"); - const humidityCheckbox = createCheckBox("humidity", "Humidity"); - const eco2Checkbox = createCheckBox("eco2", "eCO2"); - const tvocCheckbox = createCheckBox("tvoc", "TVOC"); +const temperatureCheckbox = createCheckBox("temperature", "Temperature"); +const humidityCheckbox = createCheckBox("humidity", "Humidity"); +const eco2Checkbox = createCheckBox("eco2", "eCO2"); +const tvocCheckbox = createCheckBox("tvoc", "TVOC"); - dataTypesContainer.appendChild(temperatureCheckbox.checkbox); - dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); - dataTypesContainer.appendChild(humidityCheckbox.checkbox); - dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); - dataTypesContainer.appendChild(eco2Checkbox.checkbox); - dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); - dataTypesContainer.appendChild(tvocCheckbox.checkbox); - dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); - container.appendChild(dataTypesContainer); +dataTypesContainer.appendChild(temperatureCheckbox.checkbox); +dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); +dataTypesContainer.appendChild(humidityCheckbox.checkbox); +dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); +dataTypesContainer.appendChild(eco2Checkbox.checkbox); +dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); +dataTypesContainer.appendChild(tvocCheckbox.checkbox); +dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); +container.appendChild(dataTypesContainer); - const filterButton = document.createElement("button"); - filterButton.textContent = "Filter Data"; - filterButton.setAttribute("class", "filter-button"); - filterButton.addEventListener("click", () => { - const startDate = new Date(document.getElementById("start-date").value); - const endDate = new Date(document.getElementById("end-date").value); - const selectedNodes = document - .getElementById("node-input") - .value.split(",") - .map((node) => node.trim()); +const filterButton = document.createElement("button"); +filterButton.textContent = "Filter Data"; +filterButton.setAttribute("class", "filter-button"); +filterButton.addEventListener("click", () => { + const startDate = document.getElementById("start-date").value + const endDate = document.getElementById("end-date").value + const selectedNodes = document + .getElementById("node-input") + .value.split(",") + .map((node) => node.trim()); - const selectedFields = []; - const checkboxes = [ - temperatureCheckbox, - humidityCheckbox, - eco2Checkbox, - tvocCheckbox, - ]; - checkboxes.forEach((checkbox) => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } - }); - - const filteredData = filterData( - data, - startDate, - endDate, - selectedNodes, - selectedFields - ); - console.log(filteredData); + const selectedFields = []; + const checkboxes = [ + temperatureCheckbox, + humidityCheckbox, + eco2Checkbox, + tvocCheckbox, + ]; + checkboxes.forEach((checkbox) => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } }); - const dateFilter = document.createElement("div"); - dateFilter.setAttribute("class", "date-filter"); + const filteredData = [ + startDate, + endDate, + selectedNodes, + selectedFields + ]; + console.log(filteredData); + console.log(startDate, endDate, selectedNodes); - const startDateInput = document.createElement("input"); - startDateInput.setAttribute("type", "datetime-local"); - startDateInput.setAttribute("id", "start-date"); - startDateInput.setAttribute("class", "input-field"); + generateLink(startDate, endDate, selectedNodes); + fetchData(); +}); - const endDateInput = document.createElement("input"); - endDateInput.setAttribute("type", "datetime-local"); - endDateInput.setAttribute("id", "end-date"); - endDateInput.setAttribute("class", "input-field"); +const dateFilter = document.createElement("div"); +dateFilter.setAttribute("class", "date-filter"); - dateFilter.appendChild(startDateInput); - dateFilter.appendChild(endDateInput); - container.appendChild(dateFilter); +const startDateInput = document.createElement("input"); +startDateInput.setAttribute("type", "datetime-local"); +startDateInput.setAttribute("id", "start-date"); +startDateInput.setAttribute("class", "input-field"); - const nodeFilter = document.createElement("div"); - nodeFilter.setAttribute("class", "node-filter"); +const endDateInput = document.createElement("input"); +endDateInput.setAttribute("type", "datetime-local"); +endDateInput.setAttribute("id", "end-date"); +endDateInput.setAttribute("class", "input-field"); - const nodeInput = document.createElement("input"); - nodeInput.setAttribute("type", "text"); - nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); - nodeInput.setAttribute("id", "node-input"); - nodeInput.setAttribute("class", "input-field"); +dateFilter.appendChild(startDateInput); +dateFilter.appendChild(endDateInput); +container.appendChild(dateFilter); - nodeFilter.appendChild(nodeInput); - container.appendChild(nodeFilter); +const nodeFilter = document.createElement("div"); +nodeFilter.setAttribute("class", "node-filter"); - container.appendChild(filterButton); +const nodeInput = document.createElement("input"); +nodeInput.setAttribute("type", "text"); +nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); +nodeInput.setAttribute("id", "node-input"); +nodeInput.setAttribute("class", "input-field"); - document.body.appendChild(container); -} +nodeFilter.appendChild(nodeInput); +container.appendChild(nodeFilter); + +container.appendChild(filterButton); + +document.body.appendChild(container); // Function to get the link for the get request -function getLink(startDate, endDate, node) { - return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + - "&dateEnd=" + endDate.toISOString() + - "&node=" + node; +function generateLink(dateStart, dateEnd, node) { + const baseUrl = 'http://145.92.8.114/getMeasurements'; + const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); + const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); + + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}`; + + console.log(link); } +processor.makeGraph(); // Get request to fetch data from the server -function fetchData(link) { +function fetchData() { fetch(link) .then((response) => { if (!response.ok) { @@ -124,14 +130,10 @@ function fetchData(link) { return response.json(); }) .then((data) => { - createFilterContainer(); processor.update(data); - processor.makeGraph(); - processor.updateGraph(dateStart, dateEnd); + processor.updateGraph(); }) .catch((error) => { console.error("Error fetching data:", error); }); -} - -fetchData(); \ No newline at end of file +} \ No newline at end of file diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 6e267a1..46dad55 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -30,19 +30,24 @@
-

Question 1

+

Question 1: How clean are the toilets?

-

Question 2

+

Question 2: How clean is the study area?

-

Question 3

+

Question 3: What do you think of the temperature in the study area?

+

Question 4: How crowded would you say the study area is?

+ + +

Question 5: Is there enough help available on the 5th floor?

+ +
- - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index a1e301b..356d3e0 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -1,27 +1,27 @@ -// class QuestionCreationClass { -// constructor(data, label) { -// this.data = data; -// this.label = label; -// } +class QuestionCreationClass { + constructor(data, label) { + this.data = data; + this.label = label; + } -// get questionData() { -// return { -// labels: this.label, -// datasets: [{ -// label: 'Responses', -// data: this.data, -// backgroundColor: [ -// 'rgba(255, 99, 132, 0.2)', -// 'rgba(54, 162, 235, 0.2)', -// 'rgba(255, 206, 86, 0.2)' -// ], -// borderColor: [ -// 'rgba(255, 99, 132, 1)', -// 'rgba(54, 162, 235, 1)', -// 'rgba(255, 206, 86, 1)' -// ], -// borderWidth: 1 -// }] -// }; -// } -// } \ No newline at end of file + get questionData() { + return { + labels: this.label, + datasets: [{ + label: 'Responses', + data: this.data, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }; + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 747707a..8bdaafc 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,78 +1,27 @@ -class QuestionCreationClass { - constructor(data, label) { - this.data = data; - this.label = label; - } +let dummydata1 = [40, 30, 20]; +let questionOptionsDummy1 = ['disgusting','clean', 'fine']; - get questionData() { - return { - labels: this.label, - datasets: [{ - label: 'Responses', - data: this.data, - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] - }; - } -} +let dummydata2 = [25, 35, 40]; +let questionOptionsDummy2 = ['disgusting', 'clean', 'normal']; -const question1Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [40, 30, 20], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] -}; +let dummydata3 = [30, 20, 20]; +let questionOptionsDummy3 = ['cold', 'perfect', 'hot']; -let dummydata = [30, 20, 20]; -let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; +let dummydata4 = [30, 20, 20]; +let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; -const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); +let dummydata5 = [30, 20, 20]; +let questionOptionsDummy5 = ['no','yes', 'decently']; -const question2Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [25, 35, 40], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] -}; +const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) +const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) +const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3); +const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4); +const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5); -// Chart configurations for each question const chartConfig1 = { type: 'pie', - data: question1Data, + data: question1Data.questionData, options: { responsive: true, legend: { @@ -91,7 +40,7 @@ const chartConfig1 = { const chartConfig2 = { type: 'pie', - data: question2Data, + data: question2Data.questionData, options: { responsive: true, legend: { @@ -127,6 +76,44 @@ const chartConfig3 = { } }; +const chartConfig4 = { + type: 'pie', + data: question4Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 4 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +const chartConfig5 = { + type: 'pie', + data: question5Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 5 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); const myChart1 = new Chart(ctx1, chartConfig1); @@ -137,3 +124,8 @@ const myChart2 = new Chart(ctx2, chartConfig2); const ctx3 = document.getElementById('chart3').getContext('2d'); const myChart3 = new Chart(ctx3, chartConfig3); +const ctx4 = document.getElementById('chart4').getContext('2d'); +const myChart4 = new Chart(ctx4, chartConfig4); + +const ctx5 = document.getElementById('chart5').getContext('2d'); +const myChart5 = new Chart(ctx5, chartConfig5); diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index e4e367a..f00eca5 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -182,17 +182,19 @@ body { } .plotly-container { - + width: 100%; float: bottom; - margin: auto; padding: 1vw; align-items: center; justify-content: center; display: flex; - width: 20vw; - } -* + +.js-plotly-plot { + width: 90%; + height: 100%; +} + .disabled { opacity: 0; height: 0;