add os browser device_type page

app/assets/stylesheets/browsers.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the browsers controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/assets/stylesheets/device_types.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the device_types controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/assets/stylesheets/oses.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the oses controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/controllers/browsers_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class BrowsersController < ApplicationController
+  layout "detail"
+
+  def index
+    @site = current_user.sites.find_by!(uuid: params[:site_id])
+
+    base = QueryBuilder.call(Hyper::Event, @site, params).result
+    current_scope = QueryBuilder.call(Hyper::Event, @site, period: "realtime").result
+    @current_visitors_count = current_scope.distinct.count(:client_id)
+    @top_browsers = base
+      .where(event_name: "page_view")
+      .select("browser, count(distinct client_id) as visitors_count, count(*) as count, count(distinct session_id) as sessions_count")
+      .group("site_id, browser").order("2 desc").limit(100)
+  end
+end

app/controllers/device_types_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class DeviceTypesController < ApplicationController
+  layout "detail"
+
+  def index
+    @site = current_user.sites.find_by!(uuid: params[:site_id])
+
+    base = QueryBuilder.call(Hyper::Event, @site, params).result
+    current_scope = QueryBuilder.call(Hyper::Event, @site, period: "realtime").result
+    @current_visitors_count = current_scope.distinct.count(:client_id)
+    @top_device_types = base
+      .where(event_name: "page_view")
+      .select("device_type, count(distinct client_id) as visitors_count, count(*) as count, count(distinct session_id) as sessions_count")
+      .group("site_id, device_type").order("2 desc").limit(100)
+  end
+end

app/controllers/oses_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class OsesController < ApplicationController
+  layout "detail"
+
+  def index
+    @site = current_user.sites.find_by!(uuid: params[:site_id])
+
+    base = QueryBuilder.call(Hyper::Event, @site, params).result
+    current_scope = QueryBuilder.call(Hyper::Event, @site, period: "realtime").result
+    @current_visitors_count = current_scope.distinct.count(:client_id)
+    @top_oses = base
+      .where(event_name: "page_view")
+      .select("os, count(distinct client_id) as visitors_count, count(*) as count, count(distinct session_id) as sessions_count")
+      .group("site_id, os").order("2 desc").limit(100)
+  end
+end

app/helpers/browsers_helper.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module BrowsersHelper
+end

app/helpers/device_types_helper.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module DeviceTypesHelper
+end

app/helpers/oses_helper.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module OsesHelper
+end

app/views/browsers/index.html.erb

@@ -0,0 +1,28 @@
+<div class="dark:bg-gray-800">
+  <h1 class="text-xl font-bold dark:text-gray-100">Top Browsers</h1>
+  <div class="my-4 border-b border-gray-300">
+
+  </div>
+  <main class="modal__content">
+    <table class="w-full table-striped table-fixed">
+      <thead>
+        <tr>
+          <th class="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Browser</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Pageviews</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Sessions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @top_browsers.each do |agg| %>
+          <tr class="text-sm dark:text-gray-200">
+            <td class="p-2"><%= agg.browser %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.visitors_count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.sessions_count %></td>
+          </tr>
+        <% end  %>
+      </tbody>
+    </table>
+  </main>
+</div>

app/views/device_types/index.html.erb

@@ -0,0 +1,28 @@
+<div class="dark:bg-gray-800">
+  <h1 class="text-xl font-bold dark:text-gray-100">Top Device Types</h1>
+  <div class="my-4 border-b border-gray-300">
+
+  </div>
+  <main class="modal__content">
+    <table class="w-full table-striped table-fixed">
+      <thead>
+        <tr>
+          <th class="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Device Type</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Pageviews</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Sessions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @top_device_types.each do |agg| %>
+          <tr class="text-sm dark:text-gray-200">
+            <td class="p-2"><%= agg.device_type %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.visitors_count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.sessions_count %></td>
+          </tr>
+        <% end  %>
+      </tbody>
+    </table>
+  </main>
+</div>

app/views/oses/index.html.erb

@@ -0,0 +1,28 @@
+<div class="dark:bg-gray-800">
+  <h1 class="text-xl font-bold dark:text-gray-100">Top Operating Systems</h1>
+  <div class="my-4 border-b border-gray-300">
+
+  </div>
+  <main class="modal__content">
+    <table class="w-full table-striped table-fixed">
+      <thead>
+        <tr>
+          <th class="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">OS</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Pageviews</th>
+          <th class="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Sessions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @top_oses.each do |agg| %>
+          <tr class="text-sm dark:text-gray-200">
+            <td class="p-2"><%= agg.os %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.visitors_count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.count %></td>
+            <td class="p-2 w-32 font-medium" align="right"><%= pretty_num agg.sessions_count %></td>
+          </tr>
+        <% end  %>
+      </tbody>
+    </table>
+  </main>
+</div>

app/views/shared/devices/_browser.html.erb

@@ -20,7 +20,7 @@
     </div>
 
     <div class="text-center w-full absolute bottom-0 left-0 pb-3">
-      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="/hackershare.dev/pages"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
+      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="<%= site_browsers_path(@site, request.query_parameters) %>"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
       </a>
     </div>
   </div>

app/views/shared/devices/_device_type.html.erb

@@ -20,7 +20,7 @@
     </div>
 
     <div class="text-center w-full absolute bottom-0 left-0 pb-3">
-      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="/hackershare.dev/pages"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
+      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="<%= site_device_types_path(@site, request.query_parameters) %>"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
       </a>
     </div>
   </div>

app/views/shared/devices/_os.html.erb

@@ -20,7 +20,7 @@
     </div>
 
     <div class="text-center w-full absolute bottom-0 left-0 pb-3">
-      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="/hackershare.dev/pages"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
+      <a class="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide" href="<%= site_oses_path(@site, request.query_parameters) %>"><svg class="feather mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top: -2px;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>MORE
       </a>
     </div>
   </div>

config/routes.rb

@@ -17,6 +17,9 @@
     resources :traffic_mediums, only: [:index]
     resources :traffic_sources, only: [:index]
     resources :traffic_campaigns, only: [:index]
+    resources :browsers, only: [:index]
+    resources :device_types, only: [:index]
+    resources :oses, only: [:index]
     member do
       get "snippet"
       get "debug"

test/controllers/browsers_controller_test.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class BrowsersControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end

test/controllers/device_types_controller_test.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class DeviceTypesControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end

test/controllers/oses_controller_test.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class OsesControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end