diff --git a/src/App.vue b/src/App.vue index 127809b664616bd464a75ac48697b0b5749ae493..4825920658b3727061ec423d49592ff3221539c4 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 cb9964eba2a6057e97894645fa2e7aefd9f7006e..9a03aef715faf6286662b18fc540e9d95c72d60e 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 b36c45d590b48ef03836a773d0ff23ad23457f51..ab1a19cd2f2619b0b743b33a11c9fefc74d3b5ea 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',