{{ timeline|json_script:"timeline-data"}}

<script nonce="{{ request.csp_nonce }}">

var data = JSON.parse(document.getElementById('timeline-data').textContent);

function drawMemberTimeline(data, mode) {

  var opts = {
    tickHeight: 150,
    activityRangeHeight: 121,
    viewBoxHeight: 350
  }
  // for simpler graph:
  // tick height 70
  // activity range height 40
  // don't draw subscription or borrows
  if (mode == 'simple') {
    opts.tickHeight = 70;
    opts.activityRangeHeight = 40;
    opts.viewBoxHeight = 150;
  }

  // if member has no activity, don't draw anything
  if (! data.activity_ranges.length) {
    return
  }

  var x = d3.scaleTime()
      // timeline of the libarary
      .domain([new Date(1919, 1, 1), new Date(1942, 12, 31)])
      // For testing: restrict to member dates
      // NOTE: needs padding on either end and probably a minimum length
      // .domain([new Date(data.membership_activities[0].startDate),
               // new Date(data.membership_activities[data.membership_activities.length - 1].endDate)])
      .range([0, 911]);

  // draw the axis along the top
  var axis = d3.axisTop(x);
  var svg = d3.select(".timeline").insert('svg', '.description')
        .attr('preserveAspectRatio', 'xMidYMid meet')
        .attr('viewBox', '0 0 905 ' + opts.viewBoxHeight)
        .attr('aria-label', 'Chart: Member Timeline')
        .attr('aria-describedby', 'member-timeline-desc')
        .attr('role', 'img')
        .attr('id', mode + '-timeline');

  svg.append("g")
        .attr("transform", "translate(0,30)")
        .call(axis)
        .call(g => g.selectAll(".tick text")
            .attr("aria-hidden", 'true'))
        .call(g => g.selectAll(".tick line")
            .attr("stroke", '#231F20')
            .attr("stroke-width", '0.5')
            .attr("y2", opts.tickHeight)
            .attr("y1", 0))
        // remove domain path automatically added by d3 axis
        .call(g => g.select(".domain").remove())


  // horizontal bars indicating any membership activity

  // minimum activity width, so that single-day ranges will be visible
  var minActivityWidth = 1.2;

  svg.append('g')
      .attr('class', 'activityrange-bars')
    .selectAll('bar')
    .data(data.activity_ranges)
    .join(
      enter => enter.append("rect")
        .attr('class', 'overallActivities')
        .attr('x', function(d) {
          return x(new Date(d.startDate))
         })
        .attr('y', 60)
        .attr("fill", "#231F20")
        .attr("opacity", "0.2")
        .attr("width", function (d) {
            return Math.max(x(new Date(d.endDate)) - x(new Date(d.startDate)), minActivityWidth);
        })
        .attr("height", opts.activityRangeHeight)
      )

  // don't draw subscriptions or borrows in simple mode
  if (mode == 'full') {

  // ** markers for subscription start and end dates **
  // start date; skip any where start date is not set
  svg.append('g')
      .attr('class', 'subscription-start')
    .selectAll('circle')
    .data(data.membership_activities.filter(event => event.startDate))
    .join(
      enter => enter.append("circle")
        .attr('class', 'start-date')
        .attr('cx', function(d) {
          return x(new Date(d.startDate))
         })
        .attr('cy', 60)
        .attr('r', 3)
        .attr("fill", "black")
    )
  // end date; skip any where end date is not set
  svg.append('g')
      .attr('class', 'subscription-end')
    .selectAll('circle')
    .data(data.membership_activities.filter(event => event.endDate))
    .join(
      enter => enter.append("circle")
        .attr('class', 'end-date')
        .attr('cx', function(d) {
          return x(new Date(d.endDate))
         })
        .attr('cy', 60)
        .attr('r', 3)
        .attr("fill", "black")
    )

  // line indicating subscription duration
  svg.append('g')
      .attr('class', 'subscription-lines')
    .selectAll('line')
    .data(data.membership_activities)
    .join(
      enter => enter.append("line")
        .attr('class', 'subscription')
        .attr('x1', function(d) {
          return x(new Date(d.startDate))
         })
        .attr('x2', function(d) {
          // handle missing end dates
          let date;
          if (d.endDate) {
            date = new Date(d.endDate);
          } else {
            // average subscription duration is 70 days,
            // but that's very small on full graph
            date = new Date(d.startDate);
            date.setDate(new Date(d.startDate).getDate() + 140);

          }
          return x(date)
         })
        .attr('y1', 60)
        .attr('y2', 60)
        .attr("stroke", "black")
        .attr('stroke-dasharray', function(d) {
          // use dashed stroke for lines with no end date
          // (gradient might be nicer?)
          if (! d.endDate) {
            return '2, 2';
          }
        })
    )

// set borrowing bar width to slightly less than one month on the scale
var borrowWidth = x(new Date(1919, 1, 25));

  var svgheight = 181;
  // bar chart indicating monthly book activity
  svg.append('g')
      .attr('class', 'borrowing-bars')
    .selectAll('bar')
    .data(data.book_activities)
    .join(
      enter => enter.append("rect")
          .attr('class', 'borrowing')
          .attr('x', function(d) {
            return x(new Date(d.startDate))
           })
          .attr('y', function (d) {
              return svgheight - d.count
          })
          .attr("fill", "#47C2C2")
          .attr("opacity", "0.6")
          .attr("width", borrowWidth)
          .attr("height",function (d) {
              return d.count
       })
    )
  }
}



