{% 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.2);

  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 => {

    // waiting for structure of the form:
    //
    var periods = Object.keys(data)
    var first_stacked_charges = Object.values(data)[0]
    var projects = Object.keys(first_stacked_charges)
    console.log(projects)

    // periods = data
    var x = d3.scaleBand()
        .domain(periods)
        .range([0, width])
        .padding(0.2)

    svg.append('g')
        .attr('transform', 'translate(20, ' + height + ')')
        .call(d3.axisBottom(x).tickSizeOuter(0));

    var y = d3.scaleLinear()
        .domain([0, 100])
        .range([height, 0])

    svg.append('g')
        .attr('transform', 'translate(20, 0)')
        .call(d3.axisLeft(y))

    var color = d3.scaleOrdinal()
        .domain(projects)
        .range(['#e41a1c', '#377eb8', '#4daf4a',
          "#800000",
          "#FFFF00",
          "#808000",
          "#00FF00",
          "#008000",
          "#00FFFF",
          "#008080",
          "#0000FF",
          "#000080",
          "#FF00FF",
          "#800080",
        ]);

    var stack_generator = d3.stack()
        .keys(projects)

    var stackable_data = []
    Object.keys(data).forEach( function (period){
      line = data[period];
      line['period']=period;
      stackable_data.push(line)
    });

    var stacked_data = stack_generator(stackable_data)

    // var sel = d3.select("#demo2")
    //     .select('g')
    //     .selectAll('g.series')
    //     .data(stackedSeries)
    //     .join('g')
    //     .classed('series', true)
    //     .style('fill', (d) => colorScale(d.key));
    //
    // sel.selectAll('rect')
    //     .data((d) => d)
    //     .join('rect')
    //     .attr('width', 40)
    //     .attr('y', (d) => yScale(d[1]))
    //     .attr('x', (d) => xScale(d.data.month) - 20)
    //     .attr('height', (d) => yScale(d[0]) - yScale(d[1]));

    svg.append('g')
        .selectAll('g')
        .data(stacked_data)
        .enter().append('g')
        .attr("fill", function (d) {
          return color(d.key);
        })
        .selectAll("rect")
        // enter a second time = loop subgroup per subgroup to add all rectangles
        .data(d => d)

        .enter().append("rect")

        .attr("x", d => x(d.data.period) + 20)
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))

        .attr("width", x.bandwidth())

        .on("mouseover", function (e, d) {

          console.log(d)

          div.transition()
              .duration(200)
              .style("opacity", .9);

          div.html("Charge: " + d)

              .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 %}