doctype html
//-
  _________________________________________________________________
  Page jade correspondant au résultat de la recherche de
  l'utilisateur, renvoie les quotas actuellement utiliser par
  l'utilisateur via un graphe en forme de camembert où on peut 
  trouver la taille des mails, du cloud, mais aussi l'espace libre qui
  reste souvent la limitation de l'utilisateur
  
  il y a aussi un autre graphe qui permet de voir (suit le nombre 
  de jour choisi a la page précédente) le total de place utiliser par
  rapport a la limite des jours précédents.

  Auteurs : Lauryne GAULTIER, GUIQUERRO Nathaniel
  _________________________________________________________________
 
html
  head(ng-app='myApp' ng-controller='myCtrl')
    link(href='/stylesheets/style.css' rel='stylesheet' type='text/css')
    title KAZ Quotas Individuels
    meta(charset='UTF-8')
    #entete
      h1(onclick="window.location.href = 'https://kaz.bzh/'") Résultat de la recherche pour 
      h1 #{data.nom}
    #main
      #menu
        img(src='/images/individuel.png' width='100%')
      #contenu
        #gauche
          p(style='display:none') #{data.dataChart}
          p(style='display:none') #{data.labels}
          p(style='display:none') #{data.Lim}
          canvas#myChart(display= 'inline-block' width='500'  height='600')
          script(src='https://cdn.jsdelivr.net/npm/chart.js')
          script.
            var dataC = (document.getElementsByTagName('p')[0].innerHTML).split(',');
            var lC = (document.getElementsByTagName('p')[1].innerHTML).split(',');
            var limC = (document.getElementsByTagName('p')[2].innerHTML).split(',');



            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
            datasets: [{
            label: 'Unité de mesure :MB',
            data: dataC,
            backgroundColor: [
            'rgba(242, 132, 158, 0.2)'
            ],
            borderColor: [
            'rgba(242, 132, 158, 1)'
            ],
            borderWidth: 1
            }, {
            label: 'Limite quotas',
            data: limC,
            type: 'line',
            borderColor: 'black'
            }],
            labels: lC
            }
            });
        #droite
          p(style='display:none') #{data.Postfix}
          p(style='display:none') #{data.NextCloud}
          p Votre Quota actuel #{data.Dateduprélevement}
          canvas#myChart2(display='inline-block' height='300')
          script.
            var dPost = (document.getElementsByTagName('p')[3].innerHTML).split(',');
            var dNext = (document.getElementsByTagName('p')[4].innerHTML).split(',');
            var dDate = (document.getElementsByTagName('p')[5].innerHTML).split(',');
            var dLabel = ('Votre Quota actuel' + dDate);
      
            pPost = ((dPost*100)/limC[limC.length - 1]);
            pNetf = ((dNext*100)/limC[limC.length - 1]);
            var pLibre = (100-(pPost+pNetf));
      
            var tableauDonne = [pPost,pNetf,pLibre];
          

            var ctxy = document.getElementById('myChart2').getContext('2d');
            var myCharty = new Chart(ctxy, {
            type: 'pie',
            data: {
            datasets: [{
            label: dLabel,
            data: tableauDonne,
            backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1,
            hoverOffset: 4
            }],
            labels: ["Mail","NextCloud","Espace Libre"]
            }
            });
    #footer
      button(onclick="window.location.href = '/users';") Retour
      br
      p  Site réalisé par les étudiants du département informatique sous la direction de F. Merciol & N. Le Sommer et G. Kerbellec durant l'année 2021-2022