
        

$(document).ready(function () {
    
    let tab = [10, 20, 30, 40, 50 , 10, 20, 30, 40, 50];
    let tab1 = [15, 25, 35, 45, 55 , 10, 20, 30, 40, 50];
    
    var verif = false ;
    
    var verif1 = false ;
    let myChart;
    
    
    
    
    function createDefaultChart() {
    const ctx = document.getElementById('myChart').getContext('2d');

    
    const defaultData = {
        labels: ['Tesla', 'BMW', 'Porsche' , 'Ferrari' , 'Mustang', 'Audi' , 'Lamborghini' , 'Ford' , 'Jaguar' , 'mercedes' ], // Données fictives
        datasets: [{
            label: 'Prix ',
            data: [30000, 50000, 150000 , 125000 , 54000 , 80000 , 110000 , 35000 , 65000 , 75000 ], // Valeurs fictives
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)' ,
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ],
            // borderWidth: 1
            
        }]
    };

    const defaultConfig = {
        type: 'polarArea', // Type par défaut
        data: defaultData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom' // Position de la légende
                },
                title: {
                    display: true,
                    text: 'Voiture de sport non électrique'
                }
            }
        }
    };

    myChart = new Chart(ctx, defaultConfig);
}


    createDefaultChart();
    
    
   $('select, #prix, #place, #vitesse').on('change input', function () {
    // Initialiser toutes les variables à 0
    var voiture = $('#voiture').val(); // La valeur de voiture reste inchangée
    var prix = 0;
    var place = 0;
    var vitesse = 0;
    
    var choix = $(this).attr('id');

    // Mettre à jour uniquement la variable correspondant à l'élément modifié
    if (choix === "prix") {
        prix = $(this).val();
    } else if (choix === "place") {
        place = $(this).val();
    } else if (choix === "vitesse") {
        vitesse = $(this).val();
    } 
    
    
    

    // Afficher dans la console les valeurs
    console.log("Élément modifié : " + choix);
    console.log("Voiture : " + voiture);
    console.log("Prix : " + prix);
    console.log("Place : " + place);
    console.log("Vitesse : " + vitesse);
    
    verif = true ;
            
    console.log("verife :" , verif);

    // Requête AJAX
    $.ajax({
        url: 'car_data.php', // URL de votre fichier PHP
        type: 'POST', // Méthode d'envoi
        data: {
            voiture: voiture,
            prix: prix,
            place: place,
            vitesse: vitesse,
            
        },
        dataType: 'json', // Spécifier que la réponse sera en JSON
        success: function (res) {
            // Vérifier si l'API a renvoyé une erreur
            if (res.error) {
                console.error("Erreur serveur : " + res.error);
                return;
            }

        var nom = "";
        var titre = "";  
        if(prix > 0){
            nom = "Prix";
            titre = "Répartition des prix";
        }
        
        if(place > 0){
            nom = "Place";
            titre = "Répartition des places";
        }
        
        if(vitesse > 0){
            nom = "Vitesse";
            titre = "Répartition des vitesses";
        }
            

            // Récupérer les noms des colonnes dynamiquement
            const keys = Object.keys(res[0]); 

            // Dynamiser les labels et les valeurs selon les colonnes disponibles
            const labels = res.map(item => item[keys[0]]); // Utilisation de la première colonne (ex: 'Company Names')
            const values = res.map(item => item[keys[1]]); // Utilisation de la deuxième colonne (ex: 'Cars Prices')
            
            const prices = res.map(item => parseInt(item[keys[1]], 10));  // Ici, nous extrayons les prix
            
            tab = res.map(item => parseInt(item[keys[1]], 10));
            
            
            
            console.log("new tableau1 :" , tab);
            
            correlationCoefficient(tab, tab1 , verif , verif1);
           
            const sum = prices.reduce((acc, price) => acc + price, 0); // Additionner tous les prix
           
            
            const average = sum / 10 ;  // Calculer la moyenne
            
        

            document.getElementById('moyenne').innerHTML = `${average}`;
            
            
            // Calculer la variance
            function calculerVariance(tableau) {
                if (!Array.isArray(tableau)) {
                    throw new Error("L'entrée doit être un tableau.");
                }
            
                if (tableau.length !== 10) {
                    throw new Error("Le tableau doit contenir exactement 10 éléments.");
                }
            
                // Calculer la moyenne
                const moyenne1 = tableau.reduce((somme, valeur) => somme + valeur, 0) / tableau.length;
            
                // Calculer la variance
                const variance = tableau.reduce((somme, valeur) => somme + Math.pow(valeur - moyenne1, 2), 0) / tableau.length;
            
                return variance;
            }
            
            
               
            
                // Calcul de la variance
                const variance = calculerVariance(tab);
            
                console.log("Variance :", variance);
            
                // Affichage dans l'élément HTML
                document.getElementById('variance').innerHTML = `${Math.round(variance)}`;
            
            
            // Définir une palette de couleurs de base
            const baseColors = [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ];

            // Générer des couleurs dynamiquement si le nombre d'éléments est supérieur à 6
            const backgroundColor = Array.from({ length: values.length }, (_, i) => baseColors[i % baseColors.length]);
            const borderColor = Array.from({ length: values.length }, (_, i) => baseColors[i % baseColors.length].replace('0.5', '1'));

            // Définir les données pour le graphique
            const datas = {
                labels: labels,
                datasets: [{
                    label: nom,
                    data: values,
                    backgroundColor: backgroundColor,
                    borderColor: borderColor,
                    borderWidth: 1
                }]
            };

            // Vérifier si un graphique existe déjà et le détruire pour éviter des conflits
            if (myChart) {
                    myChart.destroy();
                }
               
                // Créer le graphique avec la nouvelle configuration
                const config = {
                    type: 'polarArea', // Choisir le type de graphique
                    data: datas,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom' // Position de la légende
                            },
                            title: {
                                display: true,
                                text: titre  // Titre du graphique
                            }
                        }
                    }
                };
                
                const ctx = document.getElementById('myChart').getContext('2d');
                myChart = new Chart(ctx, config);
            },
            
            error: function(xhr, status, error) {
            console.error("Erreur AJAX: " + status + ": " + error);
                    }
            
        });
        
        
   });
   
         


  
