{% extends "layout.html" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="pipeline_chart" style="width:1100px;height:500px;"></div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="agent_bar_chart" style="width:750px;height:400px;"></div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-3">
                <a type="button" class="btn btn-info btn-lg btn-block pull-left" href="{{ back_link }}">
                    <span class="glyphicon glyphicon-circle-arrow-left pull-left" aria-hidden="true"></span>
                    Back to Insights page
                </a>
            </div>
        </div>
    </div>

    <script src="/static/plotly-latest.min.js"></script>

    <script>
        function refreshPipelineChart() {

            var url = '{{ application_root }}/pipelines/{{ pipeline_name }}/history';

            Plotly.d3.json(url, function(figure) {
                Plotly.newPlot('pipeline_chart', figure.data, figure.layout);
             });
        };

        function refreshAgentChart() {

            var url = '{{ application_root }}/agents/success_rate/30/0/percent/{{ pipeline_name }}';

            Plotly.d3.json(url, function(figure) {
                Plotly.newPlot('agent_bar_chart', figure.data, figure.layout);
             });
        };

        refreshPipelineChart();
        refreshAgentChart();
    </script>

{% endblock %}
