{% extends "pages/menu.html"}

{% block css %}
{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static "lib/bootstrap/3.0.2/bootstrap.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "lib/d3/dc.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "lib/jquery/dynatable/jquery.dynatable.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "lib/gargantext/tables.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "lib/gargantext/charts.css"%}"/>

<script type="text/javascript" src="{% static "lib/d3/d3.js"%}"></script>
<script type="text/javascript" src="{% static "lib/d3/crossfilter.js"%}"></script>
<script type="text/javascript" src="{% static "lib/d3/dc.js"%}"></script>

{% endblock %}


{% block content %}


<div class="container">
    <div class="col-md-3 col-md-offset-2">
        <div id="monthly-move-chart">
            <center>
                Select a frequency group in the chart with blue bars to zoom in
            <p align="center">
            <!--<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a>-->
            <a class="btn btn-xs btn-default" href="javascript:volumeChart.filterAll();dc.redrawAll();">Reset</a></p>
            <!-- <p style="font-size:70%">
                <b>x</b>: amount of documents for the author
                <b>y</b>: number of authors with that amount
            </p> -->
            <div class="clearfix"></div>
            </center>
        </div>

        <div class="bs-callout">
            <div class="row">
                <div id="monthly-volume-chart"></div>
            </div>

            <div id="content_loader">
              <br>
              <center>
                <!-- <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img> -->
              </center>
              <br>
            </div>
        </div>
    </div>
</div>




<div class="container">
    <div class="jumbotron">
        <div class="panel panel-default">

            <div class="panel-heading">
              <h2 class="panel-title">
                <center>
                    <span class="glyphicon glyphicon-hand-down" aria-hidden="true"></span>
                    Publications by source
                </center>
              </h2>
            </div>


            <div class="panel-body">
              <div id="div-table">
                  <!-- (table id="my-ajax-table") dynamically set by Authors_dyna_chart_and_table -->
              </div>
            </div>


        </div> <!-- /div panel -->

    </div> <!-- /jumbotron -->
<!--</div> This div is closed in the menu !-->




<script type="text/javascript" src="{% static "lib/jquery/dynatable/jquery.dynatable.js" %}"></script>

<!-- custom-lib for dynatable.js and dc.js -->
<script type="text/javascript" src="{% static "lib/gargantext/Authors_dyna_chart_and_table.js" %}"></script>
<script type="text/javascript" src="{% static "lib/gargantext/help.js" %}"></script>
{% endblock %}