<table>
  <tr>
    <td class="statsnumber">{{ len (where .Site.RegularPages "Section" "==" "entries") }}</td>
    <td><a href="/">Entries</a></td>
  </tr>
  <tr>
    <td class="statsnumber">{{ len $.Site.Taxonomies.authors }}</td>
    <td><a href="/authors/">Authors</a></td>
  </tr>
  <tr>
    <td class="statsnumber">
      ~{{ lang.NumFmt 0 (mul (math.Round (div .Site.Data.statistics.num_lemmas 100)) 100) }}
    </td>
    <td>Lemmas</td>
  </tr>
  <tr>
    <td class="statsnumber">
      ~{{ lang.NumFmt 0 (mul (math.Round (div .Site.Data.statistics.num_loc 100)) 100) }}
    </td>
    <td>Lines of Code</td>
  </tr>
</table>

<h4>Most used AFP entries:</h4>
<table id="most_used">
  <tr>
    <th></th>
    <th>Name</th>
    <th>Used by ? entries</th>
  </tr>

  {{ range $index, $element := first 12 .Site.Taxonomies.dependencies.ByCount }}
  <tr>
    <td>{{ add $index 1}}.</td>
    <td><a href="/entries/{{ $element.Page.Title }}.html">{{ $element.Page.Title }}</a></td>
    <td><a href="{{ $element.Page.RelPermalink }}">{{ $element.Count }}</a></td>
  </tr>
  {{ end }}
</table>

<script>
  const years = [{{ delimit .Site.Data.statistics.years "," | safeJS }}]
  const no_articles = [{{ delimit .Site.Data.statistics.articles_year "," | safeJS }}]
  const no_loc = [{{ delimit .Site.Data.statistics.loc_years  "," | safeJS }} ]
  const no_authors = [{{ delimit .Site.Data.statistics.author_years  "," | safeJS }}]
  const no_authors_series = [{{ delimit .Site.Data.statistics.author_years_cumulative  "," | safeJS }}]
  const all_articles = [{{ delimit (apply .Site.Data.statistics.all_articles "printf" "'%s'" ".") "," | safeJS }}]
  const article_years_unique = [{{ delimit (apply .Site.Data.statistics.article_years_unique "printf" "'%s'" ".") "," | safeJS }}]
  const loc_articles = [{{ delimit .Site.Data.statistics.loc_articles "," | safeJS }}]
</script>
<h4>Growth in number of entries:</h4>
<script src="/js/Chart.js"></script>
<div class="chart">
  <canvas id="num-articles-canvas"></canvas>
</div>
<script>
  new Chart(document.getElementById("num-articles-canvas"), {
    type: 'bar',
    data: {
      labels: years,
      datasets: [{
        label: 'Size of the AFP in # of entries',
        data: no_articles,
        backgroundColor: "rgba(46, 45, 78, 1)"
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
    }
  })
</script>

<h4>Growth in lines of code:</h4>
<div class="chart">
  <canvas id="loc-years-canvas"></canvas>
</div>
<script>
  new Chart(document.getElementById("loc-years-canvas"), {
    type: 'bar',
    data: {
      labels: years,
      datasets: [{
        label: 'size of the AFP in lines of code',
        data: no_loc,
        backgroundColor: "rgba(101, 99, 136, 1)"
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
    }
  })
</script>

<h4>Growth in number of authors:</h4>
<div class="chart">
  <canvas id="author-years-canvas"></canvas>
</div>
<script>
  new Chart(document.getElementById("author-years-canvas"), {
    type: 'bar',
    data: {
      labels: years,
      datasets: [{
        label: 'new authors per year',
        data: no_authors,
        backgroundColor: "rgba(101, 99, 136, 1)"
      },
      {
        label: 'number of authors contributing (cumulative)',
        data: no_authors_series,
        backgroundColor: "rgba(0, 15, 48, 1)"
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
    }
  })
</script>

<h4>Size of entries:</h4>
<div class="chart">
  <canvas id="loc-articles-canvas"></canvas>
</div>
<script>
  new Chart(document.getElementById("loc-articles-canvas"), {
    type: 'bar',
    data: {
      labels: article_years_unique,
      datasets: [{
        label: 'loc per article',
        data: loc_articles,
        backgroundColor: 'rgba(101, 99, 136, 1)'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          categoryPercentage: 1,
          barPercentage: 0.9,
          ticks: {
            autoSkip: false
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      tooltips: {
        callbacks: {
          title: tooltipItem => all_articles[tooltipItem[0].index]
        }
      }
    }
  })
</script>

</td>
</tr>

</tbody>
</table>