analytic 0.3.0 → 0.5.0

data/app/packs/analytic/entrypoints/application.tailwind.css

@@ -3,8 +3,40 @@
 @tailwind utilities;
 
 @layer components {
+  .stat {
+    @apply flex gap-2 justify-between items-center;
+  }
+
+  .delta {
+    @apply font-normal flex gap-2 items-center;
+  }
+
+  .delta--neutral {
+    @apply text-slate-400;
+  }
+
+  .delta--positive {
+    @apply text-emerald-600;
+  }
+
+  .delta--negative {
+    @apply text-rose-600;
+  }
+
+  .pills {
+    @apply inline-flex gap-2 bg-slate-100 border-slate-200 rounded-full text-slate-600;
+  }
+
   .pill {
-    @apply bg-slate-200 text-slate-800 hover:text-white hover:bg-indigo-600 rounded-full px-3 py-2;
+    @apply flex items-center justify-center gap-2 rounded-full px-6 py-2;
+  }
+
+  .pill--default {
+    @apply bg-slate-100 font-medium hover:bg-slate-200 hover:text-slate-800;
+  }
+
+  .pill--active {
+    @apply bg-white shadow font-semibold text-slate-800;
   }
 
   .card {
@@ -20,7 +52,7 @@
   }
 
   .card__content {
-    @apply px-5 py-4
+    @apply px-5 py-4;
   }
 
   .card__title {
@@ -28,7 +60,11 @@
   }
 
   .card__value {
-    @apply uppercase text-slate-800 font-extrabold text-lg;
+    @apply text-slate-800 font-extrabold text-lg;
+  }
+
+  .cards {
+    @apply grid gap-4 grid-cols-1 md:grid-cols-3;
   }
 
   .table {

data/app/views/analytic/dashboard/show.html.erb

@@ -1,25 +1,28 @@
 <%- provide(:title, @dashboard.name) %>
 
 <div class="space-y-4">
-  <div class="flex gap-2">
-    <%= link_to 'Today', analytic.dashboard_path(period: 'today'), class: 'pill' %>
-    <%= link_to 'Yesterday', analytic.dashboard_path(period: 'yesterday'), class: 'pill' %>
-    <%= link_to 'Week', analytic.dashboard_path(period: 'week'), class: 'pill' %>
-    <%= link_to 'Month', analytic.dashboard_path(period: 'month'), class: 'pill' %>
-    <%= link_to 'Year', analytic.dashboard_path(period: 'year'), class: 'pill' %>
+  <div class="pills">
+    <%= link_to 'All', analytic.dashboard_path, class: "pill #{@dashboard.period.nil? ? 'pill--active' : 'pill--default'}" %>
+    <%= link_to '24 hours', analytic.dashboard_path(period: '24h'), class: "pill #{@dashboard.period.eql?('24h') ? 'pill--active' : 'pill--default'}" %>
+    <%= link_to '7 days', analytic.dashboard_path(period: '7d'), class: "pill #{@dashboard.period.eql?('7d') ? 'pill--active' : 'pill--default'}" %>
+    <%= link_to '4 weeks', analytic.dashboard_path(period: '4w'), class: "pill #{@dashboard.period.eql?('4w') ? 'pill--active' : 'pill--default'}" %>
+    <%= link_to '12 months', analytic.dashboard_path(period: '12m'), class: "pill #{@dashboard.period.eql?('12m') ? 'pill--active' : 'pill--default'}" %>
   </div>
 
-  <div class="grid grid-flow-col justify-stretch gap-4">
+  <div class="cards">
     <div class="card">
       <div class="card__header">
         <div class="card__title">
-          <%= tag.i class: "fa-solid fa-users" %>
+          <%= fa_icon_tag("fa-solid fa-users") %>
           Visitors
         </div>
       </div>
       <div class="card__content">
         <div class="card__value">
-          <%= number_with_delimiter @dashboard.distinct_visitors_count %>
+          <div class="stat">
+            <%= number_with_delimiter @dashboard.visitors.count %>
+            <%= delta_tag(@dashboard.visitors.delta) %>
+          </div>
         </div>
       </div>
     </div>
@@ -27,13 +30,16 @@
     <div class="card">
       <div class="card__header">
         <div class="card__title">
-          <%= tag.i class: "fa-solid fa-globe" %>
+          <%= fa_icon_tag("fa-solid fa-globe") %>
           Sessions
         </div>
       </div>
       <div class="card__content">
         <div class="card__value">
-          <%= number_with_delimiter @dashboard.distinct_sessions_count %>
+          <div class="stat">
+            <%= number_with_delimiter @dashboard.sessions.count %>
+            <%= delta_tag(@dashboard.sessions.delta) %>
+          </div>
         </div>
       </div>
     </div>
@@ -41,13 +47,16 @@
     <div class="card">
       <div class="card__header">
         <div class="card__title">
-          <%= tag.i class: "fa-solid fa-eye" %>
+          <%= fa_icon_tag("fa-solid fa-eye") %>
           Views
         </div>
       </div>
       <div class="card__content">
         <div class="card__value">
-          <%= number_with_delimiter @dashboard.count %>
+          <div class="stat">
+            <%= number_with_delimiter @dashboard.views.count %>
+            <%= delta_tag(@dashboard.views.delta) %>
+          </div>
         </div>
       </div>
     </div>
@@ -70,7 +79,7 @@
           </tr>
         </thead>
         <tbody>
-          <%- @dashboard.pages.each do |(host, path, views)| -%>
+          <%- @dashboard.current.pages.each do |(host, path, views)| -%>
             <tr>
               <td><%= host %></td>
               <td><%= path %></td>
@@ -81,4 +90,42 @@
       </table>
     </div>
   </div>
+
+  <div class="cards">
+    <div class="card">
+      <div class="card__header">
+        <div class="card__title">
+          <%= tag.i class: "fa-solid fa-file-code" %>
+          Visitors
+        </div>
+      </div>
+      <div class="card__content">
+        <%= react(component: "Chart") %>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card__header">
+        <div class="card__title">
+          <%= tag.i class: "fa-solid fa-globe" %>
+          Sessions
+        </div>
+      </div>
+      <div class="card__content">
+        <%= react(component: "Chart") %>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card__header">
+        <div class="card__title">
+          <%= tag.i class: "fa-solid fa-eye" %>
+          Views
+        </div>
+      </div>
+      <div class="card__content">
+        <%= react(component: "Chart") %>
+      </div>
+    </div>
+  </div>
 </div>

data/app/views/layouts/analytic/application.html.erb

@@ -6,7 +6,7 @@
   <%= csp_meta_tag %>
   <%= javascript_include_tag 'analytic/application' %>
   <%= stylesheet_link_tag 'analytic/application' %>
-  <%= %>
+  <%= favicon_link_tag 'analytic/icon.svg', type: 'image/svg+xml' %>
 </head>
 <body class="bg-slate-50">
 
@@ -32,11 +32,5 @@
   <main class="container mx-auto px-4 py-8">
     <%= yield %>
   </main>
-
-  <footer class="container mx-auto px-4 text-center">
-    <div class="flex gap-2 justify-center">
-      <%= time_tag(Time.current) %>
-    </div>
-  </footer>
 </body>
 </html>

data/db/migrate/{20240805210911_create_analytic_views.rb → 20240805210911_create_analytic_events.rb}

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
-class CreateAnalyticViews < ActiveRecord::Migration[7.1]
+class CreateAnalyticEvents < ActiveRecord::Migration[7.1]
   def change
-    create_table :analytic_views do |t|
+    create_table :analytic_events do |t|
       t.uuid :visitor_id, null: false
       t.uuid :session_id, null: false
       t.inet :ip, null: false

data/lib/analytic/config.rb

@@ -2,19 +2,51 @@
 
 module Analytic
   class Config
-    # @return [String]
-    attr_accessor :timezone
+    # @example
+    #  config.time_zone = ActiveSupport::TimeZone['Tokyo']
+    #
+    # @!attribute [rw] time_zone
+    #   @return [ActiveSupport::TimeZone]
+    attr_accessor :time_zone
 
-    # @return [Integer]
+    # @example
+    #  config.ip_v4_mask = 24
+    #
+    # @!attribute [rw] ip_v4_mask
+    #   @return [Integer]
     attr_accessor :ip_v4_mask
 
-    # @return [Integer]
+    # @example
+    #   config.ip_v6_mask = 48
+    #
+    # @!attribute [rw] ip_v6_mask
+    #   @return [Integer]
     attr_accessor :ip_v6_mask
 
+    # @example
+    #   config.connects_to = database: { writing: :primary, reading: :replica }
+    #
+    # @!attribute [rw] connects_to
+    #   @return [Hash, nil]
+    attr_accessor :connects_to
+
+    # @!attribute [rw] middleware
+    #   @return [Array<Rack::Middleware>]
+    attr_accessor :middleware
+
+    # @example
+    #  config.params = %i[utm_source utm_medium utm_campaign utm_content utm_term ref source]
+    #
+    # @!attribute [rw] params
+    #   @return [Array<Symbol>]
+    attr_accessor :params
+
     def initialize
-      @timezone = Time.zone
+      @time_zone = Time.zone
       @ip_v4_mask = 24 # e.g. 255.255.255.255 => '255.255.255.0/255.255.255.0'
       @ip_v6_mask = 48 # e.g. 'ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff' => 'ffff:ffff:ffff:0000:0000:0000:0000:0000'
+      @middleware = []
+      @params = %i[utm_source utm_medium utm_campaign utm_content utm_term ref source]
     end
 
     # @return [Boolean]
@@ -26,5 +58,15 @@ module Analytic
     def ip_v6_mask?
       @ip_v6_mask.present?
     end
+
+    # @return [Boolean]
+    def connects_to?
+      @connects_to.present?
+    end
+
+    # @param middleware [Rack::Middleware]
+    def use(*args, &block)
+      middleware << [args, block]
+    end
   end
 end

data/lib/analytic/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Analytic
-  VERSION = '0.3.0'
+  VERSION = '0.5.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: analytic
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Kevin Sylvestre
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-06 00:00:00.000000000 Z
+date: 2024-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -34,10 +34,8 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- app/assets/builds/analytic/application.css
-- app/assets/builds/analytic/application.js
-- app/assets/builds/analytic/application.js.map
 - app/assets/config/analytic_manifest.js
+- app/assets/images/analytic/icon.svg
 - app/controllers/analytic/application_controller.rb
 - app/controllers/analytic/dashboard_controller.rb
 - app/controllers/concerns/analytic/trackable.rb
@@ -47,7 +45,11 @@ files:
 - app/mailers/analytic/application_mailer.rb
 - app/models/analytic/application_record.rb
 - app/models/analytic/dashboard.rb
-- app/models/analytic/view.rb
+- app/models/analytic/event.rb
+- app/models/analytic/period.rb
+- app/models/analytic/stat.rb
+- app/packs/analytic/application/components/chart.tsx
+- app/packs/analytic/application/components/index.tsx
 - app/packs/analytic/application/index.ts
 - app/packs/analytic/application/initializers/fontawesome.ts
 - app/packs/analytic/application/initializers/index.ts
@@ -58,7 +60,7 @@ files:
 - bin/dev
 - bin/rails
 - config/routes.rb
-- db/migrate/20240805210911_create_analytic_views.rb
+- db/migrate/20240805210911_create_analytic_events.rb
 - lib/analytic.rb
 - lib/analytic/config.rb
 - lib/analytic/engine.rb
@@ -68,7 +70,7 @@ licenses:
 - MIT
 metadata:
   rubygems_mfa_required: 'true'
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -83,8 +85,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.11
-signing_key:
+rubygems_version: 3.5.18
+signing_key: 
 specification_version: 4
 summary: Analytic
 test_files: []