diff --git a/app.py b/app.py
index 7f6bac956c1b302d511e15122235d573ae14d33d..4fbabd10ba15b8586c15c1c557ae087a22749e01 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/package-lock.json b/package-lock.json
index f3e54f4915b9426abc34c39984be1006481eec7d..29d62574b2eb4cdb3c213bc186537d0f64c155c7 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 2407abc91b69daedee390ec7e82c7c8541e6d1bf..33324004f418fc9cd7aad3b2615f9d65ebc1c754 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": {
diff --git a/src/App.vue b/src/App.vue
index c0e49b96a51b70ce45ec68e6d54f70f0bf6c0493..a36766285ba7818ebd6146b6764ac9ef3a509810 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,49 +1,123 @@
<script setup>
-import ValueTabs from "./components/ValueTabs.vue"
+import ValueTabs from "./components/ValueTabs.vue";
+</script>
+
+<script>
+import axios from "axios"
+import MultiLineChart from './components/MultiLineChart.vue';
+import MultiAxisChart from './components/MultiAxisChart.vue';
+
+export default {
+ components: {
+ MultiLineChart,
+ MultiAxisChart
+ },
+ mounted() {
+ this.getPastValues();
+ },
+ created() {
+ this.pastSevenDaysData = this.getPastSevenDays();
+ },
+ 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--) {
+ 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 {
+ pastSevenDaysData: [],
+ npkData: null,
+ thmData: null
+ }
+ }
+}
</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 v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
+ <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=pastSevenDaysData />
+ </div>
+ </div>
</template>
<style scoped>
-header {
- line-height: 1.5;
+.app-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+.top-section {
+ display: flex;
+ flex: 1;
+}
+
+.logo-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.logo-container img {
+ width: 35vw;
+ height: auto;
+}
+
+.value-tabs-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.logo {
- display: block;
- margin: 0 auto 2rem;
- max-width: 75%;
- max-height: 75%;
+.bottom-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 0.5;
+ gap: 10px; /* Adds a gap between the Graph components */
}
-@media (min-width: 1024px) {
- header {
- display: flex;
- place-items: center;
- padding-right: calc(var(--section-gap) / 2);
+/* 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 {
- margin: 0 2rem 0 0;
+ .logo-container img {
+ width: 50vw; /* Adjust logo size for smaller screens */
}
- header .wrapper {
- display: flex;
- place-items: flex-start;
- flex-wrap: wrap;
+ .value-tabs-container {
+ right: 10%;
+ width: 80%;
}
}
</style>
diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 8816868a41b651f318dee87c6784ebcd6e29eca1..0000000000000000000000000000000000000000
--- 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 e8667cd4508b6163e44e675ff899de1896544c84..db7be3238afccff587208ba376d8473387d2c524 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;
- }
-}
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24097c28785a895f67a52e3dbf5bcca325ba1ffe
--- /dev/null
+++ b/src/components/MultiAxisChart.vue
@@ -0,0 +1,90 @@
+<template>
+ <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <canvas ref="multiAxisChart"></canvas>
+ </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true
+ },
+ xAxisData: {
+ type: Array,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiAxisChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: this.xAxisData,
+ 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
diff --git a/src/components/MultiLineChart.vue b/src/components/MultiLineChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab1a19cd2f2619b0b743b33a11c9fefc74d3b5ea
--- /dev/null
+++ b/src/components/MultiLineChart.vue
@@ -0,0 +1,73 @@
+<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
+ },
+ xAxisData: {
+ type: Array,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiLineChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: this.xAxisData,
+ 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
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index c40d44af5212ae8a5e585585cffe06a4678a26f2..229c8170f8b96a1ea8abf82d4bd6b1a993c78b84 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,8 +64,22 @@ export default {
</template>
<style scoped>
+.allBoxes{
+ /* font-size: 40px; */
+ font-size: 2vw;
+ width: fit-content;
+ /* padding-top: 5%; */
+}
+
.valueBox {
display: flex;
padding-bottom: 2%;
}
+
+/* Responsive adjustments for mobile screens */
+@media (max-width: 768px) {
+ .allBoxes{
+ font-size: 1.6vh;
+ }
+}
</style>