agrilink/frontend-smartfarming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev smartfarming #1

Merged
agrilink merged 53 commits from development into main 2024-12-30 05:53:19 +00:00
Conversation 0 Commits 53 Files Changed 66 +51 -126
4 changed files with 51 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e770c97f91 - Show all commits

2
agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
View File

@ -13,7 +13,7 @@
</li>
<li>
<a routerLink='/actualgraph' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="bi bi-bar-chart title"></i> <span class="ms-1 d-none d-sm-inline menu">Actual Graph</span> </a>
<i class="bi bi-bar-chart title"></i> <span class="ms-1 d-none d-sm-inline menu">Actual Data</span> </a>
</li>
</ul>
<hr>

31
agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html
View File

@ -12,7 +12,36 @@
<div class="title-graph" *ngIf="selectedButton === 'npk1'">Actual Graph Sensor NPK 1</div>
<div class="title-graph" *ngIf="selectedButton === 'npk2'">Actual Graph Sensor NPK 2</div>
<div class="graph-content">
<canvas *ngIf="!isLoading && !isNoData" #chartCanvas></canvas>
<table class="table parameter" *ngIf="!isLoading && !isNoData" style="padding-top: 0px;">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Parameter</th>
<th scope="col">Actual Data</th>
<th scope="col">Standard Data</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Nitrogen</td>
<td>{{ actualDataValues.nitrogen }} mg/L</td>
<td>100-200 mg/L</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Phosphorus</td>
<td>{{ actualDataValues.phosphorus }} mg/L</td>
<td>90-125 mg/L</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kalium</td>
<td>{{ actualDataValues.kalium }} mg/L</td>
<td>220-240 mg/L</td>
</tr>
</tbody>
</table>
<i *ngIf="isLoading" class="fa fa-spinner fa-spin spinner"></i>
<p *ngIf="isNoData" class="no-data">No available data</p>
</div>

9
agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss
View File

@ -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 {

135
agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts
View File

@ -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<Chart['options']> = {
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 '';
}
}
}
}
};
}