{#
/**
 * @file
 * Autoslave Dashboard page.
 *
 * NOTE: D3.js v3 is loaded via autoslave.libraries.yml to avoid external CDN security risks.
 */
#}
<h2>Database Infrastructure</h2>
{% if dashboard.hashkey_link %}
<div class="autoslave-hashkey-link alert alert-block alert-success messages status">
    {{ dashboard.hashkey_link }}
</div>
{% endif %}
<div class="db-charts">
    <div class="db-infrastructure">
        <div class="db-legend">
            Legend:<br><br>
            <div class="legend update">&nbsp;</div>Update<br>
            <span class="legend insert">&nbsp;</span>Insert<br>
            <span class="legend select">&nbsp;</span>Select<br>
            {% if dashboard.hashkey_link %}
            <span id="id-force-cron-span">&nbsp;
        <a id="force-cron-anchor" href="#">Dashboard cron</a>
      </span>
            {% endif %}
        </div>
  {% for  num in 1..dashboard.num_servers %}
  <div class="server-status server-{{ num }}">
      <div class="chart"></div>
      <div class="dbstatus"></div>
  </div>
  {% endfor %}
</div>
</div>

<div class="db-selectmaster">
<div class="db-choice">
    {% for  num in 1..dashboard.num_masters %}
  <div data-enable-ui="" class="master-status server-{{ num }} ?>">
      <div class="masterstatus"></div>
      <div class="masteraction">
          <div class="master-fail">Manually invalidate this server.</div><br>
      </div>
  </div>
    {% endfor %}
</div>
</div>

<div id="wait" style="display:none;width:265px;height:265px;border:0px solid black;position:absolute;top:40%;left:40%;padding:2px;">
<img id="spinner" src="/{{ dashboard.module_path }}/icons/wait.gif" width="256" height="256"><br>Loading ...</div>

<!--
The following example is based on https://bl.ocks.org/mbostock/1134768
A good simple program is here http://bl.ocks.org/anotherjavadude/2940908
-->

<style>
.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis--x path {
  display: none;
}
</style>

<script>
(function ($, Drupal) {
  'use strict';

  var margin = {top: 20, right: 50, bottom: 30, left: 20},
    width = 400 - margin.left - margin.right,
    height = 286 - margin.top - margin.bottom;

  var x = d3.scale.ordinal().rangeRoundBands([0, width]);
  var y = d3.scale.linear().rangeRound([height, 0]);
  var z = d3.scale.category10();

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right");

  var server_status = [];

  var server_status = {{ dashboard.json_slave_status|raw }};
  var master_status = {{ dashboard.json_master_status|raw }};
  var data = {{ dashboard.json_data|raw }};


  var servers = {{ dashboard.json_servers|raw }};
  for (srv in servers) {
    var srvnum = (+srv+1);
    var cls = '.server-status.server-' + srvnum + ' .chart';
    var svg = d3.select(cls)
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    if (typeof data == "object" && data != null) {
        if (typeof data[srvnum] == "object" && data[srvnum] != null) {
            drawThis(srvnum);
        }
    }

    var stats = $('.server-status.server-' + srvnum + ' .dbstatus');
    $(stats).empty().append(server_status[srvnum]);
  }

  var masters = {{ dashboard.json_masters|raw }};
  for (mas in masters) {
    var masnum = (+mas+1);
    var masterstatus = $('.master-status.server-' + masnum + ' .masterstatus');
    $(masterstatus).empty().append(master_status[masnum]);
  }

  function drawThis(srvnum) {
    var remapped = ['c1', 'c2', 'c3'].map(function(dat, i) {
        return data[srvnum].map(function(d, ii) {
            return {x: ii, y: d[i] };
        })
    });

    var layers = d3.layout.stack()(remapped);

    x.domain(layers[0].map(function(d) { return d.x; }));
    y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();

    var layer = svg.selectAll(".layer")
        .data(layers)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) { return z(i); });

    // Draw the data
    layer.selectAll("rect")
        .data(function(d) { return d; })
        .enter().append("rect")
        .attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y + d.y0); })
        .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
        .attr("width", x.rangeBand() - 1);

    // Draw the X axis
    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Draw the Y axis
    svg.append("g")
        .attr("class", "axis axis--y")
        .attr("transform", "translate(" + width + ",0)")
        .call(yAxis);
  }

})(jQuery, Drupal);

</script>