1.2

api/search.php

@@ -42,7 +42,7 @@ $mock_data = [
     'oppervlakte' => 1573, // in m²
 
     // Energielabel
-    'energielabel' => 'A++',
+    'energielabel' => getEnergylabelData('3011 AD', '40'),
     'geschatte_energiekosten' => 450, // per maand
 
     // Verkoophistorie
@@ -66,3 +66,18 @@ $mock_data = [
 sleep(1);
 
 echo json_encode($mock_data);
+
+function getEnergylabelData($zip, $number) {
+    // In a real app, you would get this from a secure place (e.g., environment variables)
+    $apiKey = getenv('ENERGIE_LABEL_API_KEY');
+
+    // If no API key is set, we can't continue.
+    if (!$apiKey || $apiKey === 'YOUR_API_KEY_HERE') {
+        // We return a placeholder for now, so the frontend knows to show the "API key needed" state.
+        return 'API_KEY_MISSING';
+    }
+
+    // TODO: Replace with actual API call to EP-Online using the $apiKey.
+    // For now, we'll return a mock value to prove the flow works.
+    return 'A++';
+}

assets/js/main.js

@@ -5,8 +5,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const resultsContainer = document.getElementById('results-container');
     const examples = document.querySelectorAll('.example-link');
 
-    let wozChart = null; // To hold the chart instance
-
     // Helper to format currency
     const formatCurrency = (value) => new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(value);
 
@@ -71,22 +69,20 @@ document.addEventListener('DOMContentLoaded', () => {
         document.getElementById('info-eigendomssituatie').textContent = data.eigendomssituatie;
         document.getElementById('info-type').textContent = data.type;
         document.getElementById('info-bouwjaar').textContent = data.bouwjaar;
-        document.getElementById('info-oppervlakte').textContent = `${data.oppervlakte} m²`;
+        document.getElementById('info-oppervlakte').textContent = data.oppervlakte;
 
         // --- WOZ Waarde ---
         document.getElementById('info-woz-waarde').textContent = formatCurrency(data.woz_waarde);
-        renderWozChart(data.woz_ontwikkeling);
 
         // --- Energielabel ---
         document.getElementById('info-energielabel').textContent = data.energielabel;
         document.getElementById('info-energiekosten').textContent = `${formatCurrency(data.geschatte_energiekosten)}`;
 
         // --- Buurtstatistieken ---
-        document.getElementById('info-gem-woz').textContent = formatCurrency(data.buurtstatistieken.gemiddelde_woz);
         document.getElementById('info-inwoners').textContent = data.buurtstatistieken.inwoners.toLocaleString('nl-NL');
         document.getElementById('info-gem-leeftijd').textContent = `${data.buurtstatistieken.gemiddelde_leeftijd} jaar`;
-        document.getElementById('info-groen-score').textContent = `${data.buurtstatistieken.groen_score} / 10`;
+        document.getElementById('info-groen-score').textContent = data.buurtstatistieken.groen_score;
-        document.getElementById('info-veiligheid-score').textContent = `${data.buurtstatistieken.veiligheid_score} / 10`;
+        document.getElementById('info-veiligheid-score').textContent = data.buurtstatistieken.veiligheid_score;
 
         // --- Verkoophistorie ---
         const historyBody = document.getElementById('verkoophistorie-body');
@@ -105,49 +101,6 @@ document.addEventListener('DOMContentLoaded', () => {
         resultsContainer.scrollIntoView({ behavior: 'smooth' });
     };
 
-    const renderWozChart = (wozData) => {
-        const ctx = document.getElementById('woz-chart').getContext('2d');
-        const labels = wozData.map(d => d.jaar);
-        const values = wozData.map(d => d.waarde);
-
-        if (wozChart) {
-            wozChart.destroy(); // Destroy previous chart instance
-        }
-
-        wozChart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'WOZ-Waarde',
-                    data: values,
-                    borderColor: '#0066cc',
-                    backgroundColor: 'rgba(0, 102, 204, 0.1)',
-                    fill: true,
-                    tension: 0.4,
-                    pointBackgroundColor: '#0066cc',
-                    pointRadius: 4,
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    y: {
-                        ticks: {
-                            callback: (value) => formatCurrency(value)
-                        }
-                    }
-                },
-                plugins: {
-                    legend: {
-                        display: false
-                    }
-                }
-            }
-        });
-    };
-
     const displayError = (message) => {
         alert(message);
     };

index.php

@@ -27,8 +27,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
     
-    <!-- Chart.js for graphs -->
+    
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 </head>
 <body>
 
@@ -94,18 +93,14 @@
                 </div>
 
                 <!-- Card: WOZ Waarde -->
-                <div class="info-card card-large">
+                <div class="info-card">
                     <div class="card-header">
                         <span class="card-icon">📈</span>
-                        <h4 class="card-title">WOZ-Waarde</h4>
+                        <h4 class="card-title">Gemiddelde WOZ-Waarde (Buurt)</h4>
                     </div>
                     <div class="woz-main">
-                        <p class="woz-label">Huidige Waarde</p>
                         <p id="info-woz-waarde" class="woz-value"></p>
                     </div>
-                    <div class="chart-container">
-                        <canvas id="woz-chart"></canvas>
-                    </div>
                 </div>
 
                 <!-- Card: Energielabel -->