Graph x-axis for past 7 days

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 {

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',

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',