Top and average spend

Author: JackGilmore

.eleventy.js

@@ -1,4 +1,6 @@
 module.exports = function (eleventyConfig) {
+  const _ = require("lodash")
+
   eleventyConfig.addLayoutAlias('base', 'layouts/base.njk');
 
   eleventyConfig.addCollection("spendsOver500", (collection) => {
@@ -29,15 +31,30 @@ module.exports = function (eleventyConfig) {
     }, 0);
   });
 
+  const GBPFormat = new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: 'GBP',
+  });
+  
+  function toCurrency(value){
+    return GBPFormat.format(value);
+  }
+
   eleventyConfig.addFilter("toCurrency", function (value) {
-    let GBPFormat = new Intl.NumberFormat('en-GB', {
-        style: 'currency',
-        currency: 'GBP',
-    });
+    return toCurrency(value);
+  })
 
-    return GBPFormat.format(value);
+  eleventyConfig.addFilter("findTopSpender", function (value) {
+    var maxSpend = _(value)
+      .groupBy("Directorate")
+      .map((directorate, total) => ({
+        directorate: total,
+        total: _.sumBy(directorate, "Transaction Amount")
+      }))
+      .maxBy("total");
+
+    return `${maxSpend.directorate} (${toCurrency(maxSpend.total)})`;
   })
 
   eleventyConfig.addPassthroughCopy("CNAME");
-
 };

spendover500.njk

@@ -20,21 +20,32 @@ eleventyComputed:
 <h1>{{title}}</h1>
 
 <div class="row">
-    <div class="col-lg-6 col-12">
+    <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>{{spends.data | sum("Transaction Amount") | toCurrency }}</td>
+                    <td>{{total_spend | toCurrency }}</td>
                 </tr>
                 <tr>
                     <th class="bg-light">Transaction count</th>
-                    <td>{{spends.data | length }}</td>
+                    <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>