{% extends "menu.html" %}

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

<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap-theme.min.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/morris.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/jquery.easy-pie-chart.css"%}">

<script src="{% static "js/jquery-1.9.1.min.js"%}"></script>
<script src="{% static "js/raphael-min.js"%}"></script>
<script src="{% static "js/morris.min.js"%}"></script>

{% endblock %}


{% block content %}

<div class="container theme-showcase" role="main">
        <div class="jumbotron">
                {% if project %}
                <h1>{{ project.title }} </h1>
                <p> {{ project.subtitle }}</p>
                {% endif %}

                {% if corpus %}
                <h2>{{ corpus.title }} </h2>
                <p>{{ corpus.subtitle }} </p>
                <p>{{ corpus.date }}, {{ corpus.language }}, {{ corpus.database }} ({{ number}} docs)</p>
                {% endif %}
								<a class="btn btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.pk }}/">Modify corpus</a></p>
            </div>

        </div>
</div>

<div class="container">
{% if number > 0 %}
    <div class="row">
        <div class="col-md-6">
						<h3>Histogram</h3>
            <div id="hero-area" style="height: 300px;"></div>
        </div>
        <div class="col-md-3">
						<h3>Donut chart</h3>
            <div id="hero-donut" style="height: 250px;"></div>    
        </div>
    </div>
{% endif %}
{% if number == 0 %}
Please add documents:
<a class="btn btn-xs btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.pk }}/">Button to Add documents</a></p>
{% endif %}

</div>

<script>
        // Morris Area Chart
        Morris.Area({
            element: 'hero-area',
            data: [
            {% if dates %}
            {% for d in dates %}
						{Period: '{{ d.to_char }}', Quantity: '{{ d.count }}', Infos: '10'},
            {% endfor %}
            {% endif %}
            ],
            xkey: 'Period',
            ykeys: ['Quantity', 'Infos'],
            labels: ['publications', 'Infos'],
            lineWidth: 2,
            hideHover: 'auto',
            lineColors: ["#939393",]
          });
</script>

<script>
        // Morris Donut Chart
        Morris.Donut({
            element: 'hero-donut',
            data: [
            {% if sources_donut %}
            {% for source in sources_donut %}
						{label: '{{ source.source }}, {{source.count}} docs', value: {{ source.part }} },
            {% endfor %}
            {% endif %}

            ],
            colors: ["#939393", "#939555"],
            //colors: ["#30a1ec", "#76bdee"],
            formatter: function (y) { return y + "%" }
        });
</script>

{% endblock %}