From 036fafdd413291769dd05d36d0e9580bfa834f9b Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Wed, 22 Nov 2023 14:42:54 +0000
Subject: [PATCH 01/12] npm install chart.js
---
package-lock.json | 17 +++++++++++++++++
package.json | 1 +
2 files changed, 18 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index f3e54f4..29d6257 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^1.6.2",
"bootstrap": "^5.3.2",
+ "chart.js": "^4.4.0",
"vue": "^3.3.4"
},
"devDependencies": {
@@ -385,6 +386,11 @@
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
+ "node_modules/@kurkle/color": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+ },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -543,6 +549,17 @@
"@popperjs/core": "^2.11.8"
}
},
+ "node_modules/chart.js": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
+ "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=7"
+ }
+ },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
diff --git a/package.json b/package.json
index 2407abc..3332400 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^1.6.2",
"bootstrap": "^5.3.2",
+ "chart.js": "^4.4.0",
"vue": "^3.3.4"
},
"devDependencies": {
--
GitLab
From b5849794ed11b54ac4a9a4ebc4f3f66ab6bb5c56 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 00:16:04 +0000
Subject: [PATCH 02/12] Create basic multiline chart
---
src/App.vue | 98 ++++++++++++++++++++-----------
src/components/MultiLineChart.vue | 69 ++++++++++++++++++++++
2 files changed, 133 insertions(+), 34 deletions(-)
create mode 100644 src/components/MultiLineChart.vue
diff --git a/src/App.vue b/src/App.vue
index c0e49b9..20ce239 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,49 +1,79 @@
<script setup>
-import ValueTabs from "./components/ValueTabs.vue"
+import ValueTabs from "./components/ValueTabs.vue";
+</script>
+
+<script>
+import MultiLineChart from './components/MultiLineChart.vue';
+
+export default {
+ components: {
+ MultiLineChart
+ },
+ data() {
+ return {
+ soilData: {
+ nitrogen: [10, 22, 15, 18, 25, 30, 35],
+ phosphorus: [5, 8, 10, 12, 20, 22, 25],
+ potassium: [8, 12, 13, 17, 23, 28, 33]
+ }
+ }
+ }
+}
</script>
<template>
- <header>
- <img alt="Vue logo" class="logo" src="./assets/NanoPatch.png" />
- <!-- <div class="greetings">
- <h1 class="green">NanoPatch</h1>
- </div> -->
- <!-- <div class="wrapper">
- </div> -->
- </header>
-
- <main>
- <ValueTabs />
- </main>
+ <div class="app-container">
+ <div class="top-section">
+ <div class="logo-container">
+ <img alt="Vue logo" src="./assets/NanoPatch.png" />
+ </div>
+ <div class="value-tabs-container">
+ <ValueTabs />
+ </div>
+ </div>
+ <div class="bottom-section">
+ <MultiLineChart :chart-data="soilData" />
+ </div>
+ </div>
+
</template>
<style scoped>
-header {
- line-height: 1.5;
+.app-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
}
-.logo {
- display: block;
- margin: 0 auto 2rem;
- max-width: 75%;
- max-height: 75%;
+.top-section {
+ display: flex;
+ flex: 1;
+ /* position: relative; */
}
-@media (min-width: 1024px) {
- header {
- display: flex;
- place-items: center;
- padding-right: calc(var(--section-gap) / 2);
- }
+.logo-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- .logo {
- margin: 0 2rem 0 0;
- }
+.logo-container img {
+ width: 35vw;
+ height: auto;
+}
- header .wrapper {
- display: flex;
- place-items: flex-start;
- flex-wrap: wrap;
- }
+.value-tabs-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.bottom-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 0.5;
}
</style>
diff --git a/src/components/MultiLineChart.vue b/src/components/MultiLineChart.vue
new file mode 100644
index 0000000..b36c45d
--- /dev/null
+++ b/src/components/MultiLineChart.vue
@@ -0,0 +1,69 @@
+<template>
+ <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <canvas ref="multiLineChart"></canvas>
+ </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiLineChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+ datasets: [
+ {
+ label: 'Nitrogen',
+ backgroundColor: 'rgba(255, 99, 132, 0.2)',
+ borderColor: 'rgba(255, 99, 132, 1)',
+ data: this.chartData.nitrogen,
+ fill: false,
+ },
+ {
+ label: 'Phosphorus',
+ backgroundColor: 'rgba(54, 162, 235, 0.2)',
+ borderColor: 'rgba(54, 162, 235, 1)',
+ data: this.chartData.phosphorus,
+ fill: false,
+ },
+ {
+ label: 'Potassium',
+ backgroundColor: 'rgba(255, 206, 86, 0.2)',
+ borderColor: 'rgba(255, 206, 86, 1)',
+ data: this.chartData.potassium,
+ fill: false,
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'ppm'
+ }
+ }
+ }
+ }
+ });
+ }
+}
+</script>
+
+<style scoped>
+.chart-container {
+ /* Your styles here */
+}
+</style>
+
\ No newline at end of file
--
GitLab
From be0367c06e52355052f4e8f80f794888a8521e64 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 00:16:21 +0000
Subject: [PATCH 03/12] Disable default main.css media formatting
---
src/assets/main.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd..b967604 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -21,7 +21,7 @@ a,
}
}
-@media (min-width: 1024px) {
+/* @media (min-width: 1024px) {
body {
display: flex;
place-items: center;
@@ -32,4 +32,4 @@ a,
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
-}
+} */
--
GitLab
From edfe01a3e387096ced704c2d0fdfb52be1d0f798 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 00:16:38 +0000
Subject: [PATCH 04/12] ValueTabs allBoxes class
---
src/components/ValueTabs.vue | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index c40d44a..0943e68 100644
--- a/src/components/ValueTabs.vue
+++ b/src/components/ValueTabs.vue
@@ -33,7 +33,7 @@ export default {
</script>
<template>
- <div style="font-size: 40px; width: fit-content;">
+ <div class="allBoxes">
<div>
<div class="valueBox">
Nitrogen (N):
@@ -64,6 +64,13 @@ export default {
</template>
<style scoped>
+.allBoxes{
+ /* font-size: 40px; */
+ font-size: 2vw;
+ width: fit-content;
+ /* padding-top: 5%; */
+}
+
.valueBox {
display: flex;
padding-bottom: 2%;
--
GitLab
From c3ca1d81f02586816652fba27f399c3a3178ea8b Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 00:36:36 +0000
Subject: [PATCH 05/12] Rename soilData to npkData
---
src/App.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 20ce239..8d75da5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ export default {
},
data() {
return {
- soilData: {
+ npkData: {
nitrogen: [10, 22, 15, 18, 25, 30, 35],
phosphorus: [5, 8, 10, 12, 20, 22, 25],
potassium: [8, 12, 13, 17, 23, 28, 33]
@@ -32,10 +32,10 @@ export default {
</div>
</div>
<div class="bottom-section">
- <MultiLineChart :chart-data="soilData" />
+ <MultiLineChart :chart-data="npkData" />
+ <MultiLineChart :chart-data="npkData" />
</div>
</div>
-
</template>
<style scoped>
--
GitLab
From 9f8f1b3f96cc3f6e0457993133a086f7f2db3d53 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 00:36:54 +0000
Subject: [PATCH 06/12] Responsive styling for mobile screens
---
src/App.vue | 18 ++++++++++++++++++
src/components/ValueTabs.vue | 7 +++++++
2 files changed, 25 insertions(+)
diff --git a/src/App.vue b/src/App.vue
index 8d75da5..3889b98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -75,5 +75,23 @@ export default {
justify-content: center;
align-items: center;
flex: 0.5;
+ gap: 10px; /* Adds a gap between the Graph components */
+}
+
+/* Responsive adjustments for mobile screens */
+@media (max-width: 768px) {
+ .bottom-section {
+ flex-direction: column; /* Stack the Graph components */
+ gap: 0; /* Removes the gap when stacked vertically */
+ }
+
+ .logo-container img {
+ width: 50vw; /* Adjust logo size for smaller screens */
+ }
+
+ .value-tabs-container {
+ right: 10%;
+ width: 80%;
+ }
}
</style>
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index 0943e68..229c817 100644
--- a/src/components/ValueTabs.vue
+++ b/src/components/ValueTabs.vue
@@ -75,4 +75,11 @@ export default {
display: flex;
padding-bottom: 2%;
}
+
+/* Responsive adjustments for mobile screens */
+@media (max-width: 768px) {
+ .allBoxes{
+ font-size: 1.6vh;
+ }
+}
</style>
--
GitLab
From 97087f6b7f6f62ae3109bf2e52800987d47d2424 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 13:38:42 +0000
Subject: [PATCH 07/12] Add second graph for THM values
---
src/App.vue | 11 +++-
src/components/MultiAxisChart.vue | 86 +++++++++++++++++++++++++++++++
2 files changed, 95 insertions(+), 2 deletions(-)
create mode 100644 src/components/MultiAxisChart.vue
diff --git a/src/App.vue b/src/App.vue
index 3889b98..127809b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,12 @@ import ValueTabs from "./components/ValueTabs.vue";
<script>
import MultiLineChart from './components/MultiLineChart.vue';
+import MultiAxisChart from './components/MultiAxisChart.vue';
export default {
components: {
- MultiLineChart
+ MultiLineChart,
+ MultiAxisChart
},
data() {
return {
@@ -15,6 +17,11 @@ export default {
nitrogen: [10, 22, 15, 18, 25, 30, 35],
phosphorus: [5, 8, 10, 12, 20, 22, 25],
potassium: [8, 12, 13, 17, 23, 28, 33]
+ },
+ thmData: {
+ temperature: [4, 15, 16, 18, 20, 10, 12],
+ humidity: [25, 12, 2, 22, 19, 16, 25],
+ moisture: [8, 12, 13, 33, 23, 28, 10]
}
}
}
@@ -33,7 +40,7 @@ export default {
</div>
<div class="bottom-section">
<MultiLineChart :chart-data="npkData" />
- <MultiLineChart :chart-data="npkData" />
+ <MultiAxisChart :chart-data="thmData" />
</div>
</div>
</template>
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
new file mode 100644
index 0000000..cb9964e
--- /dev/null
+++ b/src/components/MultiAxisChart.vue
@@ -0,0 +1,86 @@
+<template>
+ <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <canvas ref="multiLineChart"></canvas>
+ </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiLineChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+ datasets: [
+ {
+ label: 'Temperature',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+ data: this.chartData.temperature,
+ fill: false,
+ yAxisID: 'y',
+ },
+ {
+ label: 'Humidity',
+ backgroundColor: 'rgba(153, 102, 255, 0.2)',
+ borderColor: 'rgba(153, 102, 255, 1)',
+ data: this.chartData.humidity,
+ fill: false,
+ yAxisID: 'y1',
+ },
+ {
+ label: 'Moisture',
+ backgroundColor: 'rgba(255, 0, 255, 0.2)', // Magenta with transparency
+ borderColor: 'rgba(255, 0, 255, 1)', // Solid magenta
+ data: this.chartData.moisture,
+ fill: false,
+ yAxisID: 'y1',
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: '°C'
+ }
+ },
+ y1: {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ title: {
+ display: true,
+ text: '%'
+ },
+
+ // grid line settings
+ grid: {
+ drawOnChartArea: false, // only want the grid lines for one axis to show up
+ },
+ },
+ }
+ }
+ });
+ }
+}
+</script>
+
+<style scoped>
+.chart-container {
+ /* Your styles here */
+}
+</style>
+
\ No newline at end of file
--
GitLab
From e99742383067e5e188515f5a9405ebd334133eb4 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 13:45:37 +0000
Subject: [PATCH 08/12] Remove redundant base.css
---
src/assets/base.css | 86 ---------------------------------------------
src/assets/main.css | 15 --------
2 files changed, 101 deletions(-)
delete mode 100644 src/assets/base.css
diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 8816868..0000000
--- a/src/assets/base.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/main.css b/src/assets/main.css
index b967604..db7be32 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,3 @@
-@import './base.css';
-
#app {
max-width: 1280px;
margin: 0 auto;
@@ -20,16 +18,3 @@ a,
background-color: hsla(160, 100%, 37%, 0.2);
}
}
-
-/* @media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-} */
--
GitLab
From 873731fa56cffd15da755818ca440f2433f7329c Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 14:03:14 +0000
Subject: [PATCH 09/12] Graph x-axis for past 7 days
---
src/App.vue | 17 ++++++++++++++---
src/components/MultiAxisChart.vue | 6 +++++-
src/components/MultiLineChart.vue | 6 +++++-
3 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 127809b..4825920 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,18 @@ export default {
MultiLineChart,
MultiAxisChart
},
+ methods: {
+ getPastSevenDays() {
+ const dates = [];
+ for (let i = 6; i >= 0; i--) {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
+ dates.push(formattedDate);
+ }
+ return dates;
+ }
+ },
data() {
return {
npkData: {
@@ -39,8 +51,8 @@ export default {
</div>
</div>
<div class="bottom-section">
- <MultiLineChart :chart-data="npkData" />
- <MultiAxisChart :chart-data="thmData" />
+ <MultiLineChart :chart-data="npkData" :x-axis-data=this.getPastSevenDays() />
+ <MultiAxisChart :chart-data="thmData" :x-axis-data=this.getPastSevenDays() />
</div>
</div>
</template>
@@ -55,7 +67,6 @@ export default {
.top-section {
display: flex;
flex: 1;
- /* position: relative; */
}
.logo-container {
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
index cb9964e..9a03aef 100644
--- a/src/components/MultiAxisChart.vue
+++ b/src/components/MultiAxisChart.vue
@@ -14,13 +14,17 @@ export default {
type: Object,
required: true
},
+ xAxisData: {
+ type: Array,
+ required: true
+ },
},
mounted() {
const ctx = this.$refs.multiLineChart.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
- labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+ labels: this.xAxisData,
datasets: [
{
label: 'Temperature',
diff --git a/src/components/MultiLineChart.vue b/src/components/MultiLineChart.vue
index b36c45d..ab1a19c 100644
--- a/src/components/MultiLineChart.vue
+++ b/src/components/MultiLineChart.vue
@@ -14,13 +14,17 @@ export default {
type: Object,
required: true
},
+ xAxisData: {
+ type: Array,
+ required: true
+ },
},
mounted() {
const ctx = this.$refs.multiLineChart.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
- labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+ labels: this.xAxisData,
datasets: [
{
label: 'Nitrogen',
--
GitLab
From 215b72fbc1bafb6727f8ab853cb0a3787c2d8b27 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sat, 25 Nov 2023 16:12:46 +0000
Subject: [PATCH 10/12] Graph data from `/past-values` endpoint
---
app.py | 14 ++++++++++++++
src/App.vue | 28 ++++++++++++++++------------
2 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/app.py b/app.py
index 7f6bac9..4fbabd1 100644
--- a/app.py
+++ b/app.py
@@ -15,6 +15,20 @@ def values():
values = [{"N": 10}, {"P": 11}, {"K": 12}, {"T": 5}, {"H": 6}, {"M": 7}]
return jsonify(values)
+@app.route("/past-values")
+def pastValues():
+ past_values = {"npkData": {
+ "nitrogen": [10, 22, 15, 18, 25, 30, 35],
+ "phosphorus": [5, 8, 10, 12, 20, 22, 25],
+ "potassium": [8, 12, 13, 17, 23, 28, 33]
+ },
+ "thmData": {
+ "temperature": [4, 15, 16, 18, 20, 10, 12],
+ "humidity": [25, 12, 2, 22, 19, 16, 25],
+ "moisture": [8, 12, 13, 33, 23, 28, 10]
+ }}
+ return jsonify(past_values)
+
@app.route('/favicon.ico')
def favicon():
diff --git a/src/App.vue b/src/App.vue
index 4825920..4200261 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import ValueTabs from "./components/ValueTabs.vue";
</script>
<script>
+import axios from "axios"
import MultiLineChart from './components/MultiLineChart.vue';
import MultiAxisChart from './components/MultiAxisChart.vue';
@@ -11,7 +12,18 @@ export default {
MultiLineChart,
MultiAxisChart
},
+ mounted() {
+ this.getPastValues();
+ },
methods: {
+ getPastValues() {
+ axios
+ .get('http://127.0.0.1:5000/past-values')
+ .then((response) => {
+ this.npkData = response.data.npkData
+ this.thmData = response.data.thmData
+ })
+ },
getPastSevenDays() {
const dates = [];
for (let i = 6; i >= 0; i--) {
@@ -25,16 +37,8 @@ export default {
},
data() {
return {
- npkData: {
- nitrogen: [10, 22, 15, 18, 25, 30, 35],
- phosphorus: [5, 8, 10, 12, 20, 22, 25],
- potassium: [8, 12, 13, 17, 23, 28, 33]
- },
- thmData: {
- temperature: [4, 15, 16, 18, 20, 10, 12],
- humidity: [25, 12, 2, 22, 19, 16, 25],
- moisture: [8, 12, 13, 33, 23, 28, 10]
- }
+ npkData: null,
+ thmData: null
}
}
}
@@ -51,8 +55,8 @@ export default {
</div>
</div>
<div class="bottom-section">
- <MultiLineChart :chart-data="npkData" :x-axis-data=this.getPastSevenDays() />
- <MultiAxisChart :chart-data="thmData" :x-axis-data=this.getPastSevenDays() />
+ <MultiLineChart v-if="npkData" :chart-data="npkData" :x-axis-data=this.getPastSevenDays() />
+ <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=this.getPastSevenDays() />
</div>
</div>
</template>
--
GitLab
From 47d3a237058fb8be8d7e7e148b136f8173b47507 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sun, 26 Nov 2023 16:33:49 +0000
Subject: [PATCH 11/12] Modify canvas ref on multi axis garph
---
src/components/MultiAxisChart.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
index 9a03aef..24097c2 100644
--- a/src/components/MultiAxisChart.vue
+++ b/src/components/MultiAxisChart.vue
@@ -1,6 +1,6 @@
<template>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
- <canvas ref="multiLineChart"></canvas>
+ <canvas ref="multiAxisChart"></canvas>
</div>
</template>
@@ -20,7 +20,7 @@ export default {
},
},
mounted() {
- const ctx = this.$refs.multiLineChart.getContext('2d');
+ const ctx = this.$refs.multiAxisChart.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
--
GitLab
From 130a1380e65da137fae915486f3ac2528e8daac6 Mon Sep 17 00:00:00 2001
From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk>
Date: Sun, 26 Nov 2023 16:35:53 +0000
Subject: [PATCH 12/12] Modify passing x-axis-data as refering to function was
causing errors in production build Error was "this is not defined", did not
occur in dev environment
---
src/App.vue | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 4200261..a367662 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,9 @@ export default {
mounted() {
this.getPastValues();
},
+ created() {
+ this.pastSevenDaysData = this.getPastSevenDays();
+ },
methods: {
getPastValues() {
axios
@@ -37,6 +40,7 @@ export default {
},
data() {
return {
+ pastSevenDaysData: [],
npkData: null,
thmData: null
}
@@ -55,8 +59,8 @@ export default {
</div>
</div>
<div class="bottom-section">
- <MultiLineChart v-if="npkData" :chart-data="npkData" :x-axis-data=this.getPastSevenDays() />
- <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=this.getPastSevenDays() />
+ <MultiLineChart v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
+ <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=pastSevenDaysData />
</div>
</div>
</template>
--
GitLab