{% extends "base_page.html" %}

{% block more_heads %}

<style type="text/css">
  #charge_div {
    background-color: #fAfAfA;
    border: 1pt solid black;
    display: inline-block;
  }

  rect.bar:hover {
    fill: dimgrey;
  }

  rect.bar {
    fill: rgb(127, 127, 159);
  }

  .tooltip {
    position: absolute;
    opacity: 0.8;
    z-index: 1000;
    text-align: left;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 8px;
    color: #fff;
    background-color: #000;
    font: 12px sans-serif;
    max-width: 300px;
  }

</style>

{% endblock %}

{% block content %}

<div id="charge_div"></div>

{% endblock %}

{% block more_scripts %}

{% include 'd3js-includes.html' %}
<script>

  const margin = {top: 40, right: 40, bottom: 90, left: 120},
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  const x = d3.scaleBand()
      .range([0, width])
      .padding(0.1);

  const y = d3.scaleLinear()
      .range([height, 0]);

  const svg = d3.select("#charge_div").append("svg")
      .attr("id", "svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  const div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

  // On demande à D3JS de charger notre fichier
  d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {
    // Conversion des caractères en nombres
    data.forEach(d => d.charge = +d.charge);

    // Mise en relation du scale avec les données de notre fichier
    // Pour l'axe X, c'est la liste des pays
    // Pour l'axe Y, c'est le max des charge
    x.domain(data.map(d => d.periode));
    y.domain([0, d3.max(data, d => d.charge)]);

    // Ajout de l'axe X au SVG
    // Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
    // Selection des noeuds text, positionnement puis rotation
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).tickSize(10))
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");

    // Ajout de l'axe Y au SVG avec 6 éléments de légende en utilisant la fonction ticks (sinon D3JS en place autant qu'il peut).
    svg.append("g")
        .call(d3.axisLeft(y).ticks(6));

    // Ajout des bars en utilisant les données de notre fichier data.tsv
    // La largeur de la barre est déterminée par la fonction x
    // La hauteur par la fonction y en tenant compte de la charge
    // La gestion des events de la souris pour le popup
    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.periode))
        .attr("width", x.bandwidth())
        .attr("y", d => y(d.charge))
        .attr("height", d => height - y(d.charge))
        .on("mouseover", function (e, d) {
          div.transition()
              .duration(200)
              .style("opacity", .9);
          div.html("Charge: " + d.charge)
              .style("left", (e.x + 10) + "px")
              .style("top", (e.y - 50) + "px");
        })
        .on("mouseout", function (d) {
          div.transition()
              .duration(500)
              .style("opacity", 0);
        });
  });
</script>

{% endblock %}