{% extends "base.html" %}

{% import 'utils.jinja' as utils %}

{% block style %}
    <style>
        .graph .vizchart {
            height: 40vh;
        }
    </style>
{% endblock style %}

{% block body %}

    <div class="container-fluid">

<div class="row">
<div class="col">
<p style="text-align: center">
Contribution of compute capacity from the
{{ ce_facility_name }} entity named {{ ce_site_name }}.
</p>
</div>
</div>
        {% set column = get_column(resource) %}
        {% set vaxis = get_vaxis(resource) %}
        <div class="row">
            <div class="col" id="{{ resource }}-by-project">
                <script>
                    new HTCondorViewRanged({
                        dst_id: "{{ resource }}-by-project",
                        title: "{{ resource }} Allocation by Project",
                        data_url: "/data/ce_overview",
                        action_url: "showModal('allocation-modal')",
                        graph_query: urlEscapeGraphQuery(`
                            vAxis.title={{ vaxis }}
                            filter=Type=P
                            filter={{resource}}>0
                            order=Date,{{column}}
                            pivot=Date;Project;{{resource}}
                            unselect=Unknown
                            chart=stacked
                            focusTarget=category
                            tooltip.trigger=focus
                            tooltip.isHtml=true
                            chartArea.height=85%
                            chartArea.left=10%
                            chartArea.right=17%
                            titleTextStyle.fontSize=16
                        `),
                        table_query: urlEscapeGraphQuery(`
                            filter=Type=P
                            order={{column}}
                            group=Project,Field,Organization;avg({{resource}}),max({{resource}})
                            filter=max{{resource}}>0
                            order=-avg{{resource}}
                            ceil=max{{resource}},max{{resource}}
                            unselect=max{{resource}}
                        `),
                        select_tuple: ["Project"],
                    });
                </script>
            </div>
        </div>

        {% call utils.bootstrap_modal('allocation-modal', 'About: ' + resource + ' Allocation by Project') %}
            <p>
                Displays the usage of {{resource}} on EPs at this site, partitioned by research project.
            </p>
        {% endcall %}

    </div>

{% endblock body %}