Add chart.js library and create a line graph for total IP addresses

ZIT-P22 · Feb 5, 2024 · 531f0df · 531f0df
1 parent 5ae887a
commit 531f0df
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/ip-atlas/templates/layout.html b/ip-atlas/templates/layout.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
     <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         html {
             scroll-behavior: smooth !important;
@@ -85,7 +86,7 @@
                             </button>
                             <input type="text" id="searchInput" name="q" placeholder="Search IPs..."
                                 value="{{ request.args.get('q', '') }}" maxlength="50"
-                                class="w-full h-full py-2 pl-10 pr-4 bg-gray-800 text-white transition-shadow duration-300 bg-transparent border-transparent rounded-lg placeholder:text-gray-400">
+                                class="w-full h-full py-2 pl-10 pr-4 text-white transition-shadow duration-300 bg-transparent bg-gray-800 border-transparent rounded-lg placeholder:text-gray-400">
                         </div>
                         <!-- Dropdown for search type -->
                         <div class="relative ml-[-20px]">

diff --git a/ip-atlas/templates/statistic.html b/ip-atlas/templates/statistic.html
@@ -2,7 +2,7 @@
 <div class="flex flex-col w-full min-h-screen dark">
     <main class="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10">
         <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <div class="border rounded-lg shadow-sm bg-card text-card-foreground" data-v0-t="card">
+            <div class="relative overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground" data-v0-t="card">
                 <div class="flex flex-row items-center justify-between p-6 pb-2 space-y-0">
                     <h3 class="text-sm font-medium tracking-tight whitespace-nowrap">
                         Total IP Addresses
@@ -11,12 +11,57 @@ <h3 class="text-sm font-medium tracking-tight whitespace-nowrap">
                         language
                     </span>
                 </div>
-                <div class="p-6">
+                <div class="p-6 pt-0">
                     <div class="text-2xl font-bold">2,350</div>
                     <p class="text-xs text-gray-500 dark:text-gray-400">
                         +20.1% from last month
                     </p>
                 </div>
+                <div class="absolute inset-0">
+                    <canvas id="totalIPAddressesGraph" class="w-full h-full"></canvas>
+                </div>
+                <script>
+                    document.addEventListener('DOMContentLoaded', function () {
+                        var ctx = document.getElementById('totalIPAddressesGraph').getContext('2d');
+                        var chart = new Chart(ctx, {
+                            type: 'line',
+                            data: {
+                                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                                datasets: [{
+                                    label: 'Total IP Addresses',
+                                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                                    borderColor: 'rgba(255, 255, 255, 0.7)',
+                                    data: [2000, 2100, 2200, 2300, 2350, 2400, 2450],
+                                    fill: true,
+                                }]
+                            },
+                            options: {
+                                scales: {
+                                    y: {
+                                        display: false
+                                    },
+                                    x: {
+                                        display: false
+                                    }
+                                },
+                                elements: {
+                                    line: {
+                                        tension: 0.4 // Smoothes the line
+                                    }
+                                },
+                                plugins: {
+                                    legend: {
+                                        display: false
+                                    }
+                                },
+                                layout: {
+                                    padding: 0
+                                },
+                                maintainAspectRatio: false
+                            }
+                        });
+                    });
+                </script>
             </div>
             <div class="border rounded-lg shadow-sm bg-card text-card-foreground" data-v0-t="card">
                 <div class="flex flex-row items-center justify-between p-6 pb-2 space-y-0">
@@ -68,13 +113,13 @@ <h3 class="text-sm font-medium tracking-tight whitespace-nowrap">
             </div>
         </div>
         <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
-            <div class="border rounded-lg shadow-sm bg-card text-card-foreground" data-v0-t="card">
+            <div class="overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground" data-v0-t="card">
                 <div class="flex flex-col space-y-1.5 p-6">
                     <h3 class="text-2xl font-semibold leading-none tracking-tight whitespace-nowrap">
                         Recent Activity
                     </h3>
                 </div>
-                <div class="p-6">
+                <div class="p-6 overflow-auto max-h-80">
                     <div class="divide-y divide-gray-200 dark:divide-gray-800">
                         <div class="flex py-4 space-x-3">
                             <div class="flex-shrink-0">
@@ -115,6 +160,7 @@ <h3 class="text-2xl font-semibold leading-none tracking-tight whitespace-nowrap"
                                 </div>
                             </div>
                         </div>
+                        <!-- Additional events can be added here -->
                     </div>
                 </div>
             </div>