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] 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