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

fix(actualgraph): fix chart

Browse Source
This commit is contained in:
Desy Ayurianti 2024-11-12 12:39:19 +07:00
parent 47b90ec2ca
commit 40b0e21e18
1 changed files with 43 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,8 +98,12 @@ 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
});
@ -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 '';
}
}
}
}
};
}