index.html

---
title: "Home"
---

<h2>Overview</h2>
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <p class="card-title h4">No. of outstanding defects</p>
                <p class="card-text text-center fs-1 fw-bold" id="defectTotal">

                </p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <p class="card-title h4">Oldest outstanding defect</p>
                <p class="card-text text-center fs-1 fw-bold" id="oldestDefect">

                </p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <p class="card-title h4">Most common defect</p>
                <p class="card-text text-center fs-1 fw-bold" id="mostCommonDefect">

                </p>
            </div>
        </div>
    </div>
</div>

<h2>Map</h2>

<div id="map" style="height:500px;" class="mb-1"></div>


<div class="row row-cols-1 row-cols-md-2 g-4 mt-1">
    <div class="col">
        <h3>Key</h3>
        <ul id="mapKey" class="list-group"></ul>
    </div>
    <div class="col">
        <h3>Defects by type</h3>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Defect</th>
                    <th>Count</th>
                </tr>
            </thead>
            <tbody id="defectsByType">

            </tbody>
        </table>
    </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>

<script id="iconMap" type="application/json">
    {
        "Bollard - damaged or missing": "road-barrier",
        "Cobbles - damaged, missing or uneven": "road-circle-xmark",
        "Crash barrier - damaged or broken": "road-barrier",
        "Dangerous overhead wires": "bolt",
        "Guard rail - damaged or broken": "road-barrier",
        "Lit bollard - damaged or missing": "road-barrier",
        "Markings - defective": "xmarks-lines",
        "Oil or Fuel spill": "fill-drip",
        "Other - pavement or path related": "shoe-prints",
        "Other - road related": "road",
        "Other - road sign related": "signs-post",
        "Overhanging vegetation": "tree",
        "Pothole": "road-circle-xmark",
        "Subsidence": "house-crack",
        "Uneven surface or cracking": "road-circle-exclamation",
        "Utility cover - broken, high/low or missing": "road-circle-exclamation",
        "Zebra or pelican crossing": "person-walking"
      }    
</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);

    var noOfOustandingDefectsElement = document.getElementById("defectTotal");
    var oldestDefectElement = document.getElementById("oldestDefect");
    var mostCommonDefectElement = document.getElementById("mostCommonDefect");

    // No. of outstanding defects
    noOfOustandingDefectsElement.innerText = roadsData
        .length
        .toLocaleString();

    // Oldest outstanding defect
    var reportedDates = roadsData.map(x => Date.parse(x["Reported date"]));
    var oldestDate = new Date(reportedDates.reduce(function (a, b) {
        return a < b
            ? a
            : b;
    }));

    var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
    var today = new Date();
    var diffDays = Math.round(Math.abs((oldestDate - today) / oneDay)).toLocaleString();
    oldestDefectElement.innerHTML = `${diffDays} days<br>(${oldestDate.toLocaleDateString('en-GB', { year: "numeric", month: "short", day: "numeric" })})`;

    // Most common defect
    var defectTypes = Object.groupBy(roadsData, report => report["Problem type"]);
    var mostCommonDefect = Object.keys(defectTypes).reduce(function (a, b) { return defectTypes[a] > defectTypes[b] ? a : b });

    mostCommonDefectElement.innerHTML = `${mostCommonDefect}<br>${defectTypes[mostCommonDefect].length.toLocaleString()} reports`;

    // Map
    var iconMapElement = document.getElementById("iconMap");
    var iconMap = JSON.parse(iconMapElement.innerHTML);

    // Map key
    var keyHtml = Object.keys(iconMap).map(defectType => {
        return `<li class="list-group-item"><i class="fa-solid fa-${iconMap[defectType]}"></i>&nbsp; ${defectType}</li>`;
    }).join("");

    document.getElementById("mapKey").innerHTML = keyHtml;

    var map = L.map('map').setView([57.148690, -2.099241], 12);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    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"]);
        var defectReportedDateFormatted = new Date(defectReportedDate).toLocaleDateString('en-GB', { year: "numeric", month: "short", day: "numeric" });
        var defectAge = Math.round(Math.abs((defectReportedDate - today) / oneDay));
        var defectAgeFormatted = defectAge.toLocaleString();

        var iconColour = "";

        if (defectAge >= 365) {
            iconColour = "red";
        }
        else if (defectAge >= 183) {
            iconColour = "amber";
        }
        else if (defectAge >= 92) {
            iconColour = "blue";
        }
        else {
            iconColour = "green";
        }

        var iconClass = iconMap[defect["Problem type"]];

        var icon = L.AwesomeMarkers.icon({
            icon: iconClass,
            prefix: "fa",
            markerColor: iconColour,
            extraClasses: "fa-solid"
        });
        var marker = L.marker([parseFloat(defect.Lat), parseFloat(defect.Lng)], { icon: icon });

        var popupText = `<p class="h5">${defect["Problem type"]}</p>
            <ul class="list-unstyled">
                <li><strong>Reported:</strong> ${defectReportedDateFormatted}</li>
                <li><strong>Age:</strong> ${defectAgeFormatted} day(s) old</li>
            </ul>`;

        marker.bindPopup(popupText)
        mapLayer.addLayer(marker);
    });

    mapLayer.addTo(map);

    // Defects by type
    var sortedDefectsByType = Object.fromEntries(
        Object.entries(defectTypes).sort(([, a], [, b]) => b.length - a.length)
    );

    var defectsByTypeHtml = Object.keys(sortedDefectsByType).map(x => {
        return `<tr><td>${x}</td><td>${sortedDefectsByType[x].length.toLocaleString()}</td></tr>`
    }).join("");

    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>