Add Dataset Chart to Performance page

application/templates/pages/about/performance.md

@@ -2,6 +2,10 @@ Performance indicators show how the planning data platform is making it easier t
 
 Last updated 10 October 2024.
 
+<div class="govuk-!-margin-top-6 govuk-!-margin-bottom-6">
+  <canvas id="datasetChart"></canvas>
+</div>
+
 ## Availability
 
 We index planning and housing datasets provided by multiple organisations in England.
@@ -24,15 +28,15 @@ We check data sources for issues and help data owners improve the quality. This
 
 <!-- ### ?? out of ?? quality score -->
 
-64 data sources on the platform with no issues (40%). <!-- 8 fixed last month (+15%). --> 
+64 data sources on the platform with no issues (40%). <!-- 8 fixed last month (+15%). -->
 
 85 data sources on the platform conform to the specifications (48%). <!-- 2 improved last month (+2%). -->
 
 <!-- 00 datasets up to date (0%). 00 updated last month (+/-0%). -->
 
 ## Coverage
 
-We aim to provide datasets from authoritative sources covering the entirety of England. We’re currently working with 73 out of 311 local planning authorities to start providing 8 datasets nationally. 
+We aim to provide datasets from authoritative sources covering the entirety of England. We’re currently working with 73 out of 311 local planning authorities to start providing 8 datasets nationally.
 
 <!-- ### ??% nationwide coverage -->
 
@@ -52,3 +56,6 @@ Datasets compiled from LPA sources:
 <!-- ## Usage
 
 0.00 average daily calls. +/-0% change from last month. -->
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="{{ cacheBust(assetPath | default('/assets') + '/javascripts/PerformancePage.js') }}"></script>

assets/javascripts/PerformancePage.js

@@ -0,0 +1,93 @@
+function addDatasetChart() {
+  const sql = `
+    SELECT
+      strftime('%Y-%m', entry_date) AS month_year,
+      -- Extract Year-Month from entry_date
+      strftime('%Y', entry_date) AS year,
+      -- Extract Year
+      CASE
+        strftime('%m', entry_date)
+        WHEN '01' THEN 'January'
+        WHEN '02' THEN 'February'
+        WHEN '03' THEN 'March'
+        WHEN '04' THEN 'April'
+        WHEN '05' THEN 'May'
+        WHEN '06' THEN 'June'
+        WHEN '07' THEN 'July'
+        WHEN '08' THEN 'August'
+        WHEN '09' THEN 'September'
+        WHEN '10' THEN 'October'
+        WHEN '11' THEN 'November'
+        WHEN '12' THEN 'December'
+      END AS month,
+      -- Convert month number to month name
+      COUNT(dataset) AS dataset_count,
+      SUM(COUNT(dataset)) OVER (
+        ORDER BY
+          strftime('%Y-%m', entry_date)
+      ) AS cumulative_count
+    FROM
+      dataset
+    WHERE
+      collection != ''
+    GROUP BY
+      month_year
+    ORDER BY
+      month_year;
+  `
+
+  fetch(`https://datasette.planning.data.gov.uk/digital-land.json?sql=${encodeURIComponent(sql)}`)
+    .then(res => res.json())
+    .then((res) => {
+      const data = res.rows.map(row => {
+        let formattedRow = {}
+        res.columns.forEach((col, index) => formattedRow[col] = row[index])
+
+        return formattedRow
+      })
+
+      new Chart(document.getElementById('datasetChart'), {
+        data: {
+          labels: data.map(d => d.month_year ? `${d.year} - ${d.month}` : "Initial"),
+          datasets: [
+            {
+              type: 'line',
+              label: '# of Datasets in total',
+              data: data.map(d => d.cumulative_count),
+              borderWidth: 2,
+              borderColor: "#1d70b8",
+              backgroundColor: "#1d70b845",
+              fill: true,
+              tension: 0.3,
+              pointRadius: 0,
+            }
+          ]
+        },
+        options: {
+          plugins: {
+            title: {
+              display: true,
+              text: 'Cumulative dataset count'
+            },
+          },
+          scales: {
+            y: {
+              title: {
+                display: true,
+                text: '# of Datasets'
+              }
+            },
+            x: {
+              title: {
+                display: true,
+                text: 'Total dataset count by month'
+              }
+            }
+          }
+        }
+      })
+    })
+    .catch((error) => console.log(error))
+}
+
+addDatasetChart()