Graph and map cluster plain colours

CodeTheCity · Mar 17, 2024 · 9b7c9f7 · 9b7c9f7
1 parent eec7b64
commit 9b7c9f7
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,6 +19,9 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.awesome-markers@2.0.5/dist/leaflet.awesome-markers.min.css">
+
+        <!-- Chart.js -->
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
     </head>
     <body class="d-flex flex-column h-100">
 

diff --git a/index.html b/index.html
@@ -62,6 +62,12 @@ <h3>Defects by type</h3>
     </div>
 </div>
 
+<h2>Outstanding defects by date reported</h2>
+
+<div>
+    <canvas id="defectsByDateChart"></canvas>
+</div>
+
 <script id="roadsData" type="application/json">
     {{ site.data.roads | jsonify }}
 </script>
@@ -88,6 +94,12 @@ <h3>Defects by type</h3>
       }    
 </script>
 
+<style>
+    .marker-cluster {
+        background-color: rgba(255, 255, 255, 0.9);
+    }
+</style>
+
 <script type="text/javascript">
     var jsonElement = document.getElementById("roadsData");
     var roadsData = JSON.parse(jsonElement.innerHTML);
@@ -137,7 +149,14 @@ <h3>Defects by type</h3>
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
-    var mapLayer = L.markerClusterGroup({maxClusterRadius: 40});
+    var mapLayer = L.markerClusterGroup({
+        maxClusterRadius: 40,
+        iconCreateFunction: function(cluster) {
+            var childCount = cluster.getChildCount();
+
+            return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster', iconSize: new L.Point(40, 40) });
+        }
+    });
 
     roadsData.forEach(defect => {
         var defectReportedDate = Date.parse(defect["Reported date"]);
@@ -153,8 +172,7 @@ <h3>Defects by type</h3>
         else if (defectAge >= 183) {
             iconColour = "amber";
         }
-        else if (defectAge >= 92)
-        {
+        else if (defectAge >= 92) {
             iconColour = "blue";
         }
         else {
@@ -194,4 +212,46 @@ <h3>Defects by type</h3>
 
     document.getElementById("defectsByType").innerHTML = defectsByTypeHtml;
 
+    // Outstanding defects by date reported
+    var defectsByDateChart = document.getElementById('defectsByDateChart');
+    var defectsByDate = Object.groupBy(roadsData, report => {
+        var date = new Date(Date.parse(report["Reported date"]));
+        var yearMonth = `${date.getFullYear()}-${date.getMonth() + 1}`;
+        return yearMonth;
+    });
+
+    var labels = Object.keys(defectsByDate).sort(function (a, b) {
+        // Split the strings to extract the year and month
+        var [yearA, monthA] = a.split("-");
+        var [yearB, monthB] = b.split("-");
+
+        // Compare the years first
+        if (yearA !== yearB) {
+            return yearA - yearB; // Sort by year
+        } else {
+            // If the years are the same, compare the months
+            return monthA - monthB; // Sort by month
+        }
+    });
+    var data = labels.map(x => defectsByDate[x].length);
+
+    new Chart(defectsByDateChart, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: '# of outstanding cases',
+                data: data,
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+
 </script>