data-quality-dashboard.html

---
layout: default
title: Data Quality Dashboard
---

<h1>Data Quality Dashboard</h1>
<p class="text-muted">
    Quality metrics for KG-Registry resources, including completeness, access checks, and status-change signals.
</p>
<p>
    <a class="btn btn-outline-primary btn-sm" href="data-quality-scoring.html">
        How Issue Score Is Calculated
    </a>
</p>
<p id="dashboard-meta" class="text-muted small"></p>

<div id="dashboard-error" class="alert alert-warning" style="display:none;" role="alert"></div>

<div id="dashboard-content" style="display:none;">
    <div class="quality-layout">
        <div class="quality-main">
            <div id="summary-cards" class="quality-summary-grid"></div>

            <div class="row mt-4">
                <div class="col-lg-6 mb-4">
                    <h3>Resource Completeness</h3>
                    <div id="resource-bars"></div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h3>Product Completeness</h3>
                    <div id="product-bars"></div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h3>Access Health</h3>
                    <div id="access-bars"></div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h3>Status / Date Signals</h3>
                    <div id="date-bars"></div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h3>Identifiers & Contacts</h3>
                    <div id="identity-bars"></div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h3>KnowledgeGraph Evaluation Coverage</h3>
                    <div id="kg-eval-bars"></div>
                </div>
            </div>

            <h2 class="mt-2">Top 10 Resources Most In Need Of Improvement</h2>
            <p class="text-muted small">
                Ranked by weighted issue score from missing metadata, stub status, and access failures.
            </p>
            <div class="table-responsive">
                <table class="table table-striped table-sm align-middle" id="top-resources-table">
                    <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Resource</th>
                        <th>Score</th>
                        <th>Main Issues</th>
                        <th>Broken Links</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <aside class="quality-sidebar">
            <div class="quality-sidebar-inner">
                <h2>Category Match List</h2>
                <p class="text-muted small">
                    Click a metric label to view matching Resource/Product IDs.
                </p>
                <p id="detail-list-meta" class="text-muted small">No category selected.</p>
                <pre id="detail-list-output" class="quality-list-view"></pre>
            </div>
        </aside>
    </div>
</div>

<style>
.quality-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.quality-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.quality-main {
    flex: 1 1 66%;
    min-width: 0;
}

.quality-sidebar {
    flex: 0 0 32%;
    max-width: 420px;
}

.quality-sidebar-inner {
    position: sticky;
    top: 12px;
}

.quality-card {
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfcfd;
}

.quality-card h4 {
    font-size: 0.82rem;
    color: #4e5d6b;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.quality-card .value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #203246;
}

.bar-list {
    display: grid;
    gap: 8px;
}

.bar-row .bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.bar-track {
    height: 10px;
    background: #e9edf2;
    border-radius: 6px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    min-width: 2px;
}

.issue-pill {
    display: inline-block;
    background: #edf2f7;
    color: #334a62;
    border-radius: 999px;
    font-size: 0.74rem;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
}

.metric-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #24527a;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    font: inherit;
}

