<?php
$url = "https://alcea-wisteria.de/PHP/0demo/";
$html = file_get_contents($url);

$pattern = '/<tr>(.*?)<\/tr>/s';
preg_match_all($pattern, $html, $matches);

$dates = array();
foreach ($matches[0] as $match) {
    preg_match('/\d{4}-\d{2}-\d{2}/', $match, $date);
    if (!empty($date)) {
         $dates[] = $date[0];
        $urls[] = $date[0] ; // Append the date to the URL
    }
}
$newestIndex = array_search(max($dates), $dates);
$newestUrl = $urls[$newestIndex];

// Count the occurrences of each month-year combination
$counts = array();
foreach ($dates as $date) {
    $monthYear = substr($date, 0, 7); // Extract the yyyy-mm part
    if (isset($counts[$monthYear])) {
        $counts[$monthYear]++;
    } else {
        $counts[$monthYear] = 1;
    }
}

// Fill in months with no entries and set their count to 0
$startDate = min(array_keys($counts));
$endDate = date('Y-m'); // Get the current month-year
$currentDate = $startDate;
while ($currentDate != $endDate) {
    if (!isset($counts[$currentDate])) {
        $counts[$currentDate] = 0;
    }
    $currentDate = date('Y-m', strtotime($currentDate . ' +1 month'));
}

// Sort the month-year combinations by year and then month
ksort($counts);

// Prepare the data for the chart
$labels = array_keys($counts);
$data = array_values($counts);
?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>

    <script>
        // Create the chart
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: <?php echo json_encode($labels); ?>,
                datasets: [{
                    label: 'PHP (Latest: <?php echo $newestUrl; ?>)',
                    data: <?php echo json_encode($data); ?>,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                var label = context.dataset.label || '';
                                var value = context.parsed.y;
                                var tooltipLabel = 'Value: ' + value; // Customize the tooltip label here
                                return tooltipLabel;
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
