From e4780952357333667597211c0dd3aa948505650a Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Mon, 30 Sep 2024 13:37:12 +0700
Subject: [PATCH] fix(dashboard): fix responsive ui for data grafik

---
 .../dashboard/page/graph/graph.component.scss      |  4 ++--
 .../pages/dashboard/page/graph/graph.component.ts  | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
index 24b01c6..25a147a 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
@@ -6,8 +6,8 @@
   }
   
   canvas {
-    width: max-content;
-    height: 80%!important;
+    width: 100%;
+    height: 30vh;
     margin: 20px;
     align-items: center;
   }
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
index 9dc44ea..9f541ee 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
@@ -57,6 +57,14 @@ export class GraphComponent implements OnInit {
     this.selectedSensor = 'dht';
     this.parameters = this.sensorParameters[this.selectedSensor];
     this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
+
+    window.addEventListener('resize', () => {
+      if (this.chart) {
+        this.chart.destroy();
+        this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
+      }
+    });
+    
   }
 
   createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
@@ -131,9 +139,15 @@ export class GraphComponent implements OnInit {
           },
           scales: {
             x: {
+              grid:{
+                display: false
+              },
               beginAtZero: true
             },
             y: {
+              grid:{
+                display: false
+              },
               beginAtZero: true
             }
           }