import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AuctionserviceService } from '../Service/auctionservice.service';
@Component({
selector: 'app-auctiontypedialog',
templateUrl: './auctiontypedialog.component.html',
styleUrls: ['./auctiontypedialog.component.scss']
})
export class AuctiontypedialogComponent implements OnInit, OnDestroy {
companyId: number | null = null;
employeeLoginId: number | null = null;
auctionTypeName: any;
intervalId: any;
rowData: any = [];
Bids: any;
chartOptions: any = {
animationEnabled: true,
theme: "light2",
title: {
text: "Auction Price vs Time"
},
axisX: {
title: "Date & Time",
valueFormatString: "DD MMM HH:mm",
labelAngle: -45,
},
axisY: {
title: "Bid Amount (₹)",
valueFormatString: "#,###",
},
legend: {
cursor: "pointer",
itemclick: function(e: any) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: []
};
AuctionType_name: any;
constructor(
public dialogRef: MatDialogRef<AuctiontypedialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private auctionService: AuctionserviceService
) {}
ngOnInit(): void {
const storedData = localStorage.getItem('user_details') ?? "{}";
const userDetails = JSON.parse(storedData);
if (userDetails && userDetails.companyId) {
this.companyId = userDetails.companyId;
this.employeeLoginId = userDetails.employeeId;
}
this.getAllvendorWiseAuctionPrice();
}
ngOnDestroy(): void {
if (this.intervalId) clearInterval(this.intervalId);
}
closePage() {
if (this.intervalId) clearInterval(this.intervalId);
this.dialogRef.close();
}
getAllvendorWiseAuctionPrice() {
this.auctionService.getAllvendorWiseAuctionPrice(this.data?.auction_id).subscribe(
(res: any) => {
if (res.body?.data) {
console.log(res.body, "Auction Data");
// Extract Auction Type from the first available supplier's bid
const suppliers = Object.keys(res.body.data);
if (suppliers.length > 0) {
const firstSupplier = res.body.data[suppliers[0]];
if (Array.isArray(firstSupplier) && firstSupplier.length > 0) {
this.auctionTypeName = firstSupplier[0].AuctionType_name ||
"Auction";
}
}
// Map supplier-wise data for the chart
const supplierDataMap = new Map<string, any[]>();
Object.entries(res.body.data).forEach(([supplier, bids]: [string, any])
=> {
if (Array.isArray(bids)) {
bids.forEach((bid: any) => {
if (!supplierDataMap.has(supplier)) {
supplierDataMap.set(supplier, []);
}
supplierDataMap.get(supplier)?.push({
x: new Date(bid.updatedAt),
y: Number(bid.bid_amount),
label: `(${new Date(bid.updatedAt).toLocaleString()})`,
});
});
}
});
// Define unique colors for each supplier
const uniqueColors: string[] = [
"#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#A833FF",
"#FFD700", "#FF4500", "#008080", "#00CED1", "#4B0082"
];
// Assign colors to suppliers
const supplierColorMap = new Map<string, string>();
const supplierList = Array.from(supplierDataMap.keys());
supplierList.forEach((supplier, index) => {
supplierColorMap.set(supplier, uniqueColors[index %
uniqueColors.length]);
});
// Convert supplier-wise data into chart series
const seriesData = supplierList.map(supplier => ({
type: "line",
name: supplier,
showInLegend: true,
xValueType: "dateTime",
yValueFormatString: "#,###₹",
lineColor: supplierColorMap.get(supplier),
markerSize: 8,
markerColor: supplierColorMap.get(supplier),
dataPoints: supplierDataMap.get(supplier) || []
}));
// Set up the chart options
this.chartOptions = {
animationEnabled: true,
theme: "light2",
exportEnabled: true,
zoomEnabled: true,
title: {
text: this.auctionTypeName === "Forward Auction"
? "Forward Auction Bids Over Time"
: this.auctionTypeName === "Reversed Auction"
? "Reversed Auction Bids Over Time"
: "Auction Bids Over Time",
},
axisX: {
title: "Date & Time",
valueFormatString: "DD MMM HH:mm",
labelAngle: -45,
},
axisY: {
title: "Bid Amount",
valueFormatString: "#,###",
includeZero: false
},
toolTip: {
contentFormatter: function (e: any) {
const dataPoint = e.entries[0].dataPoint;
return `Supplier Name:
<strong>${e.entries[0].dataSeries.name}</strong><br>
Bid Amount:
<strong>${dataPoint.y.toLocaleString()}</strong><br>
Time: ${dataPoint.x.toLocaleTimeString()}<br>
Date: ${dataPoint.x.toLocaleDateString()}`;
}
},
data: seriesData
};
}
},
(err) => {
console.error("Error fetching auction details", err);
}
);
}
}
