|
|
@@ -626,7 +626,7 @@
|
|
|
|
|
|
const chartId = `courses-chart-${seasonKey}-${selectedCourseValue}`;
|
|
|
const tableId = `course-delta-table-${seasonKey}-${selectedCourseValue}`;
|
|
|
- const canvas = document.getElementById(chartId);
|
|
|
+ let canvas = document.getElementById(chartId);
|
|
|
const tableContainer = document.getElementById(tableId);
|
|
|
|
|
|
if (!canvas) {
|
|
|
@@ -640,18 +640,53 @@
|
|
|
@this.call('getCourseData', selectedCourseValue).then(courseData => {
|
|
|
console.log('Received course data:', courseData);
|
|
|
|
|
|
+ // Check if data is empty
|
|
|
+ if (courseData.isEmpty) {
|
|
|
+ console.log('No data available for course, showing message');
|
|
|
+
|
|
|
+ // Clear the table
|
|
|
+ if (tableContainer) {
|
|
|
+ tableContainer.innerHTML = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // Show message instead of chart
|
|
|
+ const chartContainer = canvas.parentElement;
|
|
|
+ chartContainer.innerHTML = `
|
|
|
+ <div class="chart-empty-state">
|
|
|
+ <div style="text-align: center; padding: 4rem 2rem;">
|
|
|
+ <div style="font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.3;">📊</div>
|
|
|
+ <h3 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #374151;">
|
|
|
+ ${courseData.message}
|
|
|
+ </h3>
|
|
|
+ <p style="font-size: 1rem; opacity: 0.7; margin: 0; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5;">
|
|
|
+ Questo corso non ha pagamenti registrati per la stagione selezionata.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
if (!courseData || !courseData.labels || courseData.labels.length === 0) {
|
|
|
console.log('No data available for chart');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
+ // Restore canvas if it was replaced by empty state
|
|
|
+ let canvasElement = document.getElementById(chartId);
|
|
|
+ if (!canvasElement) {
|
|
|
+ const chartContainer = canvas.parentElement;
|
|
|
+ chartContainer.innerHTML = `<canvas id="${chartId}"></canvas>`;
|
|
|
+ canvasElement = document.getElementById(chartId);
|
|
|
+ }
|
|
|
+
|
|
|
// Update the delta table
|
|
|
this.updateCourseTable(tableContainer, courseData.tableData);
|
|
|
|
|
|
// Store participant data for tooltip
|
|
|
const participantData = courseData.datasets.find(d => d.participantData)?.participantData || [];
|
|
|
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
+ const ctx = canvasElement.getContext('2d');
|
|
|
|
|
|
// Create gradients
|
|
|
const earnedGradient = ctx.createLinearGradient(0, 0, 0, 400);
|
|
|
@@ -680,7 +715,7 @@
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
- maintainAspectRatio: false, // This allows the chart to use full container height
|
|
|
+ maintainAspectRatio: false,
|
|
|
interaction: {
|
|
|
mode: 'index',
|
|
|
intersect: false,
|
|
|
@@ -701,7 +736,7 @@
|
|
|
ticks: {
|
|
|
font: {
|
|
|
weight: '600',
|
|
|
- size: 13 // Slightly larger font for better visibility
|
|
|
+ size: 13
|
|
|
},
|
|
|
color: '#6b7280'
|
|
|
},
|
|
|
@@ -720,7 +755,7 @@
|
|
|
},
|
|
|
ticks: {
|
|
|
font: {
|
|
|
- size: 12, // Larger font for better visibility
|
|
|
+ size: 12,
|
|
|
weight: '500'
|
|
|
},
|
|
|
color: '#6b7280',
|
|
|
@@ -746,7 +781,7 @@
|
|
|
cornerRadius: 12,
|
|
|
titleFont: {
|
|
|
weight: 'bold',
|
|
|
- size: 15 // Larger tooltip font
|
|
|
+ size: 15
|
|
|
},
|
|
|
bodyFont: {
|
|
|
size: 14,
|
FabioFratini