Spend by month front page chart

Author: JackGilmore

.eleventy.js

@@ -21,22 +21,30 @@ module.exports = function (eleventyConfig) {
     return spendCollection;
   });
 
+  eleventyConfig.addCollection("spendsOver500_monthly", (collection) => {
+    return _(collection.getAll()[0].data.spendsOver500).transform(function (result, value, key) {
+      result.push({
+        title: key,
+        displayTitle: (new Date(`${key}-01`)).toLocaleString("en-GB", { month: "long", year: "numeric" }),
+        total: _(value).sumBy("Transaction Amount")
+      })
+    }, []);
+  })
+
   eleventyConfig.addFilter("jsonify", function (value) { return JSON.stringify(value, null, 4) });
 
   eleventyConfig.addFilter("fixed", function (value, length) { return value?.toFixed(length || 2) });
 
   eleventyConfig.addFilter("sum", function (value, propName) {
-    return value.reduce((accumulator, currentValue) => {
-      return accumulator + currentValue[propName]
-    }, 0);
+    return _(value).sumBy(propName);
   });
 
   const GBPFormat = new Intl.NumberFormat('en-GB', {
     style: 'currency',
     currency: 'GBP',
   });
-  
-  function toCurrency(value){
+
+  function toCurrency(value) {
     return GBPFormat.format(value);
   }
 

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "11ty",
+            "type": "node",
+            "request": "launch",
+            "program": "${workspaceRoot}/node_modules/.bin/eleventy",
+            "stopOnEntry": false,
+            "args": [],
+            "cwd": "${workspaceRoot}",
+            "console": "internalConsole",
+        }
+    ]
+  }

_assets/js/charts.js

@@ -41,5 +41,36 @@ export function spendByDirectorate(jsonElementId, chartElementId) {
             enabled: false
         },
     });
+}
 
+export function spendByMonth(jsonElementId, chartElementId) {
+    const jsonData = JSON.parse(document.getElementById(jsonElementId).textContent);
+
+    const chart = Highcharts.chart(chartElementId, {
+        chart: {
+            type: 'line'
+        },
+        title: {
+            text: 'Spends over £500 by month'
+        },
+        xAxis: {            
+            type: "category"
+        },
+        yAxis: {
+            title: {text:"Spend in £"}
+        },
+        series: [{
+            name: "Spend for month by all directorates",
+            data: jsonData.map(x => [x.displayTitle, x.total])
+        }],
+        tooltip: {
+            useHTML: true,
+            formatter: function () {                
+                return `<p><strong>${this.point.name}</strong></p><p>${GBPFormat.format(this.y)}</p>`;
+            }
+        },
+        credits: {
+            enabled: false
+        },
+    });
 }

index.html index.njk

@@ -4,9 +4,15 @@
 description: "An open data source of Scottish Government spending data"
 ---
 
+<script id="spend-data" type="application/json">
+  {{ collections.spendsOver500_monthly | jsonify | safe }}
+</script>
+
 <h1>Welcome to Open Data Scotland GovSpend</h1>
 <p class="lead">An open data source of Scottish Government spending data</p>
 
+<div id="chart-spend-by-month" style="width:100%; height:500px;"></div>
+
 <h2>Spends over £500 per month</h2>
 
 <ul>
@@ -15,4 +21,10 @@ <h2>Spends over £500 per month</h2>
       <a href="spends/{{spendData.title}}">{{spendData.displayTitle}} - {{spendData.data.length}} entries</a>
     </li>
   {% endfor %}
-</ul>
+</ul>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    charts.spendByMonth("spend-data", "chart-spend-by-month");
+  });
+</script>

spendover500.njk

@@ -82,6 +82,7 @@ eleventyComputed:
 </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>