{% set nosidebar = True %}
{% import "utils.html" as utils %}

{% extends "layout.html" %}
{% set components = [(ts.name, v4_url_for(".v4_recent_activity"))] %}
{% block head %}
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static', filename='lnt_graph.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='plotly/plotly-2.6.3.min.js') }}"></script>
{% endblock %}

{% block title %}Graph{% endblock %}

{# Add JS to initialize the graph. #}
{% block onload %}init_page(){% endblock %}

{% block javascript %}
var test_suite_name = "{{ request.view_args.testsuite_name }}";
var db_name = "{{ request.view_args.get('db_name','') }}";
var graph_plots = {{graph_plots|tojson|safe}};
var metrics = {{metrics|tojson|safe}};
var legend = {{legend|tojson|safe}};
var options = {{options|tojson|safe}};

function init_graph() {
  // Add regressions
  var tmp_plots = plotly_update_graphplots(graph_plots);

  var graph_layout = {
    // title: 'Graph',
    hovermode: 'closest',
    showlegend: true,
    legend: { x: 0, y: -1.0,
      // yanchor: 'bottom',
      // size: 'top left',
      bgcolor: 'rgba(0,0,0,0)' },
    margin: { l: 50, r: 0, t: 10, b: 0 },
    height: 700
  };
  if (options.xaxis_date) {
    graph_layout['xaxis'] = {title: 'Date', type: 'date'};
  } else {
    graph_layout['xaxis'] = {title: 'Order', type: 'category'};
  }

  var xaxis_left = 0.0;
  var xaxis_right = 1.0;
  for (var i = 0; i < metrics.length; i++) {
    var yaxis = 'yaxis';
    if (i > 0)  yaxis += (i+1).toString();
    graph_layout[yaxis] = {title: metrics[i]};
    if (options.logarithmic_scale) {
      graph_layout[yaxis]['type'] = 'log';
      graph_layout[yaxis]['autorange'] = true;
    }
    if (i > 0 ) {
      graph_layout[yaxis]['overlaying'] = 'y';
    }
    if (i & 1) {
      graph_layout[yaxis]['side'] = 'right';
      xaxis_right = 1 - 0.03 * i;
      graph_layout[yaxis]['position'] = xaxis_right;
    } else {
      xaxis_left = 0.03 * i;
      graph_layout[yaxis]['position'] = xaxis_left;
    }
  }
  graph_layout['xaxis']['domain'] = [xaxis_left, xaxis_right];
  Plotly.newPlot('graph', tmp_plots, graph_layout);
  var graph = document.getElementById('graph');
  graph.on('plotly_click', plotly_update_tooltip);
  graph.on('plotly_doubleclick', plotly_hide_tooltip);
}


function init_page() {
  if (!options.xaxis_date) {
    // First start the requests for regression data.
    legend.forEach(function(item, index) {
      if (item[4]) {  // legend.url
        var yaxis_index = metrics.indexOf(item[2]); // legend.field_name
        var yaxis = ((yaxis_index == 0) ? "y" : ("y"+(yaxis_index + 1).toString()));
        $.getJSON(get_api_url("regression", db_name, test_suite_name, item[4]),
          function (data) {
            plotly_graph_regression_callback(data, index, item, yaxis, init_graph);
          }
        );
      }
    });
  }
  init_graph();
}

{% endblock %}

{% block sidebar %}
  <h4>Controls</h4>
  <ul>
  <li>Double Left Mouse: Hide Tooltip
  </ul>
{% endblock %}

{% block body %}
  <table width="100%">
  <tr>
    <td><h3>Graph</h3></td>
    <td>
      <table>
        <tr>
          <td>
            <form class="" action="" method="get">
              {% for name,value in request.args.items() %}
                  {# {% if name.startswith('plot.') %} #}
                  <input type="hidden" name="{{name}}" value="{{value}}"/>
                  {# {% endif %} #}
              {% endfor %}
              <input class="btn btn-primary" type="submit" name="download_json" value="Download as JSON"/>
            </form>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <div class="dropdown pull-right" id="settings">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#settings">
          Settings <i class="icon-wrench"></i>
        </a>
        <div class="dropdown-menu">
          <form action="" method="get">
          <table class="table table-striped table-hover table-condensed">
            <tbody>
              <tr>
                <td>Use dates for X axis instead of revisions</td>
                <td><input type="checkbox" name="xaxis_date" value="yes"
                    {{ 'checked="checked"' if options.xaxis_date else ""}}/></td>
              </tr>
              <tr>
                <td>Aggregation function:</td>
              </tr>
              {# Split this into a new row to avoid making the dialog wider. #}
              <tr>
                <td>
                  <select name="aggregation_function" id="aggregation_function">
                    <option value="min" {{ ('selected="selected"' if options.aggregation_function == 'min' else '') | safe }}>Minimum</option>
                    <option value="max" {{ ('selected="selected"' if options.aggregation_function == 'max' else '') | safe }}>Maximum</option>
                    <option value="mean" {{ ('selected="selected"' if options.aggregation_function == 'mean' else '') | safe }}>Mean</option>
                    <option value="median" {{ ('selected="selected"' if options.aggregation_function == 'median' else '') | safe }}>Median</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>Hide Line Plot:</td>
                <td><input type="checkbox" name="hide_lineplot" value="yes"
                     {{ 'checked="checked"' if options.hide_lineplot else ""}}/></td>
              </tr>
              <tr>
                <td>Show Median Absolute Deviation:</td>
                <td><input type="checkbox" name="show_mad" value="yes"
                     {{ 'checked="checked"' if options.show_mad else ""}}/></td>
              </tr>
              <tr>
                <td>Show Standard Deviation:</td>
                <td><input type="checkbox" name="show_stddev" value="yes"
                     {{ 'checked="checked"' if options.show_stddev else ""}}/></td>
              </tr>
              <tr>
                <td>Show Linear Regression:</td>
                <td><input type="checkbox" name="show_linear_regression" value="yes"
                     {{ 'checked="checked"' if options.show_linear_regression else ""}}/></td>
              </tr>
              <tr>
                <td>Show Points For Failures:</td>
                <td><input type="checkbox" name="show_failures" value="yes"
                     {{ 'checked="checked"' if options.show_failures else ""}}/></td>
              </tr>
              <tr>
                <td>Hide MultiSample Points:</td>
                <td><input type="checkbox" name="hide_all_points" value="yes"
                     {{ 'checked="checked"' if options.hide_all_points else ""}}/></td>
              </tr>
              <tr>
                <td>Normalize By Median:</td>
                <td><input type="checkbox" name="normalize_by_median" value="yes"
                     {{ 'checked="checked"' if options.normalize_by_median else ""}}/></td>
              </tr>
              <tr>
                <td>Show Moving Average</td>
                <td><input type="checkbox" name="show_moving_average" value="yes"
                     {{ 'checked="checked"' if options.show_moving_average else ""}}/></td>
              </tr>
              <tr>
                <td>Show Moving Median</td>
                <td><input type="checkbox" name="show_moving_median" value="yes"
                     {{ 'checked="checked"' if options.show_moving_median else ""}}/></td>
              </tr>
              <tr>
                <td>Show Cumulative Minimum</td>
                <td><input type="checkbox" name="show_cumulative_minimum" value="yes"
                     {{ 'checked="checked"' if options.show_cumulative_minimum else ""}}/></td>
              </tr>
              <tr>
                <td>Show Logarithmic Scale</td>
                <td><input type="checkbox" name="logarithmic_scale" value="yes"
                     {{ 'checked="checked"' if options.logarithmic_scale else ""}}/></td>
              </tr>
              <tr>
                <td>Moving Average/Median Window Size</td>
              </tr>
              {# Split this into a new row to avoid making the dialog wider. #}
              <tr>
                <td><input type="text" name="moving_window_size"
                     value="{{ options.moving_window_size }}"/></td>
              </tr>
              <tr>
                <td>Hide Revision Comparison Region Highlight</td>
                <td><input type="checkbox" name="hide_highlight" value="yes"
                     {{ 'checked="checked"' if options.hide_highlight else ""}}/></td>
              </tr>
              <tr>
                  <td>Display only <i>n</i> latest orders</td>
              </tr>
              {# Split this into a new row to avoid making the dialog wider. #}
              <tr>
                <td><input type="text" name="limit"
                     value="{{ options.limit }}"}/></td>
              </tr>
            </tbody>
          </table>

          {# Add all the hidden fields. #}
          {% for name,value in request.args.items() %}
          {% if name.startswith('plot.') %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% if name.startswith('baseline.') %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% if name == 'mean' %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% endfor %}

          <input class="btn btn-primary" style="clear: left; width: 100%"
                 type="submit" name="submit" value="Update" />
          </form>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div id="graph" />
    </td>
  </tr>
</table>
{% endblock %}