From 40b0e21e185f5440e65cb13ae70a60727e666ba2 Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Tue, 12 Nov 2024 12:39:19 +0700
Subject: [PATCH] fix(actualgraph): fix chart

---
 .../page/actualgraph/actualgraph.component.ts | 89 +++++++++----------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts
index 2b684a4..09fbafe 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';    
+import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { Chart, registerables } from 'chart.js';
 import { SensorService } from '../../../../cores/services/sensor.service';
 import { ApiResponse, ParameterSensor } from '../../../../cores/interface/sensor-data';
@@ -51,7 +51,23 @@ export class ActualgraphComponent implements OnInit {
                 { x: npkData.soilpotassium ?? 0, y: 2 } 
               ];
 
+              // Data untuk standar (contoh: Start dan End Range)
+              const startDataRange = [
+                { x: 100, y: 0 },
+                { x: 90, y: 1 },
+                { x: 220, y: 2 }
+              ];
+
+              const endDataRange = [
+                { x: 100, y: 0 },
+                { x: 35, y: 1 },
+                { x: 200, y: 2 }
+              ];
+
               this.chartData.datasets[0].data = actualData;
+              this.chartData.datasets[1].data = startDataRange;
+              this.chartData.datasets[2].data = endDataRange;
+
               this.isLoading = false;
               this.cdr.detectChanges();
 
@@ -82,14 +98,18 @@ export class ActualgraphComponent implements OnInit {
     if (this.chartCanvas?.nativeElement) {
       const ctx = this.chartCanvas.nativeElement.getContext('2d');
       if (ctx) {
+        // If chart already exists, destroy it before creating a new one
+        if (this.chart) {
+          this.chart.destroy();
+        }
         this.chart = new Chart(ctx, {
-          type: 'bar',
+          type: 'bubble',
           data: this.chartData,
           options: this.chartOptions
         });
       }
     } else {
-      console.warn('Chart canvas is not available'); 
+      console.warn('Chart canvas is not available');
     }
   }
 
@@ -103,7 +123,7 @@ export class ActualgraphComponent implements OnInit {
     datasets: [
       {
         label: 'Actual Data',
-        data: [],
+        data: [] as { x: number; y: number; }[],
         backgroundColor: 'rgb(18, 55, 42)',
         borderColor: 'rgb(18, 55, 42)',
         borderWidth: 1,
@@ -111,23 +131,15 @@ export class ActualgraphComponent implements OnInit {
       },
       {
         label: 'Start Data Range',
-        data: [
-          { x: 100, y: 0 },
-          { x: 90, y: 1 },
-          { x: 220, y: 2 }
-        ],
+        data: [],
         backgroundColor: 'rgba(0,0,0,0)',
         borderWidth: 0,
         type: 'bar',
         stack: 'range',
       },
       {
-        label: 'Standard Data Range',
-        data: [
-          { x: 100, y: 0 },
-          { x: 35, y: 1 },
-          { x: 200, y: 2 }
-        ],
+        label: 'End Data Range',
+        data: [],
         backgroundColor: 'rgb(212, 231, 197)',
         borderWidth: 1,
         type: 'bar',
@@ -136,10 +148,10 @@ export class ActualgraphComponent implements OnInit {
     ]
   };
 
-  public chartOptions = {
+  public chartOptions: Partial<Chart['options']> = {
     responsive: true,
     maintainAspectRatio: false,
-    indexAxis: 'y',
+    indexAxis: 'y' as const,
     scales: {
       x: {
         title: {
@@ -156,41 +168,26 @@ export class ActualgraphComponent implements OnInit {
           text: 'Sensor Parameter',
         },
         stacked: true,
+        ticks: {
+          display: true,
+          callback: function (value: number) {
+            const labels = ['Nitrogen', 'Phosphorus', 'Kalium'];
+            return labels[value as number];
+          }
+        }
       },
     },
     plugins: {
       tooltip: {
         callbacks: {
-          title: function (tooltipItem: any) {
-            return tooltipItem[0].label;
-          },
           label: function (tooltipItem: any) {
-            const dataset = tooltipItem.dataset;
-            const dataIndex = tooltipItem.dataIndex;
-            const data = dataset.data[dataIndex];
-  
-            let tooltipText = `Actual Value: ${data.x} mg/L`;
-  
-            if (dataset.type === 'bar') {
-              const startRangeDataset = tooltipItem.chart.data.datasets.find((ds: any) => ds.label === 'Start Data Range');
-              const standardRangeDataset = tooltipItem.chart.data.datasets.find((ds: any) => ds.label === 'Standard Data Range');
-  
-              const startRangeValue = startRangeDataset?.data.find((point: any) => point.y === data.y)?.x;
-              const standardRangeValue = standardRangeDataset?.data.find((point: any) => point.y === data.y)?.x;
-  
-              if (startRangeValue !== undefined && standardRangeValue !== undefined) {
-                const minValue = startRangeValue;
-                const maxValue = startRangeValue + standardRangeValue; 
-                tooltipText = `(Standard Range: ${minValue} - ${maxValue} mg/L)`;
-              }
+            if (tooltipItem.datasetIndex === 0) { 
+              return `Value: ${tooltipItem.raw.x} mg/L`;
             }
-  
-            return tooltipText;
-          },
-        },
-      },
-    },
+            return '';
+          }
+        }
+      }
+    }
   };
-  
-  
 }