function drawlegend() {
          // Any Activity
          var legend = d3.select('.timeline svg#full-timeline').append('g')
              // default styles for fonts and circles
              .attr('class', 'legend')
              .attr("font-family", "univers Lt Pro")
              .attr("font-size", 13)
              .attr("fill", "black")
              .attr("aria-hidden", 'true')

          legend.append("rect")
              .attr('x', 30)
              .attr('y', 220)
              .attr("fill", "#231F20")
              .attr("opacity", "0.2")
              .attr("width", 20)
              .attr("height", 25)

          legend.append('text')
              .attr("x", 60)
              .attr("y", 245)
              .attr("width", 100)
              .attr("height", 100)
              .text ('Any activity')

          // Subscription activity start-date/reimburement
            legend.append('g')
                .append ('circle')
                .attr("cx","48")
                .attr("cy", "263")
                .attr("r", "3")

              legend.append('text')
                  .attr("x", 60)
                  .attr("y", 268)
                  .attr("width", 100)
                  .attr("height", 100)
                  .text ('Subscription activity start/end date/reimbursement')

          //Subscription activity
            legend.append ('circle')
                .attr("cx","24")
                .attr("cy", "286")
                .attr("r", "3")

            legend.append ('line')
                .style("stroke", "black")
                .attr("x1", 47)
                .attr("y1", 286)
                .attr("x2", 25)
                .attr("y2", 286)

            legend.append('circle')
                .attr("cx","48")
                .attr("cy", "286")
                .attr("r", "3")

            legend.append('text')
                .attr("x", 60)
                .attr("y", 291)
                .attr("width", 100)
                .attr("height", 100)
                .text('Subscription activity')

          // Subscription activity with no end date
            legend.append('circle')
                .attr("cx","24")
                .attr("cy", "309")
                .attr("r", "3")

            legend.append('line')
                .style("stroke", "black")
                .attr("x1", 47)
                .attr("y1", 309)
                .attr("x2", 25)
                .attr("y2", 309)
                .style("stroke-dasharray", ("3, 3"))

            legend.append('text')
                .attr("x", 60)
                .attr("y", 314)
                .attr("width", 100)
                .attr("height", 100)
                .text ('Subscription activity with no end date');

        // Borrowing activity
            legend.append('g')
                .append("rect")
                .attr('x', 43)
                .attr('y', 327)
                .attr("fill", "#47C2C2")
                .attr("opacity", "0.8")
                .attr("width", 6)
                .attr("height", 25)

            legend.append('text')
                .attr("x", 60)
                .attr("y", 337)
                .attr("width", 100)
                .attr("height", 100)
                .text ('Borrowing activity');


          }

{% if user.is_authenticated %} {# show full graph to logged in users #}
drawMemberTimeline(data, 'full');
drawlegend();
{% else %} {# show simpler version to everyone else #}
drawMemberTimeline(data, 'simple');
{% endif %}


</script>