{{define "Title"}}Aggregate View - appdash{{end}}
{{define "Main"}}

<style type="text/css">
  html,body {
    /* Disable vertical scrollbar due to canvas being very long. */
    overflow-y: hidden;
  }
  #top-right-btns {
    margin-top: 25px;
  }
  #pieChart {
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;

    /*
      Canvas is very long, so we offset it by 100px. We could hange the canvas
      size but it would effectively crop out some of the labels extending outward
      from the chart
    */
    position: relative;
    top: -100px;
  }
  .clickable-z-index {
    z-index: 1;
    position: relative;	
  }
</style>

<!-- View Mode menu -->
<div class="btn-group pull-right clickable-z-index" role="group" aria-label="..." id="top-right-btns">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="choose the aggregated data viewing mode">
    View Mode <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" id="view-mode-trace-only" title="aggregate trace root-span names only">Root Spans</a></li>
    <li><a href="#" id="view-mode-span-only" title="aggregate trace sub-span names only">Sub Spans</a></li>
    <li><a href="#" id="view-mode-trace-and-span" title="aggregate all trace span names">All Spans</a></li>
  </ul>
</div>

<h1>Aggregated View</h1>

<div id="pieChart"></div>

<script src="{{.BaseURL}}static/benkeen/d3pie/d3pie.min.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    // Grab the aggregated data from the template parameter, or if there is
		// none, fake a single data element for the pie chart to still render.
    var data = {{.Aggregated}};
    if(data.length == 0) {
      data = [{"label": "no traces to aggregate", "value": 1}];
    }

		// Create the pie chart.
    var pie = new d3pie("pieChart", {
      "size": {
        "canvasHeight": 800,
        "canvasWidth": 800,
        "pieInnerRadius": "80%",
      },
      "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label} - {value}ms - {percentage}%",
        "styles": {
          "backgroundOpacity": 0.75
        }
      },
      "data": {
        "sortOrder": "value-desc",
        "smallSegmentGrouping": {
          "enabled": true,
          "value": 1,
          "valueType": "percentage",
          "label": "Other (less than 1%)",
          "color": "#cccccc"
        },
        "content": data
      }
    });
  });

  // See http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter
  function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re)) {
      return uri.replace(re, '$1' + key + "=" + value + '$2');
    }
    else {
      return uri + separator + key + "=" + value;
    }
  }

  function viewMode(name) {
    var u = updateQueryStringParameter(window.location.href, "view-mode", name);
    if (window.location.href != u) {
      window.location.href = u;
    }
  }

  $("#view-mode-trace-only").click(function(e) {
    e.preventDefault();
    viewMode("trace-only");
  })
  $("#view-mode-span-only").click(function(e) {
    e.preventDefault();
    viewMode("span-only");
  })
  $("#view-mode-trace-and-span").click(function(e) {
    e.preventDefault();
    viewMode("trace-and-span");
  })
</script>

{{end}}