chart.njk

---
layout: layouts/base.njk
title: Chart
permalink: /chart/
stylesheet: "https://cdn.jsdelivr.net/npm/charts.css@1.1.0/dist/charts.min.css"
description: "This is a chart of the posts written by year."
---

{% set postCounts = collections.posts | byYear %}
{% set maxPostCount = 0  %}

{% for year, count in postCounts %}
  {% if count > maxPostCount %}
    {% set maxPostCount = count %}
  {% endif %}
{% endfor %}

<div id="post-count">
	<table class="charts-css bar show-heading show-labels show-primary-axis data-spacing-4 data-center">
		<caption>Post Count</caption> 
		<thead>
			<tr>
				<th scope="col"> Year </th> 
				<th scope="col"> Count </th>
			</tr>
		</thead> 
		<tbody>
			{% for year, count in postCounts %}
				<tr>
					<th scope="row"> {{ year }}</th> 
					<td style="--size: calc( {{ count }} / {{ maxPostCount }});"> <span class="data"> {{ count }} </span> </td>
				</tr> 
			{% endfor %}
		</tbody>
	</table>
</div>