Monitoring Graphs
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
index ad03ede..a33e66b 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
@@ -16,13 +16,7 @@
.description {
color: #49473C;
font-size: 15px;
- margin-top: 10px;
-}
-
-.update{
- color: #49473C;
- font-size: 15px;
- margin-top: 18px;
+ margin: 10px 0px 15px 0px;
}
.card-container {
@@ -102,6 +96,10 @@
margin-top: 20px;
justify-content: center;
}
+
+ .relay-container{
+ justify-content: center;
+ }
}
@media (max-width: 344px) {
@@ -126,6 +124,10 @@
margin-top: 20px;
justify-content: center;
}
+
+ .relay-container{
+ justify-content: center;
+ }
}
button {
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
index 82dd575..8d6b696 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
@@ -33,7 +33,6 @@ export class DashboardComponent implements OnInit {
ngOnInit(): void {
this.selectedButton = 'dht';
- this.startClock();
this.updateGreeting();
this.loadData();
}
@@ -44,26 +43,6 @@ export class DashboardComponent implements OnInit {
}
}
- startClock(): void {
- this.updateLatestTime();
-
- this.intervalId = setInterval(() => {
- this.updateLatestTime();
- }, 1000);
- }
-
- updateLatestTime(): void {
- const now = new Date();
- const options: Intl.DateTimeFormatOptions = {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit'
- };
- this.latestUpdate = now.toLocaleString('en-GB', options);
- }
updateGreeting(): void {
const hour = new Date().getHours();
@@ -131,8 +110,6 @@ export class DashboardComponent implements OnInit {
};
}
}
-
- this.updateLatestTime();
this.isLoaded = false;
},
(error) => {
@@ -157,10 +134,10 @@ export class DashboardComponent implements OnInit {
created_at: relay.created_at,
current_status: relay.current_status
}));
- this.relayStatus.sort((a, b) => a.number - b.number);
- this.noData = false; // Data available
+ this.relayStatus.sort((a, b) => b.number - a.number);
+
+ this.noData = false;
} else {
- // Throw an error if relay data is empty
this.handleError({ message: 'No available relay data.' });
this.noData = true;
}
@@ -172,9 +149,8 @@ export class DashboardComponent implements OnInit {
this.hasError = true;
}
);
-}
-
-
+ }
+
handleError(error: any): void {
if (this.selectedButton === 'dht') {
this.toast.error('Error fetching DHT sensor data. Please try again.', 'Error', { timeOut: 3000 });
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 6e2623d..669dde6 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
@@ -11,6 +11,10 @@
+
+
+
+
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
new file mode 100644
index 0000000..ddca21a
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html
@@ -0,0 +1,20 @@
+
+
+
{{ greeting }}
+ Compare your actual data with the standard data
+
+
+
+
+
+
+
+
Actual Graph Sensor NPK 1
+
Actual Graph Sensor NPK 2
+
+
+
+
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
new file mode 100644
index 0000000..1231928
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss
@@ -0,0 +1,94 @@
+.container {
+ font-family: "Onest", sans-serif;
+}
+
+.title {
+ color: #49473C;
+ font-size: 30px;
+ margin-top: 10px;
+}
+
+.description {
+ color: #49473C;
+ font-size: 15px;
+ margin: 10px 0px 15px 0px;
+}
+
+.graph {
+ width: 100%;
+ height: 400px;
+ position: relative;
+ max-width: 100%;
+ border-radius: 10px;
+ border: 1px solid #E5E5E5;
+ padding: 20px 20px 0px 20px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ text-align: center;
+ margin-top: 20px;
+}
+
+.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%;
+}
+
+.spinner {
+ font-size: 30px;
+ color: #16423C;
+ position: absolute;
+}
+
+@media (max-width: 768px) {
+ .graph {
+ height: 300px;
+ }
+
+ .title-graph {
+ margin: auto;
+ font-size: 15px;
+ }
+}
+
+@media (max-width: 344px) {
+ button {
+ color: #49473C;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ }
+
+ .title-graph {
+ font-size: 15px;
+ margin: auto;
+ }
+}
+
+button {
+ border: none;
+ border-radius: 10px;
+ padding: 5px 10px;
+ font-size: 15px;
+ cursor: pointer;
+ margin-right: 20px;
+}
+
+.active-button {
+ background-color: #cad849;
+ color: white;
+}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.spec.ts b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.spec.ts
new file mode 100644
index 0000000..4042944
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActualgraphComponent } from './actualgraph.component';
+
+describe('ActualgraphComponent', () => {
+ let component: ActualgraphComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ActualgraphComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ActualgraphComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 0000000..8799923
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts
@@ -0,0 +1,201 @@
+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';
+import { CommonModule } from '@angular/common';
+
+Chart.register(...registerables);
+
+@Component({
+ selector: 'app-actualgraph',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './actualgraph.component.html',
+ styleUrls: ['./actualgraph.component.scss']
+})
+export class ActualgraphComponent implements OnInit {
+ @ViewChild('chartCanvas', { static: false }) chartCanvas?: ElementRef;
+ private chart: Chart | undefined;
+ selectedButton: string = 'npk1';
+ isLoading: boolean = true;
+ isNoData: boolean = false;
+ greeting = '';
+
+ constructor(
+ private sensorService: SensorService,
+ private cdr: ChangeDetectorRef
+ ) {}
+
+ ngOnInit(): void {
+ this.updateGreeting();
+ this.loadData('npk1');
+ }
+
+ loadData(sensorType: string): void {
+ console.log('Loading data for sensor:', sensorType);
+ this.selectedButton = sensorType;
+ this.isLoading = true;
+ this.isNoData = false;
+
+ this.sensorService.getLatestData().subscribe(
+ (response: ApiResponse) => {
+ console.log('Data received:', response);
+ if (response.statusCode === 200) {
+ const selectedData = (response.data as { [key: string]: any[] })[sensorType];
+
+ 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.chartData.datasets[0].data = actualData;
+ this.isLoading = false;
+ this.cdr.detectChanges();
+
+ setTimeout(() => {
+ this.initializeChart();
+ });
+ }
+ } else {
+ this.isNoData = true;
+ this.isLoading = false;
+ this.cdr.detectChanges();
+ }
+ } else {
+ console.error('Error loading data: ', response.message);
+ this.isLoading = false;
+ this.cdr.detectChanges();
+ }
+ },
+ (error) => {
+ console.error('Error loading data:', error);
+ this.isLoading = false;
+ this.cdr.detectChanges();
+ }
+ );
+ }
+
+ // Initialize Chart
+ private initializeChart(): void {
+ if (this.chartCanvas?.nativeElement) {
+ console.log('Initializing chart...');
+ const ctx = this.chartCanvas.nativeElement.getContext('2d');
+ if (ctx) {
+ this.chart = new Chart(ctx, {
+ type: 'bar',
+ 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', 'Phosphor', 'Kalium'],
+ datasets: [
+ {
+ label: 'Actual Data',
+ data: [],
+ backgroundColor: 'rgb(18, 55, 42)',
+ borderColor: 'rgb(18, 55, 42)',
+ borderWidth: 1,
+ type: 'bubble'
+ },
+ {
+ label: 'Start Data Range',
+ data: [
+ { x: 100, y: 0 },
+ { x: 90, y: 1 },
+ { x: 220, y: 2 }
+ ],
+ 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 }
+ ],
+ backgroundColor: 'rgb(212, 231, 197)',
+ borderWidth: 1,
+ type: 'bar',
+ stack: 'range'
+ }
+ ]
+ };
+
+ public chartOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ indexAxis: 'y',
+ scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Value (mg/L)',
+ },
+ min: 0,
+ max: 300,
+ type: 'linear',
+ },
+ y: {
+ title: {
+ display: true,
+ text: 'Sensor Parameter',
+ },
+ stacked: true,
+ },
+ },
+ plugins: {
+ tooltip: {
+ callbacks: {
+ title: function (tooltipItem: any) {
+ // Display the label (Nitrogen, Phosphorus, or Kalium)
+ 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)`;
+ }
+ }
+
+ return tooltipText;
+ },
+ },
+ },
+ },
+ };
+
+
+}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
index a1ef947..70f8098 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
@@ -4,6 +4,18 @@
+
+
+ Enter a date range
+
+
+
+
+ MM/DD/YYYY – MM/DD/YYYY
+
+
+
+
Sensor BHT
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 4fa00d6..dd618a1 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
@@ -1,9 +1,26 @@
.container-graph {
display: flex;
flex-direction: column;
- justify-content: flex-start;
+ position: relative;
height: max-content;
+ .date-picker{
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px 20px;
+ }
+
+ .mat-form-field{
+ font-family: 'Onest', sans-serif;
+ }
+
+ mat-datepicker-toggle, mat-date-range-input{
+ color: #16423C;
+ }
+
+ .mat-form-field.mat-focused .mat-date-range-input {
+ color: #16423C;
+ }
.sensor-wrapper {
position: relative;
@@ -62,6 +79,17 @@
width: 100%;
max-width: 100%;
}
+
+ .date-picker{
+ display: flex;
+ justify-content: center;
+ padding: 10px 20px;
+ }
+
+ mat-hint{
+ font-size: 10px;
+ align-items: center;
+ }
}
@media (max-width: 344px) {
@@ -70,6 +98,17 @@
width: 100%;
max-width: 100%;
}
+
+ .date-picker{
+ display: flex;
+ justify-content: center;
+ padding: 10px 20px;
+ }
+
+ mat-hint{
+ font-size: 10px;
+ align-items: center;
+ }
}
.loading {
@@ -88,3 +127,5 @@
height: 100%;
font-size: 18px;
}
+
+
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 22d18a5..ad65e0a 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
@@ -2,8 +2,13 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, OnDestroy, OnC
import { Chart, registerables } from 'chart.js';
import { SensorService } from '../../../../cores/services/sensor.service';
import { ApiResponse, ParameterSensor } from '../../../../cores/interface/sensor-data';
-import { CommonModule } from '@angular/common';
+import { CommonModule, formatDate } from '@angular/common';
import { FormsModule } from '@angular/forms';
+import { provideNativeDateAdapter} from '@angular/material/core';
+import { MatDatepickerModule} from '@angular/material/datepicker';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import { format } from 'date-fns';
+import { ToastrService } from 'ngx-toastr';
Chart.register(...registerables);
@@ -23,7 +28,8 @@ const parameterColors: { [key: string]: string } = {
@Component({
selector: 'app-graph',
standalone: true,
- imports: [CommonModule, FormsModule],
+ imports: [CommonModule, FormsModule, MatDatepickerModule, MatFormFieldModule],
+ providers: [provideNativeDateAdapter()],
templateUrl: './graph.component.html',
styleUrls: ['./graph.component.scss']
})
@@ -34,6 +40,9 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
@Input() interval: string = 'hourly';
selectedInterval: string = 'HOURLY';
+ startDate: Date | null = null;
+ endDate: Date | null = null;
+
isLoadingDHT: boolean = true;
isLoadingNPK1: boolean = true;
isLoadingNPK2: boolean = true;
@@ -73,14 +82,15 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
selectedNPK2: string = 'npk';
private resizeListener!: () => void;
+ private updateTimeout: any;
- constructor(private sensorService: SensorService, private cdr: ChangeDetectorRef) {}
+ constructor(private sensorService: SensorService, private toast: ToastrService) {}
ngOnInit(): void {
this.resizeListener = this.onResize.bind(this);
window.addEventListener('resize', this.resizeListener);
- this.updateCharts();
}
+
ngOnChanges(changes: SimpleChanges): void {
if (changes['interval'] && changes['interval'].previousValue !== changes['interval'].currentValue) {
@@ -92,6 +102,18 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
this.onResize();
}
+ dateChange(): void {
+ if(!this.startDate || !this.endDate){
+ this.toast.warning('Select both start and end dates');
+ return;
+ } else {
+ clearTimeout(this.updateTimeout);
+ this.updateTimeout = setTimeout(() => {
+ this.updateCharts();
+ }, 500);
+ }
+ }
+
ngOnDestroy(): void {
window.removeEventListener('resize', this.resizeListener);
}
@@ -105,13 +127,21 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
this.updateCharts();
}
+ formatDate(date: Date): string {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ return `${year}-${month}-${day}`;
+ }
+
getDate(): string {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
- return `${year}-${month}-${day}`;
+ const hasil = `${year}-${month}-${day}`;
+ return hasil;
}
getDateAgo():string{
@@ -125,13 +155,13 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
return `${year}-${month}-${day}`;
}
- fetchDHTData(timeRange: string): void {
- const hEnd = this.getDate();
- const hStart = this.getDate();
- const dEnd = this.getDate();
- const dStart = this.getDateAgo();
+ fetchDHTData(timeRange: string, startDate?: Date, endDate?: Date): void {
+ const hStart = startDate ? this.formatDate(startDate) : this.getDate();
+ const hEnd = endDate ? this.formatDate(endDate) : this.getDate();
+ const dStart= startDate ? this.formatDate(startDate) : this.getDateAgo();
+ const dEnd = endDate ? this.formatDate(endDate) : this.getDate();
- if(timeRange === 'HOURLY'){
+ if (timeRange === 'HOURLY') {
this.sensorService.getSensorDataHourly('dht', 'npk', hStart, hEnd, timeRange).subscribe({
next: (response) => {
this.isLoadingDHT = false;
@@ -147,7 +177,7 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
this.isNoDataDHT = true;
}
});
- } else if(timeRange === 'DAILY'){
+ } else if (timeRange === 'DAILY') {
this.sensorService.getSensorDataDaily('dht', 'npk', dStart, dEnd, timeRange).subscribe({
next: (response) => {
this.isLoadingDHT = false;
@@ -166,14 +196,14 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
}
}
- fetchNPK1Data(timeRange: string): void {
- const hEnd = this.getDate();
- const hStart = this.getDate();
- const dEnd = this.getDate();
- const dStart = this.getDateAgo();
+ fetchNPK1Data(timeRange: string, startDate?: Date, endDate?: Date): void {
+ const hStart = startDate ? this.formatDate(startDate) : this.getDate();
+ const hEnd = endDate ? this.formatDate(endDate) : this.getDate();
+ const dStart = startDate ? this.formatDate(startDate) : this.getDateAgo();
+ const dEnd= endDate ? this.formatDate(endDate) : this.getDate();
if(timeRange === 'HOURLY'){
- this.sensorService.getSensorDataHourly('npk1', this.selectedNPK1, hEnd, hStart, timeRange).subscribe({
+ this.sensorService.getSensorDataHourly('npk1', this.selectedNPK1, hStart, hEnd, timeRange).subscribe({
next: (response) => {
this.isLoadingNPK1 = false;
if (response.statusCode === 200 && response.data.npk1?.length > 0) {
@@ -187,7 +217,7 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
this.isLoadingNPK1 = false;
this.isNoDataNPK1 = true;
}
- })
+ });
}else if(timeRange === 'DAILY'){
this.sensorService.getSensorDataDaily('npk1', this.selectedNPK1, dStart, dEnd, timeRange).subscribe({
next: (response) => {
@@ -207,17 +237,18 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
}
}
- fetchNPK2Data(savedTimeRange: string): void {
- const hEnd = this.getDate();
- const hStart = this.getDate();
- const dEnd = this.getDate();
- const dStart = this.getDateAgo();
+ fetchNPK2Data(savedTimeRange: string, startDate?: Date, endDate?: Date): void {
+ const hStart = startDate ? this.formatDate(startDate) : this.getDate();
+ const hEnd = endDate ? this.formatDate(endDate) : this.getDate();
+ const dStart = startDate ? this.formatDate(startDate) : this.getDateAgo();
+ const dEnd = endDate ? this.formatDate(endDate) : this.getDate();
if(savedTimeRange === 'HOURLY'){
this.sensorService.getSensorDataHourly('npk2', this.selectedNPK2, hStart, hEnd, savedTimeRange).subscribe({
next: (response) => {
this.isLoadingNPK2 = false;
if (response.statusCode === 200 && response.data.npk2?.length > 0) {
+ console.log('NPK2 Data:', response);
this.createChart(this.npk2ChartElement.nativeElement, response, 'npk2', this.selectedNPK2);
this.isNoDataNPK2 = false;
} else {
@@ -254,13 +285,20 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
Object.keys(this.charts).forEach(key => {
if (this.charts[key]) {
this.charts[key]?.destroy();
+ this.charts[key].data.labels = [];
+ this.charts[key].data.datasets = [];
this.charts[key] = undefined;
}
});
-
- this.fetchDHTData(interval);
- this.fetchNPK1Data(interval);
- this.fetchNPK2Data(interval);
+ if (this.startDate && this.endDate) {
+ this.fetchDHTData(interval, this.startDate, this.endDate);
+ this.fetchNPK1Data(interval, this.startDate, this.endDate);
+ this.fetchNPK2Data(interval, this.startDate, this.endDate);
+ } else {
+ this.fetchDHTData(interval);
+ this.fetchNPK1Data(interval);
+ this.fetchNPK2Data(interval);
+ }
}
@@ -369,7 +407,7 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
mode: 'nearest',
intersect: false,
callbacks: {
- label: (tooltipItem) => {
+ label: (tooltipItem: any) => {
const paramLabel = tooltipItem.dataset.label;
const value = tooltipItem.formattedValue;
return `${paramLabel}: ${value}`;
@@ -383,7 +421,7 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
grid: { display: false },
beginAtZero: true,
ticks: {
- callback: (value, index, values) => {
+ callback: (value: string | number, index: number, values: any) => {
const labels = this.getLabels(response, sensor);
return labels[index] || value;
}
@@ -406,7 +444,8 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
sensorData.forEach(item => {
data.push(item[parameter as keyof ParameterSensor] ?? 0);
if(this.interval === 'HOURLY') {
- labels.push(`${item.hour}.00`);
+ labels.push(item.date);
+ labels.push(item.hour);
}
else if (this.interval === 'DAILY') {
labels.push(item.day);
@@ -423,11 +462,14 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
const sensorData = response.data[sensor as keyof typeof response.data];
return sensorData.map(item => {
+ const formatDate = format(new Date(item.date), 'MMM dd');
+
if (this.interval === 'HOURLY' || this.selectedInterval === 'HOURLY') {
- return `${item.hour}.00`;
+ return `${formatDate}, ${item.hour}.00`;
} else if (this.interval === 'DAILY') {
- const day = item.day;
- return this.convertDateToDay(day);
+ const day = item.date;
+ const convertDateToDay = this.convertDateToDay(day);
+ return `${convertDateToDay}, ${formatDate}`;
} else {
return '';
}
@@ -436,7 +478,7 @@ export class GraphComponent implements OnInit, AfterViewInit, OnDestroy, OnChang
convertDateToDay(dateString: string): string {
const date = new Date(dateString);
- const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'];
+ const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'];
return days[date.getDay()];
}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.html
index d6cec24..39226a9 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.html
@@ -3,10 +3,6 @@
{{ greeting }}
View your historical data with customizable time ranges
-
-
Latest Update: {{ latestUpdate }}
-
-
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
index ca447bb..40ba899 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
@@ -11,13 +11,7 @@
.description {
color: #49473C;
font-size: 15px;
- margin-top: 10px;
-}
-
-.update{
- color: #49473C;
- font-size: 15px;
- margin-top: 18px;
+ margin: 10px 0px 15px 0px;
}
.card-container {
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.ts
index 0f2846b..14343b5 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.ts
@@ -13,7 +13,6 @@ import { ChangeDetectorRef } from '@angular/core';
export class HistorygraphComponent implements OnInit, OnDestroy {
selectedButton: string = '';
selectedInterval: string = '';
- latestUpdate: string = '';
intervalId: any;
greeting: string = '';
@@ -22,7 +21,6 @@ export class HistorygraphComponent implements OnInit, OnDestroy {
@ViewChild(GraphComponent) graphComponent!: GraphComponent;
ngOnInit(): void {
- this.startClock();
this.updateGreeting();
this.selectedButton = 'hourly';
this.selectedInterval = 'HOURLY';
@@ -49,23 +47,6 @@ export class HistorygraphComponent implements OnInit, OnDestroy {
}
}
- startClock(): void {
- this.updateLatestTime();
- this.intervalId = setInterval(() => this.updateLatestTime(), 1000);
- }
-
- updateLatestTime(): void {
- const now = new Date();
- this.latestUpdate = now.toLocaleString('en-GB', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit'
- });
- }
-
updateGreeting(): void {
const hour = new Date().getHours();
if (hour < 12) {
diff --git a/agrilink_vocpro/src/index.html b/agrilink_vocpro/src/index.html
index 07b7a5c..b8fcee3 100644
--- a/agrilink_vocpro/src/index.html
+++ b/agrilink_vocpro/src/index.html
@@ -18,6 +18,7 @@
+
diff --git a/agrilink_vocpro/src/styles.scss b/agrilink_vocpro/src/styles.scss
index 90e18ea..0b134c7 100644
--- a/agrilink_vocpro/src/styles.scss
+++ b/agrilink_vocpro/src/styles.scss
@@ -1,3 +1,30 @@
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
body{
font-family: "Onest", sans-serif;
+
+}
+.mat-form-field .mat-input-element:focus {
+ border-color: #16423C !important;
+ box-shadow: 0 1px 5px rgba(0, 128, 0, 0.3) !important;
+}
+
+.mat-form-field .mat-label.mat-focus-indicator {
+ color: #16423C !important;
+}
+
+.mat-form-field .mat-input-element:focus {
+ caret-color: #16423C !important;
+}
+
+.mat-form-field .mat-icon {
+ color: #16423C !important;
+}
+
+
+.mat-datepicker-toggle.mat-accent {
+ color: #16423C !important;
+}
+
+.mat-calendar .mat-calendar-body-selected {
+background-color: #16423C !important;
}