spendover500.njk

---
pagination:
    data: collections.spendsOver500
    size: 1
    alias: spends
    layout: base
permalink: "spends/{{ spends.title | slugify }}/"
layout: base
eleventyComputed:
    title: "Spends over £500 - {{ spends.displayTitle }}"
    description: "Transactions with spend over £500 for {{spends.displayTitle}}"
---

{% set json_link = "/spends/" + spends.title + ".json" %}

<link rel="alternate" type="application/json" title="JSON version of {{description}}" href="{{json_link}}">

<script id="spend-data" type="application/json">
    {{spends.data | jsonify | safe }}
</script>

<nav>
    <ul class="pagination">
        {% if pagination.href.previous != null %}
            <li class="page-item">
                <a class="page-link" href="{{pagination.href.previous}}">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous month</span>
                </a>
            </li>
        {% endif %}
        <li class="page-item">
            <a class="page-link" href="/">Home</a>
        </li>
        {% if pagination.href.next != null %}
            <li class="page-item">
                <a class="page-link" href="{{pagination.href.next}}">
                    <span class="sr-only">Next month</span>
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>

<h1>{{title}}</h1>

<div class="row">
    <div class="col-lg-8 col-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th colspan="2" class="text-center bg-light">Spend profile</th>
                </tr>
            </thead>
            {% set total_spend = spends.data | sum("Transaction Amount") %}
            {% set transaction_count = spends.data | length %}
            {% set average_spend = total_spend / transaction_count %}
            <tbody>
                <tr>
                    <th class="bg-light">Total spend</th>
                    <td>{{total_spend | toCurrency }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Transaction count</th>
                    <td>{{transaction_count }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Average transaction spend</th>
                    <td>{{ average_spend | toCurrency }}</td>
                </tr>
                <tr>
                    <th class="bg-light">Top spender</th>
                    <td>{{ spends.data | findTopSpender }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="btn-group" role="group">
    <a href="{{json_link}}" target="_blank" class="btn btn-primary">JSON</a>
</div>

<div id="chart-spend-by-directorate" style="width:100%; height:600px;"></div>

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Directorate</th>
                <th>Merchant name</th>
                <th>Merchant category name</th>
                <th>Transaction date</th>
                <th>Transaction amount</th>
                <th>Expense description</th>
            </tr>
        </thead>
        <tbody>
            {% for row in spends.data %}
                <tr>
                    <td>{{row["Directorate"]}}</td>
                    <td>{{row["Merchant Name"]}}</td>
                    <td>{{row["Merchant Category Name"]}}</td>
                    <td>{{row["Transaction Date"]}}</td>
                    <td>{{row["Transaction Amount"] | fixed }}</td>
                    <td>{{row["Expense Description"]}}</td>
                </tr>
                {%endfor%}
            </tbody>
        </table>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            charts.spendByDirectorate("spend-data", "chart-spend-by-directorate");
        });
    </script>