File size: 4,655 Bytes
4deb54c |
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 |
const reset = document.getElementById("reset");
const currentClassProbabilitiesList = document.getElementById("class-probabilities");
const currentPredictedClass = document.getElementById('predicted-class')
const staticDiv = document.getElementById("static");
const dynamicDiv = document.getElementById("dynamic");
var chartData;
// Définir la fonction initializeChart en premier
function initializeChart(data, backgroundColor, borderColor, labels) {
// Créer une nouvelle instance Chart.js pour chaque élément canvas avec la classe 'bestSellers'
data = data.map(function (element) {
return parseFloat(element).toFixed(2);
});
document.querySelectorAll('.bestSellers').forEach(function (canvas) {
// Initialiser le graphique
new Chart(canvas, {
type: 'doughnut', // Définir le type de graphique sur doughnut
data: {
datasets: [{
data: data,
backgroundColor: backgroundColor,
borderColor: borderColor,
}],
labels: labels
},
options: {
responsive: true, // Rendre le graphique responsive
cutoutPercentage: 80, // Définir le pourcentage de découpe
legend: {
display: false, // Masquer la légende
},
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
datalabels: {
display: false,
align: 'center',
anchor: 'center'
}
}
}
});
});
}
document.addEventListener('DOMContentLoaded', function() {
loadResults();
});
function loadResults() {
fetch('/voice')
.then(response => response.text())
.then(html => {
const responseDOM = new DOMParser().parseFromString(html, "text/html");
const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
const PredictedClass = responseDOM.getElementById("predicted-class")
currentPredictedClass.innerHTML = PredictedClass.innerHTML;
var canvasElement = responseDOM.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
console.log(canvasElement);
chartData = canvasElement.getAttribute('data-chart');
console.log(chartData);
var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
var labels = JSON.parse(chartData).labels.slice(0, 5);
// Créer de nouveaux graphiques
loadDashboardScript(data, backgroundColor, borderColor, labels);
})
.catch(error => console.error('Error:', error));
}
function loadDashboardScript(data, backgroundColor, borderColor, labels) { // Correction ici
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = '../static/js/dashboard_pdf.js';
// Attendez que le script soit chargé avant d'appeler la fonction d'initialisation
scriptElement.onload = function () {
initializeChart(data, backgroundColor, borderColor, labels);
};
document.body.appendChild(scriptElement);
}
function destroyPreviousCharts() {
// Trouver tous les éléments canvas avec la classe 'bestSellers'
document.querySelectorAll('.bestSellers').forEach(function (canvas) {
// Récupérer l'instance du graphique
var chartInstance = Chart.getChart(canvas);
// Si une instance existe, détruire le graphique
if (chartInstance) {
chartInstance.destroy();
}
});
}
function createResponseElement(response) {
var pdfResponseElement = document.createElement('ul');
pdfResponseElement.classList.add('graph-legend-rectangle');
pdfResponseElement.innerHTML = response;
return pdfResponseElement;
}
// Modifiez la fonction reloadDashboardScript pour accepter les données supplémentaires
function reloadDashboardScript(data, backgroundColor, borderColor, labels) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = `../static/js/dashboard_pdf.js?data=${encodeURIComponent(JSON.stringify(data))}&backgroundColor=${encodeURIComponent(JSON.stringify(backgroundColor))}&borderColor=${encodeURIComponent(JSON.stringify(borderColor))}&labels=${encodeURIComponent(JSON.stringify(labels))}`;
document.body.appendChild(scriptElement);
}
|