From e770c97f91541dc0b12ab6b987ce2a0cc8706da1 Mon Sep 17 00:00:00 2001 From: Desy Ayurianti Date: Tue, 12 Nov 2024 13:49:09 +0700 Subject: [PATCH] fix(actualgraph): changing from graph into table --- .../layouts/sidebar/sidebar.component.html | 2 +- .../actualgraph/actualgraph.component.html | 31 +++- .../actualgraph/actualgraph.component.scss | 9 +- .../page/actualgraph/actualgraph.component.ts | 135 ++---------------- 4 files changed, 51 insertions(+), 126 deletions(-) diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html index 669dde6..9342561 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html +++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html @@ -13,7 +13,7 @@
  • - Actual Graph + Actual Data
    • diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html index ddca21a..3522f96 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html +++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html @@ -12,7 +12,36 @@
    Actual Graph Sensor NPK 1
    Actual Graph Sensor NPK 2
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #ParameterActual DataStandard Data
    1Nitrogen{{ actualDataValues.nitrogen }} mg/L100-200 mg/L
    2Phosphorus{{ actualDataValues.phosphorus }} mg/L90-125 mg/L
    3Kalium{{ actualDataValues.kalium }} mg/L220-240 mg/L

    No available data

    diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss index 1231928..53014d0 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss +++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss @@ -31,22 +31,27 @@ margin-top: 20px; } +.table th, +.table td { + color: #49473C; +} + .title-graph { color: #49473C; font-size: 20px; font-weight: 400; margin-top: 15px; - margin-bottom: 20px; position: relative; } .graph-content { display: flex; flex-direction: column; - justify-content: center; align-items: center; width: 100%; height: 100%; + padding-top: 30px; + color: #49473C; } .spinner { 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 09fbafe..461e5ca 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 @@ -20,6 +20,12 @@ export class ActualgraphComponent implements OnInit { isLoading: boolean = true; isNoData: boolean = false; greeting = ''; + + actualDataValues = { + nitrogen: 0, + phosphorus: 0, + kalium: 0 + }; constructor( private sensorService: SensorService, @@ -44,37 +50,14 @@ export class ActualgraphComponent implements OnInit { if (selectedData && selectedData.length > 0) { const npkData: ParameterSensor = selectedData[0]; - if (sensorType === 'npk1' || sensorType === 'npk2') { - const actualData = [ - { x: npkData.soilnitrogen ?? 0, y: 0 }, - { x: npkData.soilphosphorus ?? 0, y: 1 }, - { x: npkData.soilpotassium ?? 0, y: 2 } - ]; + this.actualDataValues = { + nitrogen: npkData.soilnitrogen ?? 0, + phosphorus: npkData.soilphosphorus ?? 0, + kalium: npkData.soilpotassium ?? 0 + }; - // 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(); - - setTimeout(() => { - this.initializeChart(); - }); - } + this.isLoading = false; + this.cdr.detectChanges(); } else { this.isNoData = true; this.isLoading = false; @@ -94,100 +77,8 @@ export class ActualgraphComponent implements OnInit { ); } - private initializeChart(): void { - 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: 'bubble', - data: this.chartData, - options: this.chartOptions - }); - } - } else { - console.warn('Chart canvas is not available'); - } - } - updateGreeting(): void { const hour = new Date().getHours(); this.greeting = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening'; } - - public chartData = { - labels: ['Nitrogen', 'Phosphorus', 'Kalium'], - datasets: [ - { - label: 'Actual Data', - data: [] as { x: number; y: number; }[], - backgroundColor: 'rgb(18, 55, 42)', - borderColor: 'rgb(18, 55, 42)', - borderWidth: 1, - type: 'bubble' - }, - { - label: 'Start Data Range', - data: [], - backgroundColor: 'rgba(0,0,0,0)', - borderWidth: 0, - type: 'bar', - stack: 'range', - }, - { - label: 'End Data Range', - data: [], - backgroundColor: 'rgb(212, 231, 197)', - borderWidth: 1, - type: 'bar', - stack: 'range' - } - ] - }; - - public chartOptions: Partial = { - responsive: true, - maintainAspectRatio: false, - indexAxis: 'y' as const, - scales: { - x: { - title: { - display: true, - text: 'Value (mg/L)', - }, - min: 0, - max: 300, - type: 'linear', - }, - y: { - title: { - display: true, - 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: { - label: function (tooltipItem: any) { - if (tooltipItem.datasetIndex === 0) { - return `Value: ${tooltipItem.raw.x} mg/L`; - } - return ''; - } - } - } - } - }; }