{% 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 %}
            </div>

        </div>
</div>

<div class="container">
    <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>
</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 %}