92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
if (typeof Chart === "undefined") return;
|
|
|
|
const COLORS = ['#0d6efd', '#198754', '#dc3545', '#ffc107', '#0dcaf0'];
|
|
let priceChartInstance = null;
|
|
let rawChartData = [];
|
|
let currentProdId = null;
|
|
let currentProdName = "";
|
|
|
|
window.showHistory = async function (prodId, prodName) {
|
|
currentProdId = prodId;
|
|
currentProdName = prodName;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('chartModal'));
|
|
document.getElementById('chartModalTitle').innerText = 'Fluctuación de Precio: ' + prodName;
|
|
modal.show();
|
|
|
|
const res = await fetch(`/admin/api/productos/${prodId}/historial`);
|
|
rawChartData = await res.json();
|
|
|
|
// Initialize dates in input fields if not set or reset
|
|
const dates = rawChartData.map(d => d.fecha.split(' ')[0]);
|
|
if (dates.length > 0) {
|
|
document.getElementById('chartFilterDesde').value = dates[0];
|
|
document.getElementById('chartFilterHasta').value = dates[dates.length - 1];
|
|
} else {
|
|
document.getElementById('chartFilterDesde').value = '';
|
|
document.getElementById('chartFilterHasta').value = '';
|
|
}
|
|
|
|
renderChart();
|
|
};
|
|
|
|
function renderChart() {
|
|
const desde = document.getElementById('chartFilterDesde').value;
|
|
const hasta = document.getElementById('chartFilterHasta').value;
|
|
|
|
let filteredData = rawChartData;
|
|
if (desde) {
|
|
filteredData = filteredData.filter(d => d.fecha.split(' ')[0] >= desde);
|
|
}
|
|
if (hasta) {
|
|
filteredData = filteredData.filter(d => d.fecha.split(' ')[0] <= hasta);
|
|
}
|
|
|
|
const zonas = [...new Set(filteredData.map(d => d.zona))];
|
|
const fechas = [...new Set(filteredData.map(d => d.fecha.split(' ')[0]))].sort();
|
|
|
|
const datasets = zonas.map((zona, index) => {
|
|
let lastPrice = 0;
|
|
const dataPoints = fechas.map(f => {
|
|
const hits = filteredData.filter(d => d.zona === zona && d.fecha.startsWith(f));
|
|
if (hits.length > 0) {
|
|
lastPrice = hits[hits.length - 1].price;
|
|
}
|
|
return lastPrice;
|
|
});
|
|
return {
|
|
label: zona,
|
|
data: dataPoints,
|
|
borderColor: COLORS[index % COLORS.length],
|
|
backgroundColor: COLORS[index % COLORS.length],
|
|
stepped: true,
|
|
borderWidth: 2
|
|
};
|
|
});
|
|
|
|
const ctx = document.getElementById('priceChart').getContext('2d');
|
|
if (priceChartInstance) priceChartInstance.destroy();
|
|
|
|
priceChartInstance = new Chart(ctx, {
|
|
type: 'line',
|
|
data: { labels: fechas, datasets: datasets },
|
|
options: {
|
|
responsive: true,
|
|
interaction: { mode: 'index', intersect: false },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { callback: v => '$' + v.toLocaleString('es-CL') }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const btnFilter = document.getElementById('btnFilterChart');
|
|
if (btnFilter) {
|
|
btnFilter.addEventListener('click', renderChart);
|
|
}
|
|
});
|