--------------------------- Posts/Day for @alcea@pb.todon.de<br> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> canvas { display: block; max-width: 800px; margin: 0 auto; } </style> </head> <body> <canvas id="dateChart"></canvas> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="entities"></div> <script> $(document).ready(function() { var endpoint = 'https://pb.todon.de/api/v1/accounts/109629985010224381/statuses'; var entities = []; var dates = []; fetchEntities(); function fetchEntities() { var url = endpoint; if (entities.length > 0) { var linkHeader = '<https://pb.todon.de/api/v1/accounts/109629985010224381/statuses?max_id=' + entities[entities.length - 1].id + '>; rel="next"'; $.ajaxSetup({ headers: { 'Link': linkHeader } }); } $.ajax({ url: url, type: 'GET', dataType: 'json', headers: { 'Authorization': 'Bearer token' }, success: function(response, textStatus, xhr) { var newEntities = response; for (var i = 0; i < newEntities.length; i++) { var entity = newEntities[i]; entities.push(entity); // Filter out the date var date = new Date(entity.created_at); dates.push(date); } var linkHeader = xhr.getResponseHeader('Link'); var nextLink = extractLinkUrl(linkHeader, 'next'); if (entities.length >= 200) { // Render the fetched entities renderEntities(); // Plot the dates plotDates(); } else if (nextLink) { // Fetch the next set of entities endpoint = nextLink; fetchEntities(); } else { console.log('Finished fetching 200 entities'); // Render the fetched entities renderEntities(); // Plot the dates plotDates(); } }, error: function(xhr, status, error) { console.log('Error: ' + error); } }); } function extractLinkUrl(linkHeader, rel) { var links = linkHeader.split(','); for (var i = 0; i < links.length; i++) { var link = links[i].trim(); var regex = /<([^>]+)>;\s*rel="([^"]+)"/g; var match = regex.exec(link); if (match && match[2] === rel) { return match[1]; } } return null; } function renderEntities() { for (var i = 0; i < entities.length; i++) { var entity = entities[i]; // Render the URL and date on the page var entityHtml = '<p>'; //entityHtml += 'URL: <a href="' + entity.url + '">' + entity.url + '</a><br>'; //entityHtml += 'Date: ' + entity.created_at + '<br>'; //entityHtml += '</p>'; $('#entities').append(entityHtml); } } function plotDates() { // Filter the dates for the last 7 days var today = new Date(); var lastSevenDays = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000); var filteredDates = dates.filter(function(date) { return date >= lastSevenDays && date <= today; }); // Count the occurrences of each date var dateCounts = {}; filteredDates.forEach(function(date) { var dateString = date.toISOString().split('T')[0]; dateCounts[dateString] = (dateCounts[dateString] || 0) + 1; }); // Extract the dates and counts as separate arrays var chartLabels = Object.keys(dateCounts); var chartData = Object.values(dateCounts); // Create the chart using Chart.js var ctx = document.getElementById('dateChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: chartLabels, datasets: [{ label: 'Date Counts', data: chartData, fill: false, borderColor: 'rgba(0, 123, 255,0.8)', borderWidth: 2 }] }, options: { scales: { x: { display: true, title: { display: true, text: 'Date' }, reverse: true // Add this line to reverse the x-axis }, y: { display: true, title: { display: true, text: 'Count' }, beginAtZero: true, stepSize: 1 } } } }); } }); </script> </plaintext>