//===========================================================================//
// Visoalisation formation D3.js                      Par Jérémy FOUQUAT     //
//===========================================================================//


//=============================================//
//            1. Dataset management            //
//=============================================//
let dataset = null;
d3.csv("shot_logs.csv", function(error, data) {

    //=========================================//
    // 1.1. Select and rename attributes       //
    //=============================================================//
    // QUESTION_1 : Utiliser la fonction map sur les données       //
    //            : Retourner le nom du joueur (player_name) et si //
    //            : le tir est réussi ou non (fgm)                 //
    //=============================================================//
    dataset_field_goal = data.map( function(d){
        return {
            matchup: d.MATCHUP,
            location_game: d.LOCATION,
            shot_number: d.SHOT_NUMBER,
            dribbles: d.DRIBBLES,
            touch_time: d.TOUCH_TIME,
            shot_dist: d.SHOT_DIST,
            pts_type: d.PTS_TYPE,
            shot_result: d.SHOT_RESULT,
            fgm: d.FGM,
            pts: d.PTS,
            player_name: d.player_name,
            player_id: d.player_id
        }
    });

    //=========================================//
    // 1.2. Call visualisation function        //
    //=========================================//

    visualisation_01(dataset_field_goal);

});


//=============================================//
//         2. Visualisation management         //
//=============================================//
function visualisation_01(dataset){

    //=========================================//
    // 2.1. Variables management               //
    //=============================================================//
    // REMARQUE_1 : Nous allons faire une liste de joueurs. Pour   //
    //            : chaque joueur, nous allons retenir le nombre   //
    //            : de panier mis, ainsi que le nombre de tirs     //
    //            : pris dans une saison                           //
    //=============================================================//
    let dataset_reworked = [],

        x_domain_min = 0,
        x_domain_max = 0,
        y_domain_min = 0,
        y_domain_max = 0,

        x_scale = null,
        y_scale = null,

        svg_width = 1024,
        svg_height = 728,

        margin_top = 20,
        margin_bottom = 20,
        margin_left = 20,
        margin_right = 20,

        padding_top = 20,
        padding_bottom = 40,
        padding_left = 40,
        padding_right = 40,

        width = svg_width - margin_left - margin_right - padding_left - padding_right,
        height = svg_height - margin_top - margin_bottom - padding_top - padding_bottom,

        svg_viz = null,
        x_grid_chart = null,
        y_grid_chart = null,
        x_axis_chart = null,
        y_axis_chart = null,
        chart = null,
        tooltip_chart = null;


    //=========================================//
    // 2.2. Dataset modifications              //
    //=============================================================//
    // REMARQUE_2 : Nous allons faire une liste de joueurs. Pour   //
    //            : chaque joueur, nous allons retenir le nombre   //
    //            : de panier mis, ainsi que le nombre de tirs     //
    //            : pris dans une saison                           //
    //=============================================================//
    dataset.forEach(function(d,i) {

        // Première insertion
        if (dataset_reworked.find( function(elem) { return elem.nom == d.player_name; } ) == undefined)
            dataset_reworked.push({nom: d.player_name, fgm: Number(d.fgm), fga: 1});

        // Ajout de données
        else {
            dataset_reworked[ dataset_reworked.findIndex( function(elem) {
                              return elem.nom == d.player_name;
                            })
                            ].fgm += Number(d.fgm) ;
            dataset_reworked[ dataset_reworked.findIndex( function(elem) {
                              return elem.nom == d.player_name;
                            })
                            ].fga++ ;
        }
    });


    //=========================================//
    // 2.3. Domains and scales management      //
    //=============================================================//
    // QUESTION_2 : Mettre dans les variables ci-dessous           //
    //            : x_domain_max = Le nombre maximal de tir pris   //
    //            : par un joueur                                  //
    //            : y_domain_max = Le nombre maximal de panier mis //
    //            : par un joueur                                  //
    //=============================================================//
    x_domain_max = d3.max(dataset_reworked, function(d) { return d.fga; });
    y_domain_max = d3.max(dataset_reworked, function(d) { return d.fgm; });


    //=============================================================//
    // QUESTION_3 : Mettre dans les variables ci-dessous           //
    //            : x_scale = L'échelle (linéaire) des X           //
    //            : y_scale = L'échelle (linéaire) des Y           //
    //            : Fixer les paramètres domain et range           //
    //
    //=============================================================//
    x_scale = d3.scaleLinear()
        .domain([x_domain_min, x_domain_max * 1.05])
        .range([0, width]);

    y_scale = d3.scaleLinear()
        .domain([y_domain_min, y_domain_max * 1.05])
        .range([height, 0]);


    //=============================================================//
    // QUESTION_8 : Créer une échelle de couleur pour les points du//
    //            : nuage                                          //
    //=============================================================//
    percentage_scale = d3.scaleLinear()
        // .domain([0.3 ,0.7])
        .domain([0.3, 0.5 ,0.7])
        // .range(['red', 'green'])
        .range(['red', 'yellow', 'green'])
        //.interpolate(d3.interpolateHsl)
        //.interpolate(d3.interpolateHcl)
        //.interpolate(d3.interpolateLab)
        //.interpolate(d3.interpolateRgb)
        //.interpolate(d3.interpolateCubehelixLong)
        ;


    //=========================================//
    // 2.4. Container management               //
    //=============================================================//
    // QUESTION_4 : Inspirez-vous de l'exemple 02 du cours et de   //
    //            : d3js_lab01_expected_result.png pour placer vos //
    //            : balise/containeur <g>                          //
    //=============================================================//
    svg_viz = d3.select('body').append('svg')
        .attr('class',"svg_viz_01")
        .attr('width', svg_width)
        .attr('height', svg_height);

    x_grid_chart = svg_viz.append('g')
        .attr('class',"x_grid_viz_01")
        .attr('width', width)
        .attr('height', padding_bottom)
        .attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");

    y_grid_chart = svg_viz.append('g')
        .attr('class',"y_grid_viz_01")
        .attr('width', padding_left)
        .attr('height', height)
        .attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");

    x_axis_chart = svg_viz.append('g')
        .attr('class',"x_axis_viz_01")
        .attr('width', width)
        .attr('height', padding_bottom)
        .attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top + height) + ")");

    y_axis_chart = svg_viz.append('g')
        .attr('class',"y_axis_viz_01")
        .attr('width', padding_left)
        .attr('height', height)
        .attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");

    chart = svg_viz.append('g')
        .attr('class',"chart_viz_01")
        .attr('width', width)
        .attr('height', height)
        .attr("transform", "translate(" + (margin_left + padding_left) + "," + (margin_top + padding_top) + ")");


    //=============================================================//
    // QUESTION_9 : Créer une balise <div> avec une opacité de 0   //
    //            : représentant le tooltip                        //
    //=============================================================//
    tooltip_chart = d3.select("body").append("div")
        .attr("class", "tooltip_viz_01")
        .text("LOL")
        .style("opacity", 0);



    //=========================================//
    // 2.5. x-axis/grid management             //
    //=============================================================//
    // QUESTION_5 :  Utiliser la fonction d3.axisBottom() pour     //
    //            :  créer l'axe et la grille des x (tirs tentés)  //
    //=============================================================//
    x_grid_chart.call(
        d3.axisBottom(x_scale)
            .tickSizeInner(-height)
            .tickSizeOuter(0)
            .tickPadding(20)
    );

    x_axis_chart.call(
        d3.axisBottom(x_scale)
            .tickSizeInner(0)
            .tickSizeOuter(-height)
            .tickPadding(20)
    );


    //=========================================//
    // 2.6. y-axis/grid management             //
    //=============================================================//
    // QUESTION_6 :  Utiliser la fonction d3.axisBottom() pour     //
    //            :  créer l'axe et la grille des y (tirs réussis) //
    //=============================================================//
    y_grid_chart.call(
        d3.axisLeft(y_scale)
            .tickSizeInner(-width)
            .tickSizeOuter(0)
            .tickPadding(20)
    );

    y_axis_chart.call(
        d3.axisLeft(y_scale)
            .tickSizeInner(0)
            .tickSizeOuter(-width)
            .tickPadding(20)
    );


    //=========================================//
    // 2.7. Point management                  //
    //=============================================================//
    // QUESTION_7 :  Créer maintenant le nuage de point. Pour cela://
    //            :  1 - Lier le dataset à des cercles svg         //
    //            : "cercle" == "joueur"                           //
    //            :  2 - Placer les cercles dans des coordonnées   //
    //            :  (x = tir tenté, y = tir réussi)               //
    //            :  3 - Ajuster la couleur du joueur en fonction  //
    //            :  du % de réussite du joueur                    //
    //=============================================================//
    // QUESTION_10 : Gérer le tooltip avec la fonction .on() pour  //
    //            : afficher le nom et le % au tir du joueur       //
    //=============================================================//
    chart.selectAll()
        .data(dataset_reworked)
        .enter().append('circle')
            .attr("r", 5)
            .attr("cx", function(d) {
                return x_scale(d.fga);
            })
            .attr("cy", function(d) {
                return y_scale(d.fgm);
            })
            .attr("fill", function(d) {
                return "" + percentage_scale( (d.fgm / d.fga).toPrecision(2) ) + "" ;
            })
            .on("mouseover", function(d) {
                d3.select(this).attr('r', 15);
                tooltip_chart.style("opacity", 1)
                    .html(d.nom + "<br/>"  + (d.fgm / d.fga).toPrecision(2) + " %")
                    .style("left", (d3.event.pageX + 20) + "px")
                    .style("top", (d3.event.pageY - 15) + "px");
            })
            .on("mouseout", function(d) {
                d3.select(this).attr('r', 5);
                tooltip_chart.style("opacity", 0);
            });


}