.quality-list-view {
    min-height: 260px;
    max-height: calc(100vh - 220px);
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px;
    background: #fcfdff;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 1200px) {
    .quality-layout {
        flex-direction: column;
    }
    .quality-sidebar {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
    .quality-sidebar-inner {
        position: static;
    }
    .quality-list-view {
        max-height: 360px;
    }
}
</style>

<script>
const numberFmt = new Intl.NumberFormat();
let dashboardData = null;

function fmt(value) {
    return numberFmt.format(value ?? 0);
}

function pct(value, total) {
    if (!total || total <= 0) {
        return 0;
    }
    return (value / total) * 100;
}

function setMeta(data) {
    const mode = data.links?.mode || 'unknown';
    const generated = data.generated_at || 'unknown';
    const checked = data.links?.live_checked_urls ?? 0;
    document.getElementById('dashboard-meta').textContent =
        `Generated: ${generated} | Link mode: ${mode} | Live URL checks this run: ${fmt(checked)}`;
}

function renderCards(data) {
    const cards = [
        { label: 'Resources', detailKey: 'resource_total_ids', value: data.resources.total },
        { label: 'Products', detailKey: 'product_total_ids', value: data.products.total },
        { label: 'Stub Resources', detailKey: 'stub_resource_ids', value: data.resources.stub_count },
        { label: 'Resources Without Products', detailKey: 'resources_without_products_ids', value: data.resources.without_products },
        { label: 'Missing infores_id', detailKey: 'missing_infores_id_resource_ids', value: data.resources.missing_infores_id || 0 },
        { label: 'Missing license', detailKey: 'missing_license_resource_ids', value: data.resources.missing_license || 0 },
        { label: 'Missing contacts', detailKey: 'missing_contacts_resource_ids', value: data.resources.missing_contacts || 0 },
        { label: 'Contacts Not Linked To Org', detailKey: 'contacts_without_org_connection_resource_ids', value: data.resources.contacts_without_org_connection || 0 },
        { label: 'Broken URLs', detailKey: 'broken_link_page_ids', value: data.links.broken_urls },
        { label: 'Resources With Broken Links', detailKey: 'resource_with_broken_links_ids', value: data.resources.with_broken_links },
        { label: 'KG Missing Eval Page', detailKey: 'kg_without_evaluation_page_resource_ids', value: data.knowledge_graph_evaluations?.without_evaluation_page || 0 },
        { label: 'Avg Issue Score', value: data.scoring.average_score }
    ];

    const root = document.getElementById('summary-cards');
    root.innerHTML = '';
    cards.forEach(card => {
        const div = document.createElement('div');
        div.className = 'quality-card';
        const labelHtml = card.detailKey
            ? `<button class="metric-link" data-detail-key="${card.detailKey}" data-detail-label="${card.label}">${card.label}</button>`
            : card.label;
        div.innerHTML = `<h4>${labelHtml}</h4><div class="value">${fmt(card.value)}</div>`;
        root.appendChild(div);
    });
}

function renderBars(containerId, bars, total) {
    const root = document.getElementById(containerId);
    root.innerHTML = '';
    const wrapper = document.createElement('div');
    wrapper.className = 'bar-list';

    bars.forEach(bar => {
        const row = document.createElement('div');
        row.className = 'bar-row';
        const percentage = Math.max(0, Math.min(100, pct(bar.value, total)));
        const labelHtml = bar.detailKey
            ? `<button class="metric-link" data-detail-key="${bar.detailKey}" data-detail-label="${bar.label}">${bar.label}</button>`
            : bar.label;
        row.innerHTML = `
            <div class="bar-header">
                <span>${labelHtml}</span>
                <span>${fmt(bar.value)} (${percentage.toFixed(1)}%)</span>
            </div>
            <div class="bar-track">
                <div class="bar-fill" style="width:${percentage}%; background:${bar.color};"></div>
            </div>
        `;
        wrapper.appendChild(row);
    });

    root.appendChild(wrapper);
}

function renderTopResources(data) {
    const tbody = document.querySelector('#top-resources-table tbody');
    tbody.innerHTML = '';
    const rows = data.top_resources || [];
    rows.forEach((item, idx) => {
        const tr = document.createElement('tr');
        const issueHtml = (item.issues || [])
            .slice(0, 4)
            .map(issue => `<span class="issue-pill">${issue.label} x${issue.count}</span>`)
            .join('');
        const brokenCount = item.broken_links ? item.broken_links.length : 0;
        const href = item.resource_page || '#';
        tr.innerHTML = `
            <td>${idx + 1}</td>
            <td><a href="${href}">${item.name || item.id}</a><br><small class="text-muted">${item.id}</small></td>
            <td><strong>${fmt(item.score)}</strong></td>
            <td>${issueHtml || '<span class="text-muted">None</span>'}</td>
            <td>${fmt(brokenCount)}</td>
        `;
        tbody.appendChild(tr);
    });
}

function showDetailList(detailKey, label) {
    const lists = dashboardData?.detail_lists || {};
    const values = lists[detailKey] || [];
    const meta = document.getElementById('detail-list-meta');
    const output = document.getElementById('detail-list-output');
    meta.textContent = `${label}: ${fmt(values.length)} matching IDs`;
    output.textContent = values.length ? values.join('\n') : '(none)';
}

document.addEventListener('click', (event) => {
    const target = event.target.closest('.metric-link');
    if (!target) {
        return;
    }
    event.preventDefault();
    const key = target.dataset.detailKey;
    const label = target.dataset.detailLabel || target.textContent.trim();
    if (!key) {
        return;
    }
    showDetailList(key, label);
});

async function loadDashboard() {
    const errorNode = document.getElementById('dashboard-error');
    try {
        const response = await fetch('reports/quality-dashboard.json');
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        const data = await response.json();
        dashboardData = data;

        setMeta(data);
        renderCards(data);

        const resourceTotal = data.resources.total || 0;
        renderBars('resource-bars', [
            { label: 'Stub resources', detailKey: 'stub_resource_ids', value: data.resources.stub_count || 0, color: '#d94841' },
            { label: 'Missing description', detailKey: 'missing_description_resource_ids', value: data.resources.missing_description || 0, color: '#f08c00' },
            { label: 'Missing homepage_url', detailKey: 'missing_homepage_url_resource_ids', value: data.resources.missing_homepage_url || 0, color: '#e67700' },
            { label: 'Without products', detailKey: 'resources_without_products_ids', value: data.resources.without_products || 0, color: '#b02a37' }
        ], resourceTotal);

        const productTotal = data.products.total || 0;
        renderBars('product-bars', [
            { label: 'Missing format', detailKey: 'products_missing_format_ids', value: data.products.missing_format || 0, color: '#a61e4d' },
            { label: 'Missing original_source', detailKey: 'products_missing_original_source_ids', value: data.products.missing_original_source || 0, color: '#7c3aed' },
            { label: 'Missing product_url', detailKey: 'products_missing_product_url_ids', value: data.products.missing_product_url || 0, color: '#2563eb' },
            { label: 'Retrieval warning mentions', detailKey: 'retrieval_warning_product_ids', value: data.products.retrieval_warning_mentions || 0, color: '#0f766e' }
        ], productTotal);

        const linkTotal = data.links.total_unique_urls || 0;
        renderBars('access-bars', [
            { label: 'Healthy URLs', detailKey: 'healthy_link_page_ids', value: data.links.healthy_urls || 0, color: '#2f9e44' },
            { label: 'Broken URLs', detailKey: 'broken_link_page_ids', value: data.links.broken_urls || 0, color: '#c92a2a' },
            { label: 'Unchecked URLs', detailKey: 'unchecked_link_page_ids', value: data.links.unchecked_urls || 0, color: '#868e96' }
        ], linkTotal);

        const dateTotal = data.resources.total || 0;
        renderBars('date-bars', [
            { label: 'Modified after creation', detailKey: 'modified_after_creation_resource_ids', value: data.dates.modified_after_creation || 0, color: '#1971c2' },
            { label: 'Unchanged since creation', detailKey: 'unchanged_since_creation_resource_ids', value: data.dates.unchanged_since_creation || 0, color: '#e67700' },
            { label: 'Missing creation_date', detailKey: 'missing_creation_date_resource_ids', value: data.dates.missing_creation_date || 0, color: '#c92a2a' },
            { label: 'Missing last_modified_date', detailKey: 'missing_last_modified_date_resource_ids', value: data.dates.missing_last_modified_date || 0, color: '#d6336c' },
            { label: 'Stale >365 days', detailKey: 'stale_over_365_days_resource_ids', value: data.dates.stale_over_365_days || 0, color: '#5f3dc4' }
        ], dateTotal);

        renderBars('identity-bars', [
            { label: 'Missing license', detailKey: 'missing_license_resource_ids', value: data.resources.missing_license || 0, color: '#9c36b5' },
            { label: 'Missing repository', detailKey: 'missing_repository_resource_ids', value: data.resources.missing_repository || 0, color: '#7048e8' },
            { label: 'Missing infores_id', detailKey: 'missing_infores_id_resource_ids', value: data.resources.missing_infores_id || 0, color: '#1c7ed6' },
            { label: 'Missing fairsharing_id', detailKey: 'missing_fairsharing_id_resource_ids', value: data.resources.missing_fairsharing_id || 0, color: '#1098ad' },
            { label: 'Missing contacts', detailKey: 'missing_contacts_resource_ids', value: data.resources.missing_contacts || 0, color: '#f76707' },
            { label: 'Contacts not linked to Organization', detailKey: 'contacts_without_org_connection_resource_ids', value: data.resources.contacts_without_org_connection || 0, color: '#c92a2a' }
        ], resourceTotal);

        const kgTotal = data.knowledge_graph_evaluations?.knowledge_graph_total || 0;
        renderBars('kg-eval-bars', [
            { label: 'KGs with evaluation page', detailKey: 'kg_with_evaluation_page_resource_ids', value: data.knowledge_graph_evaluations?.with_evaluation_page || 0, color: '#2f9e44' },
            { label: 'KGs without evaluation page', detailKey: 'kg_without_evaluation_page_resource_ids', value: data.knowledge_graph_evaluations?.without_evaluation_page || 0, color: '#c92a2a' }
        ], kgTotal);

        renderTopResources(data);
        document.getElementById('dashboard-content').style.display = 'block';
    } catch (error) {
        errorNode.textContent = `Unable to load dashboard metrics: ${error.message}`;
        errorNode.style.display = 'block';
    }
}

loadDashboard();
</script>