{% load origin %}{% origin %}
<div id="chart"></div>

<script>
    var chartConf = {
        chart: {
            type: 'area'
        },
        plotOptions: {
            area: {
                animation: false
            }
        },
        title: {
            text: '{{ stats_title|escapejs }}'
        },
        xAxis: {
            title: {
                text: 'Number of citations of {{ doc_label }}s by author'
            },
            max: 500
        },
        yAxis: {
            title: {
                text: 'Percentage of authors'
            },
            labels: {
                formatter: function () {
                    return this.value + '%';
                }
            }
        },
        tooltip: {
            formatter: function () {
                var s = '<b>' + this.x + ' ' + (this.x == 1 ? "citation" : 'citations') + '</b>';

                $.each(this.points, function () {
                    s += '<br>' + chartConf.yAxis.title.text + ': ' + this.y.toFixed(1) + '%';
                });

                return s;
            },
            shared: true
        },
        series: {{ chart_data }}
    };
</script>

<h2>Data</h2>

<table class="table table-sm table-striped tablesorter stats-data">
    <thead>
        <tr>
            <th scope="col" data-sort="num">Citations</th>
            <th scope="col" data-sort="percent">Percentage of authors</th>
            <th scope="col" data-sort="authors">Authors</th>
        </tr>
    </thead>
    {% if table_data %}
        <tbody>
            {% for citations, percentage, count, names in table_data %}
                <tr>
                    <td>{{ citations }}</td>
                    <td>{{ percentage|floatformat:2 }}%</td>
                    <td>{% include "stats/includes/number_with_details_cell.html" with content_limit=10 %}</td>
                </tr>
            {% endfor %}
        </tbody>
    {% endif %}
</table>

<p>Note that the citation counts do not exclude self-references.</p>