{% extends "layout.html" %}

{% block title %}
    Overview
{% endblock %}

{% block scripts %}
<script type="text/javascript">
    chartAndTableRenderer("/data/companies", "left_list", "left_chart", "/companies/");
    chartAndTableRenderer("/data/modules", "right_list", "right_chart", "/modules/");
    timelineRenderer()
</script>
{% endblock %}

{% block left_frame %}

    <h2>Contribution by companies</h2>

    <div id="left_chart" style="width: 100%; height: 350px;"></div>

    <table id="left_list" class="display">
        <thead>
            <tr>
                <th>#</th>
                <th>Company</th>
                <th>{{ metric_label }}</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="spacer"></div>

{% endblock %}

{% block right_frame %}

    <h2>Contribution by modules</h2>

    <div id="right_chart" style="width: 100%; height: 350px;"></div>

    <table id="right_list" class="display">
        <thead>
            <tr>
                <th>#</th>
                <th>Module</th>
                <th>{{ metric_label }}</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="spacer"></div>

{% endblock %}