//   --------------------------------------------------------------------------------


    let myChart1;

function createDefaultChart2() {
    const ctx = document.getElementById('myChart1').getContext('2d');

    const defaultData = {
        labels: ['Tesla', 'BMW', 'Porsche'], // Données fictives
        datasets: [{
            label: 'Prix',
            data: [30000, 50000, 150000], // Valeurs fictives
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    };

    const defaultConfig = {
        type: 'bar',
        data: defaultData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: 'Voiture électrique'
                }
            }
        }
    };

    myChart1 = new Chart(ctx, defaultConfig);
}

// Appeler le graphique par défaut
createDefaultChart2();

// Écouteur pour les événements "change" et "input"
$('select, #price, #places, #vitesses').on('change input', function () {
    // Initialiser toutes les variables à 0
    let voitures = $('#voiture2').val();
    let price = 0;
    let places = 0;
    let vitesses = 0;
    
    const choose = $(this).attr('id');

    // Mettre à jour uniquement la variable correspondant à l'élément modifié
    if (choose === "price") {
        price = $(this).val();
    } else if (choose === "places") {
        places = $(this).val();
    } else if (choose === "vitesses") {
        vitesses = $(this).val();
    }
    
    verif1 = true ;
            
    console.log("verife1 :" , verif1);

    // Requête AJAX
    $.ajax({
        url: 'car_data2.php',
        type: 'POST',
        data: {
            voitures: voitures,
            price: price,
            places: places,
            vitesses: vitesses,
        },
        dataType: 'json',
        success: function (resp) {
            if (resp.error) {
                console.error("Erreur serveur : " + resp.error);
                return;
            }

            // Déterminer le titre et le label
            let nom = "";
            let titre = "";

            if (price > 0) {
                nom = "Prix";
                titre = "Prix des voitures électriques";
            }

            if (places > 0) {
                nom = "Place";
                titre = "Nombre de places des voitures électriques";
            }

            if (vitesses > 0) {
                nom = "Vitesse";
                titre = "Répartition des vitesses des voitures électriques";
            }

            // Récupérer les noms des colonnes dynamiquement
            const key = Object.keys(resp[0]);

            // Dynamiser les labels et les valeurs
            const labels = resp.map(item => item[key[0]].slice(0, 17));
            const values = resp.map(item => item[key[1]]);
            
            tab1 = resp.map(item => parseInt(item[key[1]], 10));
            
            
            
            console.log("new tableau2 :" , tab1);
            
            correlationCoefficient(tab, tab1 , verif , verif1);
            
            const prix = resp.map(item => parseInt(item[key[1]], 10));

            // Calculer la somme et la moyenne des prix
            const sum = prix.reduce((acc, price) => acc + price, 0);
            const average = sum / prix.length;
            
            

            // Afficher la moyenne
            document.getElementById('moyenne2').innerHTML = `${average}`;
            
            
            
            
            // Palette de couleurs
            const baseColors = [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ];

            const backgroundColor = Array.from({ length: values.length }, (_, i) => baseColors[i % baseColors.length]);
            const borderColor = Array.from({ length: values.length }, (_, i) => baseColors[i % baseColors.length].replace('0.5', '1'));

            // Configurer les données pour le graphique
            const datas = {
                labels: labels,
                datasets: [{
                    label: nom,
                    data: values,
                    backgroundColor: backgroundColor,
                    borderColor: borderColor,
                    borderWidth: 1
                }]
            };

            // Détruire l'ancien graphique s'il existe
            if (myChart1) {
                myChart1.destroy();
            }

            // Créer le graphique
            const config = {
                type: 'bar',
                data: datas,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: titre
                        }
                    }
                }
            };

            const ctx = document.getElementById('myChart1').getContext('2d');
            myChart1 = new Chart(ctx, config);
        },
        
        
        error: function (xhr, status, error) {
            console.error("Erreur AJAX: " + status + ": " + error);
        }
        
        
        
    });
    
   
});

correlationCoefficient(tab , tab1 , verif , verif1);

function correlationCoefficient(x, y , verif , verif1) {
            if (x.length !== y.length) {
                throw new Error("Les deux tableaux doivent avoir la même taille.");
            }
            
            if (verif == true && verif1 == true) {
                
            

            const n = x.length;

            const sumX = math.sum(x);
            const sumY = math.sum(y);
            const sumXY = math.sum(math.dotMultiply(x, y));
            const sumX2 = math.sum(x.map(val => val ** 2));
            const sumY2 = math.sum(y.map(val => val ** 2));

            const numerator = (n * sumXY) - (sumX * sumY);
            const denominator = Math.sqrt(
                (n * sumX2 - sumX ** 2) * (n * sumY2 - sumY ** 2)
            );
            
            
            let result = numerator / denominator;
            console.log("Coefficient de corrélation :" , result);
   

            console.log("tableau1 :" , x ,"tableau2 :" , y);

            document.getElementById('correlation').textContent = `${result.toFixed(2)}`;
            
            }
            
        }
    



   
   
});  
   
   
   
   
   
