add chart for unique visitors

loftwah · Aug 27, 2024 · 8e7f58a · 8e7f58a
1 parent f867bad
commit 8e7f58a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 22 deletions.
diff --git a/app/controllers/analytics_controller.rb b/app/controllers/analytics_controller.rb
@@ -12,8 +12,9 @@ def index
     @link_analytics = fetch_cached_data("link_analytics") { fetch_link_analytics }
     @achievement_analytics = fetch_cached_data("achievement_analytics") { fetch_achievement_analytics }
     @daily_views = fetch_cached_data("daily_views") { fetch_daily_views }
+    @daily_unique_visitors = fetch_cached_data("daily_unique_visitors") { fetch_daily_unique_visitors }
     @browser_data = fetch_cached_data("browser_data") { fetch_browser_data }
-  end
+  end  
 
   private
 
@@ -58,6 +59,10 @@ def fetch_daily_views
     @user.page_views.group_by_day(:visited_at, range: 30.days.ago..Time.now).count
   end
 
+  def fetch_daily_unique_visitors
+    @user.page_views.select(:ip_address).distinct.group_by_day(:visited_at, range: 30.days.ago..Time.now).count
+  end  
+
   def fetch_browser_data
     @user.page_views.group(:browser).count.transform_keys do |user_agent|
       case user_agent

diff --git a/app/views/analytics/index.html.erb b/app/views/analytics/index.html.erb
@@ -111,29 +111,51 @@
   </div>
 
   <!-- Charts Section -->
-  <div class="grid grid-cols-1 gap-6 mb-6">
-    <!-- Time-based Analytics -->
-    <div class="bg-gray-800 rounded-lg shadow p-4">
-      <h2 class="text-xl font-semibold mb-4">Daily Views (Last 30 Days)</h2>
-      <%= line_chart @daily_views, 
-                     colors: ["#84CC16"],
-                     library: {
-                       backgroundColor: 'transparent',
-                       legend: { display: false },
-                       scales: {
-                         x: { ticks: { color: 'white', fontSize: 12 } },
-                         y: { ticks: { color: 'white', fontSize: 12 } },
-                       },
-                       elements: {
-                         line: { tension: 0.4 },
-                         point: { radius: 3, backgroundColor: 'white' }
-                       },
-                       title: { display: true, text: 'Daily Views (Last 30 Days)', color: 'white', fontSize: 16 },
-                       responsive: true
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+  <!-- Time-based Analytics -->
+  <div class="bg-gray-800 rounded-lg shadow p-4">
+    <h2 class="text-xl font-semibold mb-4">Daily Views (Last 30 Days)</h2>
+    <%= line_chart @daily_views, 
+                   colors: ["#84CC16"],
+                   library: {
+                     backgroundColor: 'transparent',
+                     legend: { display: false },
+                     scales: {
+                       x: { ticks: { color: 'white', fontSize: 12 } },
+                       y: { ticks: { color: 'white', fontSize: 12 } },
                      },
-                     height: "300px" %>
-    </div>
+                     elements: {
+                       line: { tension: 0.4 },
+                       point: { radius: 3, backgroundColor: 'white' }
+                     },
+                     title: { display: true, text: 'Daily Views (Last 30 Days)', color: 'white', fontSize: 16 },
+                     responsive: true
+                   },
+                   height: "300px" %>
+  </div>
+
+  <!-- Unique Visitors Chart -->
+  <div class="bg-gray-800 rounded-lg shadow p-4">
+    <h2 class="text-xl font-semibold mb-4">Unique Visitors (Last 30 Days)</h2>
+    <%= line_chart @daily_unique_visitors, 
+                   colors: ["#E879F9"],
+                   library: {
+                     backgroundColor: 'transparent',
+                     legend: { display: false },
+                     scales: {
+                       x: { ticks: { color: 'white', fontSize: 12 } },
+                       y: { ticks: { color: 'white', fontSize: 12 } },
+                     },
+                     elements: {
+                       line: { tension: 0.4 },
+                       point: { radius: 3, backgroundColor: 'white' }
+                     },
+                     title: { display: true, text: 'Unique Visitors (Last 30 Days)', color: 'white', fontSize: 16 },
+                     responsive: true
+                   },
+                   height: "300px" %>
   </div>
+</div>
 
   <!-- Browser Usage -->
   <div class="grid grid-cols-1 gap-6">