Spaces:
Sleeping
Sleeping
File size: 3,901 Bytes
0a2f730 53a369d 0a2f730 53a369d 0a2f730 53a369d 0a2f730 53a369d 0a2f730 53a369d 0a2f730 53a369d 0a2f730 53a369d 0a2f730 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | import { fetchVisualizations } from './api.js';
export async function loadVisualizations() {
const visDiv = document.getElementById('visualizations');
if (!visDiv) return;
visDiv.innerHTML = '<div class="spinner-border text-primary"></div>';
try {
const data = await fetchVisualizations();
visDiv.innerHTML = '';
renderVisualizations(data);
} catch (error) {
console.error('Error loading visualizations:', error);
visDiv.innerHTML = '<p class="text-danger">Error loading visualizations.</p>';
}
}
function renderVisualizations(data) {
const visDiv = document.getElementById('visualizations');
visDiv.innerHTML = `
<h5 class="text-center">Data Insights</h5>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4">
<canvas id="genreChart"></canvas>
</div>
<div class="col-lg-6 col-md-12 mb-4">
<canvas id="typeChart"></canvas>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12 mx-auto">
<canvas id="countryChart"></canvas>
</div>
</div>
</div>
`;
// Adjust chart sizes dynamically
const chartHeight = window.innerWidth < 768 ? 250 : 350;
createBarChart('genreChart', data.genre_distribution, 'bar', 'Top 10 Most Common Genres', chartHeight);
createPieChart('typeChart', data.type_distribution, 'Distribution of Movies vs. TV Shows');
createBarChart('countryChart', data.top_countries, 'horizontalBar', 'Top 5 Countries Producing Content', chartHeight);
}
function createBarChart(elementId, chartData, orientation, title, chartHeight = 350) {
if (!chartData || !chartData.data || Object.keys(chartData.data).length === 0) {
console.warn(`Missing or empty data for ${title}`);
return;
}
const ctx = document.getElementById(elementId).getContext('2d');
new Chart(ctx, {
type: orientation === 'horizontalBar' ? 'bar' : 'bar',
data: {
labels: Object.keys(chartData.data),
datasets: [{
label: chartData.y_label || 'Count',
data: Object.values(chartData.data),
backgroundColor: orientation === 'horizontalBar' ? 'rgba(255, 159, 64, 0.6)' : 'rgba(75, 192, 192, 0.6)',
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
indexAxis: orientation === 'horizontalBar' ? 'y' : 'x',
scales: {
x: { beginAtZero: true, title: { display: true, text: chartData.x_label || 'Category' } },
y: {
title: { display: true, text: chartData.y_label || 'Count' },
ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, font: { size: 12 } } // Improves readability
}
},
plugins: {
title: { display: true, text: title, font: { size: 16 } },
tooltip: { enabled: true }
}
}
});
// Adjust canvas height
document.getElementById(elementId).style.height = `${chartHeight}px`;
}
function createPieChart(elementId, chartData, title) {
if (!chartData || !chartData.data || Object.keys(chartData.data).length === 0) {
console.warn(`Missing or empty data for ${title}`);
return;
}
const ctx = document.getElementById(elementId).getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: Object.keys(chartData.data),
datasets: [{
data: Object.values(chartData.data),
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
title: { display: true, text: title, font: { size: 16 } },
tooltip: { enabled: true },
legend: { position: 'top' }
}
}
});
// Adjust pie chart size for smaller screens
document.getElementById(elementId).style.height = window.innerWidth < 768 ? '250px' : '350px';
}
|