Initial commit
This commit is contained in:
Ronald Huynen
411
resources/js/return-ratio-chart.js
Normal file
411
resources/js/return-ratio-chart.js
Normal file
@@ -0,0 +1,411 @@
|
||||
import { Chart, registerables } from 'chart.js';
|
||||
|
||||
Chart.register(...registerables);
|
||||
|
||||
window.initReturnRatioChart = function(timelineData, trendData = []) {
|
||||
const chartCanvas = document.getElementById('returnRatioChart');
|
||||
if (!chartCanvas || !timelineData || timelineData.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get data range for better debugging
|
||||
const values = timelineData.map(item => item.return_ratio);
|
||||
const minValue = Math.min(...values);
|
||||
const maxValue = Math.max(...values);
|
||||
|
||||
const ctx = chartCanvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Destroy existing chart if it exists
|
||||
if (chartCanvas.chart) {
|
||||
chartCanvas.chart.destroy();
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
// Prepare datasets - trend line first to ensure it renders behind the main line
|
||||
const datasets = [];
|
||||
|
||||
// Add trend line first (renders behind)
|
||||
if (trendData && trendData.length > 0) {
|
||||
datasets.push({
|
||||
label: 'Trend Line',
|
||||
data: trendData.map(item => item.trend_value),
|
||||
borderColor: '#DC2626', // red-600 for better visibility
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 3, // Increased width for better visibility
|
||||
borderDash: [8, 4], // Adjusted dash pattern for better visibility
|
||||
tension: 0, // Linear regression line (straight)
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
order: 1, // Render behind main line
|
||||
});
|
||||
}
|
||||
|
||||
// Add main return ratio line (renders on top)
|
||||
datasets.push({
|
||||
label: 'Reciprocity Rate %',
|
||||
data: timelineData.map(item => item.return_ratio),
|
||||
borderColor: '#000', // black
|
||||
backgroundColor: 'rgba(107, 114, 128, 0.1)', // Reduced opacity for less interference
|
||||
borderWidth: 3,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: '#000', // black
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 6,
|
||||
pointHoverRadius: 8,
|
||||
order: 0, // Render on top
|
||||
});
|
||||
|
||||
// Get translated labels from the first data point
|
||||
const translations = timelineData[0]?.translations || {
|
||||
period: 'Period',
|
||||
return_ratio: 'Reciprocity Rate'
|
||||
};
|
||||
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: timelineData.map(item => item.label),
|
||||
datasets: datasets
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: '#1F2937'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
external: function(context) {
|
||||
const tooltip = context.tooltip;
|
||||
let tooltipEl = document.getElementById('custom-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.id = 'custom-tooltip';
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.background = 'rgba(0, 0, 0, 0.8)';
|
||||
tooltipEl.style.color = 'white';
|
||||
tooltipEl.style.border = '2px solid white';
|
||||
tooltipEl.style.borderRadius = '8px';
|
||||
tooltipEl.style.pointerEvents = 'none';
|
||||
tooltipEl.style.transform = 'translate(-50%, 0)';
|
||||
tooltipEl.style.transition = 'all .1s ease';
|
||||
tooltipEl.style.padding = '10px';
|
||||
tooltipEl.style.fontSize = '12px';
|
||||
tooltipEl.style.fontFamily = 'Arial, sans-serif';
|
||||
tooltipEl.style.zIndex = '9999';
|
||||
tooltipEl.style.boxShadow = 'none';
|
||||
tooltipEl.style.outline = 'none';
|
||||
document.body.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = '0';
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map(b => b.lines);
|
||||
|
||||
let innerHtml = '';
|
||||
|
||||
// Add title
|
||||
titleLines.forEach(function(title) {
|
||||
innerHtml += '<div style="font-weight: bold; margin-bottom: 5px;">' + title + '</div>';
|
||||
});
|
||||
|
||||
// Add body with color indicators
|
||||
bodyLines.forEach(function(body, i) {
|
||||
const colors = tooltip.labelColors[i];
|
||||
const colorBox = '<span style="display: inline-block; width: 12px; height: 12px; background-color: ' +
|
||||
colors.backgroundColor + '; border: 1px solid ' + colors.borderColor +
|
||||
'; margin-right: 5px; vertical-align: middle;"></span>';
|
||||
|
||||
// Fix the label based on dataset order (trend first, return ratio second)
|
||||
let label = body[0];
|
||||
if (i === 0) {
|
||||
// First dataset = Trend Line (red)
|
||||
label = 'Trend: ' + label.split(': ')[1];
|
||||
} else {
|
||||
// Second dataset = Reciprocity Rate (gray)
|
||||
label = 'Reciprocity Rate: ' + label.split(': ')[1];
|
||||
}
|
||||
|
||||
innerHtml += '<div style="margin: 2px 0;">' + colorBox + label + '</div>';
|
||||
});
|
||||
|
||||
tooltipEl.innerHTML = innerHtml;
|
||||
}
|
||||
|
||||
const position = context.chart.canvas.getBoundingClientRect();
|
||||
tooltipEl.style.opacity = '1';
|
||||
tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: translations.period,
|
||||
color: '#6B7280'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: '#6B7280'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: translations.return_ratio,
|
||||
color: '#6B7280'
|
||||
},
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: '#6B7280',
|
||||
callback: function(value) {
|
||||
return Math.round(value) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Store chart reference for cleanup
|
||||
chartCanvas.chart = chart;
|
||||
|
||||
// Store chart instance globally for PDF export
|
||||
window.returnRatioChart = chart;
|
||||
|
||||
// Set canvas height
|
||||
chartCanvas.style.height = '300px';
|
||||
|
||||
// Hide loading indicator
|
||||
const loadingIndicator = document.getElementById('chartLoadingIndicator');
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
|
||||
return chart;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Livewire integration for chart initialization and PDF handling
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('openPdf', (url) => {
|
||||
if (url) {
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
||||
// Function to initialize chart
|
||||
function initializeChart() {
|
||||
|
||||
// Find chart container
|
||||
const chartContainer = document.querySelector('[data-chart-data]');
|
||||
if (!chartContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get chart data
|
||||
const timelineDataAttr = chartContainer.getAttribute('data-chart-data');
|
||||
const trendDataAttr = chartContainer.getAttribute('data-trend-data');
|
||||
|
||||
if (!timelineDataAttr) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const timelineData = JSON.parse(timelineDataAttr);
|
||||
const trendData = trendDataAttr ? JSON.parse(trendDataAttr) : [];
|
||||
|
||||
// Initialize the chart
|
||||
if (typeof window.initReturnRatioChart === 'function') {
|
||||
window.initReturnRatioChart(timelineData, trendData);
|
||||
} else {
|
||||
}
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize chart on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(initializeChart, 100);
|
||||
});
|
||||
|
||||
// Listen for Livewire updates - debounced
|
||||
let morphTimer = null;
|
||||
Livewire.hook('morph.updated', () => {
|
||||
clearTimeout(morphTimer);
|
||||
morphTimer = setTimeout(() => {
|
||||
initializeChart();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Function to export Return Ratio chart as base64 image for PDF
|
||||
window.exportReturnRatioChartForPdf = async function() {
|
||||
|
||||
if (!window.returnRatioChart) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const originalChart = window.returnRatioChart;
|
||||
|
||||
// Render into an offscreen canvas to avoid touching the live DOM canvas
|
||||
const pdfWidth = 900;
|
||||
const pdfHeight = 400;
|
||||
|
||||
const offscreen = document.createElement('canvas');
|
||||
offscreen.width = pdfWidth;
|
||||
offscreen.height = pdfHeight;
|
||||
const ctx = offscreen.getContext('2d');
|
||||
|
||||
const offscreenChart = new Chart(ctx, {
|
||||
type: originalChart.config.type,
|
||||
data: JSON.parse(JSON.stringify(originalChart.config.data)),
|
||||
options: {
|
||||
...JSON.parse(JSON.stringify(originalChart.config.options || {})),
|
||||
responsive: false,
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for render
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
const chartImage = offscreen.toDataURL('image/png', 1.0);
|
||||
|
||||
offscreenChart.destroy();
|
||||
|
||||
return chartImage;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Find the SingleReport Livewire component by looking for its unique DOM marker
|
||||
window.findSingleReportComponent = function() {
|
||||
if (!window.Livewire) return null;
|
||||
// Primary: use the dedicated id marker on the single-report root div
|
||||
const marker = document.getElementById('single-report-component');
|
||||
if (marker) {
|
||||
const wireElement = marker.closest('[wire\\:id]');
|
||||
if (wireElement) {
|
||||
return window.Livewire.find(wireElement.getAttribute('wire:id'));
|
||||
}
|
||||
}
|
||||
// Fallback: scan for unique child elements
|
||||
const elements = document.querySelectorAll('[wire\\:id]');
|
||||
for (let element of elements) {
|
||||
if (
|
||||
element.querySelector('[data-chart-data]') ||
|
||||
element.querySelector('[data-balance-chart-data]') ||
|
||||
element.querySelector('#returnRatioChart') ||
|
||||
element.querySelector('#accountBalancesChart') ||
|
||||
element.querySelector('#account-balances') ||
|
||||
element.querySelector('#transaction-types')
|
||||
) {
|
||||
return window.Livewire.find(element.getAttribute('wire:id'));
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Function to export both charts and send to Livewire for PDF generation
|
||||
window.exportPdfWithChart = async function() {
|
||||
|
||||
// Export Return Ratio Chart
|
||||
const returnRatioChartImage = await window.exportReturnRatioChartForPdf();
|
||||
|
||||
// Export Account Balances Chart (if available)
|
||||
let accountBalancesChartImage = null;
|
||||
if (window.accountBalancesChart) {
|
||||
accountBalancesChartImage = await window.exportAccountBalancesChartForPdf();
|
||||
}
|
||||
|
||||
// If neither chart is available, fall back to regular PDF export
|
||||
if (!returnRatioChartImage && !accountBalancesChartImage) {
|
||||
if (window.Livewire) {
|
||||
const component = window.findSingleReportComponent();
|
||||
if (component) {
|
||||
component.call('exportPdf');
|
||||
} else {
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Read date range and decimal format from DOM
|
||||
const chartContainer = document.querySelector('[data-balance-chart-data]') || document.querySelector('[data-chart-data]');
|
||||
let fromDate = null;
|
||||
let toDate = null;
|
||||
let decimalFormat = false;
|
||||
|
||||
if (chartContainer) {
|
||||
const dateRange = chartContainer.getAttribute('data-date-range');
|
||||
if (dateRange) {
|
||||
const dates = dateRange.split(' to ');
|
||||
if (dates.length === 2) {
|
||||
fromDate = dates[0].trim();
|
||||
toDate = dates[1].trim();
|
||||
}
|
||||
}
|
||||
decimalFormat = chartContainer.getAttribute('data-decimal-format') === '1';
|
||||
}
|
||||
|
||||
if (window.Livewire) {
|
||||
try {
|
||||
const component = window.findSingleReportComponent();
|
||||
if (!component) {
|
||||
throw new Error('SingleReport Livewire component not found');
|
||||
}
|
||||
await component.call('exportPdfWithCharts', returnRatioChartImage, accountBalancesChartImage, fromDate, toDate, decimalFormat);
|
||||
} catch (error) {
|
||||
try {
|
||||
const comp = window.findSingleReportComponent();
|
||||
if (comp) {
|
||||
await comp.call('exportPdf');
|
||||
}
|
||||
} catch (fallbackError) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user