Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Chipling Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800"> | |
| <div class="max-w-7xl mx-auto p-6"> | |
| <h1 class="text-3xl font-bold mb-6">📊 Chipling Dashboard</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h2 class="text-xl font-bold">Total Requests</h2> | |
| <p class="text-3xl">{{ total_requests }}</p> | |
| </div> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h2 class="text-xl font-bold">Most Queried</h2> | |
| <ul> | |
| {% for query, count in query_counts %} | |
| <li class="text-sm">{{ query }} ({{ count }})</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h2 class="text-xl font-bold">Filter by Endpoint</h2> | |
| <form method="get"> | |
| <select name="endpoint" class="w-full border p-2 rounded"> | |
| <option value="">All</option> | |
| {% for ep in endpoint_counts.keys() %} | |
| <option value="{{ ep }}" {% if ep == filter_endpoint %}selected{% endif %}>{{ ep }}</option> | |
| {% endfor %} | |
| </select> | |
| <button type="submit" class="mt-2 w-full bg-blue-500 text-white px-3 py-2 rounded">Filter</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h2 class="text-lg font-bold mb-2">Requests per Day</h2> | |
| <canvas id="dateChart"></canvas> | |
| </div> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h2 class="text-lg font-bold mb-2">Endpoint Usage</h2> | |
| <canvas id="endpointChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded shadow"> | |
| <h2 class="text-2xl font-bold mb-4">Recent Logs</h2> | |
| <table class="w-full table-auto"> | |
| <thead> | |
| <tr class="bg-gray-200"> | |
| <th class="p-2 text-left">Time</th> | |
| <th class="p-2 text-left">Endpoint</th> | |
| <th class="p-2 text-left">Query</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for log in logs %} | |
| <tr class="border-b"> | |
| <td class="p-2">{{ log.timestamp }}</td> | |
| <td class="p-2">{{ log.endpoint }}</td> | |
| <td class="p-2">{{ log.query }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script> | |
| const dateData = {{ date_counts | tojson }}; | |
| const endpointData = {{ endpoint_counts | tojson }}; | |
| new Chart(document.getElementById("dateChart"), { | |
| type: 'bar', | |
| data: { | |
| labels: Object.keys(dateData), | |
| datasets: [{ | |
| label: "Requests", | |
| data: Object.values(dateData), | |
| backgroundColor: "rgba(59, 130, 246, 0.6)" | |
| }] | |
| } | |
| }); | |
| new Chart(document.getElementById("endpointChart"), { | |
| type: 'pie', | |
| data: { | |
| labels: Object.keys(endpointData), | |
| datasets: [{ | |
| data: Object.values(endpointData), | |
| backgroundColor: ['#60A5FA', '#FBBF24', '#34D399', '#F472B6'] | |
| }] | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |