Exo 1 pour Web-Reporting

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <!-- Définition des valeurs dans le code -->
    <script>
      var valeurs = [12, 5, 21, 18, 14],
          modalites = ["A", "B", "C", "E", "Z"];
    </script>
    <!-- 
      Chargement des scripts JS dans lesquels sont définis les fonctions
      de remplissage du tableau et de créations des graphiques
    -->
    <script src="script1.js"></script>
    <script src="script2.js"></script>
    <script src="script3.js"></script>
  </head>

  <body>
    <h1>Exemple</h1>
    <!-- 3 boutons pour exécuter les différents scripts -->
    <button onclick = "creationRendu1();">script 1</button>
    <button onclick = "creationRendu2();">script 2</button>
    <button onclick = "creationRendu3();">script 3</button>
    <!-- squelette du tableau à remplir -->
    <table id = "tableau">
      <caption>Données</caption>
      <thead>
        <tr><th>Libellé</th><th>Valeur</th></tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </body>

</html>

// Déclaration de la fonction de création du 1er graphique
var creationRendu2 = function() {
  // Récupération du pointeur sur body et création d'un div qui va contenir le graphique
  var body = document.getElementsByTagName("body")[0],
      graph = document.createElement("div");
  body.appendChild(graph);
  // définition de l'identifiant du graphique
  graph.id = "graph";
  // Pour chaque valeur, on créé un div
  valeurs.forEach(function (e, i) {
    // Création de la div
    var barre = document.createElement("div");
    // Définition de sa classe CSS (permettant de lui attribuer un style spécifique)
    barre.className = "bar";
    // Définition de la largeur (en fonction de la valeur) et de la hauteur (fixe)
    barre.style.width = (e*10)+"px";
    barre.style.height = "1em";
    // Définition de son contenu
    barre.innerHTML = modalites[i] + " : " + e;
    graph.appendChild(barre);
  });
};

/*
  Changement du style pour toute la page (sauf modification locale)
    Police d'écriture
    Couleur de fond
    Couleur de la police
*/
body {
  font-family: "Helvetica";
  background-color: black;
  color: #eee;
}

/* Spécification pour le titre général */
h1 {
  text-align: center;
  color: #ddd;
}

/* 
  Spécification pour le tableau
    la deuxième ligne permet de ne pas afficher le tableau 
*/
#tableau {
    margin: 10px;
    visibility: hidden;
}

/*
  Spécification pour le 1er graphique
    Pour la police, on définit en une fois sa taille et sa couleur
    Pour les barres, on passe par la classe "bar"
*/
#graph {
  background-color: white;
  color: #222;
  font: 80% "Courrier New";
  margin: 10px;
}
#graph .bar {
  background-color: orange;
  color: #111;
}

/* Code CSS pour 2ème graphique à faire */

# Exemple d'utilisation HTML, CSS et JS

## Pour un TP de Web-Reporting à destination d'étudiants de MIAGE Paris Descartes

Petit exemple d'utilisation de HTML, CSS et JS pour créer dynamiquement, à 
partir de données codées en dur, un tableau et un graphique à base de div.

## A faire

Créer un script permettant de faire un diagramme avec les contraintes suivantes :
- barres verticales, 
- largeur du graphique égale à celle de la fenêtre,
- largeur des barres en fonction du nombre de celles-ci (et donc du nombre de modalités),
- modalités affichées en dessous de chaque barre,
- valeurs affichées au dessus de chaque barre,
- résultat fonctionnel quelque soit le nombre de modalités données (tester avec
  différentes valeurs)
- changement de couleur de la barre sur laquelle passe la souris
- gestion des plusieurs clics sur les boutons :
  - le premier clique créé et affiche le diagramme
  - le deuxième le cache, sans le supprimer
  - le troisième l'affiche de nouveau, sans le recréer donc

Pour améliorer le graphique, on choisit de ne plus afficher directement la
valeur sur le graphique. On veut une fenêtre *pop-up* qui s'affiche lorsque la
souris passe sur une barre. Dans cette fenêtre, on veut la modalité et la valeur
associée. On souhaite que cette fenêtre suive le curseur de la souris. On doit
faire attention à l'affichage si la souris est proche d'un bord de la fenêtre.

Pour encode améliorer, on souhaite récupérer les données à partir d'un fichier
texte au format **JSON**, de ce type :
```
{
  valeurs: [12, 5, 21, 18, 14],
  modalites: ["A", "B", "C", "E", "Z"]
}
```

// Déclaration de la fonction de remplissage du tableau
var creationRendu1 = function() {
  /* 
    Création de deux variables pointeurs vers des éléments du DOM
      - le tableau (la partie tbody)
      - la balise body
  */
  var tableau = document.getElementById("tableau"),
      tabBody = tableau.getElementsByTagName("tbody")[0];
  /*
    Modification en JS du CSS
      - on rend visible le tableau
      - on aligne les cellules de tbody à droite
  */
  tableau.style.visibility = "visible";
  tabBody.style.textAlign = "right";
  /*
    Utilisation de la fonction forEach() sur un objet de type Array
      - permet d'itérer sur l'ensemble des valeurs du tableau
      - prend en paramètre soit une fonction prédéfinie, soit une fonction
        anonyme (définie directement) pouvant prendre deux paramètres :
          - la valeur actuelle (ici "e")
          - l'index de la valeur (ici "i")
    Pour chaque valeur, on va créer une ligne du tableau à deux cellules
  */
  valeurs.forEach(function(e, i) {
    /*
      Création d'éléments du DOM
        - tr : ligne du tableau
        - td : cellule d'une ligne (une pour la modalité, une pour la valeur)
    */
    var tr = document.createElement("tr"),
        tdMod = document.createElement("td"),
        tdVal = document.createElement("td");
    // définition du contenu de la cellule puis insertion dans la ligne
    tdMod.innerHTML = modalites[i];
    tr.appendChild(tdMod);
    // idem
    tdVal.innerHTML = e;
    tr.appendChild(tdVal);
    // insertion dans le tableau
    tabBody.appendChild(tr);
  })
};

var creationRendu3 = function() {
  // script JS pour création du 2ème graphique à faire
};