matey 0.1.1 → 0.1.4

data/README.md

@@ -4,25 +4,24 @@
 ![GitHub issues](https://img.shields.io/github/issues-raw/harled/matey) 
 ![GitHub Repo stars](https://img.shields.io/github/stars/harled/matey?logoColor=purple&style=social)
 
-📈 User Engagement Tracking Components for [Ahoy](https://github.com/ankane/ahoy) 🏴‍☠️
+📈 User Engagement Tracking ViewComponents for [Ahoy](https://github.com/ankane/ahoy) data 🏴‍☠️
 
-A suite of user engagment ViewComponents for plug and play use right from your Ahoy data! 
-No need to spend time finding what information you need and how to write the queries to set that up.
-Simply install the gem, input the required data and track how your users are responding to your application!
+This gem provides a suite of prebuilt [ViewComponents](https://github.com/github/view_component) to observe user engagement in an Ahoy-powered Ruby on Rails application.
 
-Project Lead: Caitlin Henry  
-[**caitmich**](https://github.com/caitmich) | (*caitlin@harled.ca*)
-
-This gem assumes that event data is coming from [Ahoy](https://github.com/ankane/ahoy) which is a fantastic library
-for tracking visits and events. Your project must have Ahoy installed and configured in order to benefit from Matey.
-
-This gem assumes that you have [Bootstrap 5.1](https://getbootstrap.com/docs/5.1/getting-started/introduction/) loaded in your project. It will work without Bootstrap, however, you will need to provide your own custom styling for the Bootstrap equivalent classes.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+`matey` depends on:
+* [Ahoy](https://github.com/ankane/ahoy) installed, configured and  tracking user visit and event data
+* [Bootstrap 5.1](https://getbootstrap.com/docs/5.1/getting-started/introduction/) available for styling
+
+Add this line to the Gemfile:
 
 ```ruby
+# latest from rubygems
+gem 'matey'
+
+# or latest from github
 gem 'matey', github: 'harled/matey', branch: 'main'
 ```
 
@@ -30,126 +29,80 @@ And then execute:
 
     $ bundle install
 
-You will now have the latest version of Matey on your project. Checkout the Usage section to see what components there are and how to use them in your app!
-
 ## Usage
 
-Look here to see what components Matey offers and how to use them 🛠️
+Once `matey` is installed, the next step is to render a component. The data required varies by component. 
+Below is an example of how the `Matey::ActiveUsersComponent` would be 
+called in an application. This component reports on the number of active users within the past two weeks.
 
-### Common Flows
+Below the component is called with two named parameters which include `events` (ahoy event data) and 
+the `time_window`, which is the period to report on.
 
-Some common flows to recognize how the named paramaters work for the components. This is what a Matey view component render line would look like in your view file:
-
-```
-<%= render Matey::ComponentName.new(events: Ahoy::Event.all, time_window: 1.week) %>
+```ruby
+# dashboard.html.erb
+<%= render Matey::ActiveUsersComponent.new(events: Ahoy::Event.all, time_window: 1.week) %>
 ```
 
-Here we can see that all components begin with **`Matey::`** followed by the name of the component. The **`data`** parameter will take in Ahoy data as an ***ActiveRecordRelation*** collection. 
-
-The **`time_window`** takes in an amount of time that the component will look calculate the data for and uses this to set the specific date range that the data will be taken from. This is an optional parameter and the default will be a 1 week time window.
-
-In this example, the component will take the **`Ahoy::Events`** data and show information about the week of data.
-
-**Note**: The data the component is completely limited by the extent of your [Ahoy](https://github.com/ankane/ahoy) data. Setting up events on each controller action can be seen [here](https://github.com/ankane/ahoy#ruby) and can be done in the base controller so that all other controllers inherit from here and will create Ahoy events.
-
-Also, if you have a lot of data, you can cut down the data that you are passing through by reducing the time the events have occurred, however the comparison between the current and previous `time_window` will require two time windows worth of data (ie. for data from last week, this will compare to data from 2 weeks ago)
-
-### New Users Component
-
-![New Users Component](./images/newUsersComponent.png)
-
-The New Users component will calculate the number of new users that have been created in the given time window and show you the amount and percentage change from the previous time period. The code should look like this:
-
-```
-<%= render Matey::NewUsersComponent.new(users: User.all, time_window: 2.month) %>
-```
+It is that simple! There should now be a card displaying the number of active users within the past week.
 
-Here we are passing in all of our **User** model data for the component to find the new users that were made in the last 2 months, but we can filter this data to only include a specific subset of users or from a specific time period. The component will find the new users created in the past month and show us the increase/decrease since the last period.
-### Active Users
+View the available component color schemes [here](COLOR_SCHEMES.md).
 
-![Active Users Component](./images/activeUsersComponent.png)
+View the list of available components [here](COMPONENTS.md).
 
-The Active Users component will calculate the number of active users that have been created in the given time window and show you the amount and percentage change from the previous time period. This component counts active users as those who have been involved in an Ahoy event in the given time window. The code should look like this:
+**Note**: The more data, the more interesting the components will be. A common and helpful pattern is to capture events on all controller actions. Details on doing this can be found [here](https://github.com/ankane/ahoy#ruby).
 
-```
-<%= render Matey::ActiveUsersComponent.new(events: Ahoy::Event.all, time_window: 1.month) %>
-```
+## Development
 
-Here we are passing in all of our **Ahoy::Event** model data for the component to find the user that were triggered some Ahoy Event, but we can filter this data to only include a specific subset of Ahoy Events or from a specific time period. The component will find the active users created in the past month and show us the increase/decrease since the last period.
+After checking out the repository, run the following commands to get started:
 
-### New Activity Component
+```bash
+# install required packages
+bin/setup
 
-![New Activity Component](./images/newActivityComponent.png)
+# install spec/sample packages
+bundle install --gemfile spec/sample/Gemfile
 
-The New Activity component will calculate the number of Ahoy events that have been created in the given time window and show you the amount and percentage change from the previous time period. The implementation should look like:
+# run test cases and ensure everything is passing
+rake spec
 
-```
-<%= render Matey::NewActivityComponent.new(events: Ahoy::Event.all, time_window: 1.month) %>
+# an interactive prompt that will allow you to experiment with matey (currently broken!)
+bin/console
 ```
 
-Here we are passing in all of our **Ahoy::Event** model data for the component to count all Ahoy Event, but we can filter this data to only include a specific subset of Ahoy Events or from a specific time period. The component will find the Ahoy events created in the past month and show us the increase/decrease since the last period.
-### Top Visited Landing Pages Component
+To install `matey` and make it available as a regular rubygem, run the following command: `bundle exec rake install`
 
-![Top Visited Landing Pages Component](./images/topVisitedPages.png)
+### Sample Application
 
-The Top Visited Pages Table Component component will take advantage of **`Ahoy::Visit`** and gives you a list of the top visited paths. Just pass in the Ahoy::Visit.all and the component will calculate the top landing pages based on the visits that have been created in the given time window. The *`limit`* parameter limits the number of results and is 10 by default. The implementation should look like:
+ViewComponents are pretty hard to test without a Ruby on Rails application. This repository includes a sample application that makes it easy to see how a component renders and make quick adjustments.
 
-```
-<%= render(Matey::TopVisitedPagesTableComponent.new(events: Ahoy::Visit.all, time_window: 1.month, limit: 10)) %>
-```
-
-### Top Events Component
+To use the sample application: 
 
-![Top Events Component](./images/topEventsComponent.png)
+1. `cd spec/sample`
+2. `bundle`
+3. `bundle exec rails s`
+4. Open a browser to `localhost:3000`
 
-The Top Events Component component will give you a list of the top Ahoy::Event's that are triggered by your users. Just pass in the Ahoy::Event.all and the component will calculate the top events that have been triggered in the given time window. The *`limit`* parameter limits the number of results and is 10 by default. The implementation should look like:
-
-```
-<%= render(Matey::TopEventsComponent.new(events: Ahoy::Event.all, time_window: 1.month, limit: 10)) %>
-```
-
-### Custom Card Component
-*Coming Soon...*
-### Custom Table Component
-*Coming Soon...*
-## Development
+## Testing
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+To run the test cases:
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+1. `rails db:test:prepare`
+2. `bundle exec rake`
 
-A sample application is included in this repository to help with exploring the components and testing. To use the 
-sample application: 
+## Releasing a New Version
 
-1. cd spec/sample
-2. bundle
-3. rails s
-4. Open a browser to localhost:3000
+To release a new version:
 
-## Testing
+1. Update the version number in `version.rb`
+2. Run `bundle exec rake release`
 
-Use the folloiwng steps to run the test cases:
+The rake task will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-1. rails db:test:prepare
-2. bundle exec rake
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/harled/matey. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/harled/matey/blob/master/CODE_OF_CONDUCT.md).
-
-### Contribution Steps:
-
-Want to help us out? Here are some steps to make sure you are contributing 
-
-1. Find an issue you like, or create a new issue [here](https://github.com/harled/matey/issues) 
-    - Please ask for any questions or clarifications in the associated issues or in new issues! 🤔
-2. Assign yourself to the issue and create a branch , following GitHub Issue's naming scheme. 🛠️
-    - The naming scheme should follow (#issueNumber-issue-name) ie. (#10-create-new-component)
-3. Get on your local machine and [ensure you have the repo cloned](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository). Checkout the branch you just made with `git checkout branch-name` and pull the latest merged changes from the repo with `git pull origin main` to make sure you have the most up-to-date code from the repo. 👩‍💻
-4. Add your amazing changes along with any documentation you feel would be useful. Then commit and push your changes. 🌟
-5. Go back to the repo on GitHub and create a pull request! Then wait for an admin of the repo to get back to your pull request, address any comments and once you are finally approved, merge your code into Matey! 🎉
+Please take a look at our [Contribution Guidelines](https://github.com/harled/matey/blob/main/docs/CONTRIBUTING.md).
 
-If you want some more tips on contributing to GitHub projects, [check out this resource from Data School](https://www.dataschool.io/how-to-contribute-on-github/).
 
 ## License
 
@@ -157,4 +110,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Code of Conduct
 
-Everyone interacting in the Matey project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/harled/matey/blob/master/CODE_OF_CONDUCT.md).
+Everyone interacting in the *Matey* project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/harled/matey/blob/master/CODE_OF_CONDUCT.md).

data/app/components/matey/active_users_component.html.erb

@@ -1,4 +1,4 @@
-<div class="card bg-primary text-light">
+<div class="card <%= @color_scheme %>">
   <div class="card-body">
     <div class="row">
       <div class="col">
@@ -6,7 +6,7 @@
       </div>
       <div class="col-auto">
         <p class="card-text text-end mb-0">
-          <%= (@change_active_number > 0 ? "+" : "") + @change_active_number.to_s + " / " + @change_active_percent.to_s + "%" %>
+          <%= (@change_active_number > 0 ? "+" : "") + @change_active_number.to_s + " / " + @change_active_percent.to_s + "%" %> compared to last period.
         </p>
       </div><!-- .col -->
     </div><!-- .row -->

data/app/components/matey/active_users_component.rb

@@ -1,7 +1,7 @@
 require "ahoy_matey"
 
-class Matey::ActiveUsersComponent < ApplicationComponent
-  def initialize(events:, time_window: 1.week)
+class Matey::ActiveUsersComponent < Matey::ApplicationComponent
+  def initialize(events:, time_window: 1.week, color_scheme: "neutral")
     raise ArgumentError unless events.is_a?(ActiveRecord::Relation)
     raise ArgumentError unless time_window.is_a?(Integer)
 
@@ -9,8 +9,10 @@ class Matey::ActiveUsersComponent < ApplicationComponent
     previous_period = events.where(time: (2 * time_window).ago..time_window.ago).pluck(:user_id).uniq.count
 
     @change_active_number = @current_period - previous_period
-    @change_active_percent = ((@change_active_number.to_f / (previous_period == 0 ? 1 : previous_period)) * 100).truncate(2)
+    @change_active_percent = ((@change_active_number.to_f / ((previous_period == 0) ? 1 : previous_period)) * 100).truncate(2)
 
     @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
   end
 end

data/app/components/{application_component.rb → matey/application_component.rb}

@@ -1,8 +1,10 @@
 require "view_component"
 require "ahoy_matey"
+require_relative "../../../lib/helpers"
 
-class ApplicationComponent < ViewComponent::Base
+class Matey::ApplicationComponent < ViewComponent::Base
   include ActiveModel::Validations
+  include ColorSchemeHelper
 
   def before_render
     validate!

data/app/components/matey/bounce_rate_component.html.erb

@@ -0,0 +1,35 @@
+<div class="card <%= @color_scheme %>">
+  <div class="card-body">
+    <h5 class = "text-center"><strong>The Bounce Rate of your Application is: <u><%= @percentage_of_visits_that_were_bounced %>%</u></strong></h5>
+    <div>
+      <table class="table table-hover table-borderless table-sm">
+        <tr class="table-dark">
+          <td><strong>Total Number of Bounced Visits:</strong></td>
+          <td class="text-end"><%= @total_number_of_single_event_visits %></td>
+        </tr>
+        <tr class="table-dark">
+          <td><strong>Total Number of Visits:</strong></td>
+          <td class="text-end"><%= @total_number_of_user_visits %></td>
+        </tr>
+      </table>
+    </div>
+    <div>
+      <table class="table table-hover table-borderless table-sm">
+        <thead class="table-dark">
+          <tr>
+            <th>Bounced Page</th>
+            <th class="text-end">Bounce Count</th>
+          </tr>
+        </thead>
+        <tbody class="text-dark border-dark">
+          <% @most_bounced_pages.each do |controller_name_and_action, count| %>
+            <tr>
+              <td><%= controller_name_and_action %></td>
+              <td class="text-end"><%= count %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/components/matey/bounce_rate_component.rb

@@ -0,0 +1,24 @@
+require "ahoy_matey"
+
+class Matey::BounceRateComponent < Matey::ApplicationComponent
+  def initialize(events:, visits:, limit: 5, color_scheme: "neutral")
+    # Determine the total number of user sessions to the website
+    @total_number_of_user_visits = events.pluck(:visit_id).uniq.count
+
+    # First we group by visit_id and scope to visits containing ONLY 1 event
+    @visits_having_only_one_event = events.group(:visit_id).having("count(ahoy_events.id) == 1")
+    # We then count each unique occurence of a visit with 1 event
+    @total_number_of_single_event_visits = @visits_having_only_one_event.uniq.count
+
+    # Determine pages in which the most bounces occur
+    @single_event_visits_landing_page_count = visits.where(id: @visits_having_only_one_event.pluck(:visit_id)).pluck(:landing_page).tally
+
+    # Scope the results to the given limit and sort them in descending order
+    @most_bounced_pages = @single_event_visits_landing_page_count.sort_by { |controller_name_and_action, count| count }.last(limit).reverse
+
+    # Get the percentage as #-One-Page-Visits / Total-#-Of-Visits
+    @percentage_of_visits_that_were_bounced = ((@total_number_of_single_event_visits.to_f / ((@total_number_of_user_visits == 0) ? 1 : @total_number_of_user_visits)) * 100).round(1)
+
+    @color_scheme = color_scheme(scheme: color_scheme)
+  end
+end

data/app/components/matey/browser_os_breakdown_component.html.erb

@@ -0,0 +1,38 @@
+<div class="card <%= @color_scheme %>">
+  <div class="card-body">
+    <div class="row">
+      <h5 class="text-center">Browser and OS Breakdown</h5>
+      <div class="col">
+        <p class="text-center">Since <%= time_ago_in_words(@time_window.ago).titleize %> Ago</p>
+        <table class='table table-hover table-borderless'>
+          <thead class='table-dark'>
+            <th>Browser</th>
+            <th class='text-center'>Visitor Count</th>
+          </thead>
+          <tbody class='text-dark border-dark'>
+            <% @browsers.each do |browser_name, visitor_count| %>
+              <tr>
+                <td><%= browser_name %></td>
+                <td class='text-center'><%= visitor_count %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+        <table class='table table-hover table-borderless'>
+          <thead class='table-dark'>
+            <th>OS</th>
+            <th class='text-center'>Visitor Count</th>
+          </thead>
+          <tbody class='text-dark border-dark'>
+            <% @operating_systems.each do |operating_system, visitor_count| %>
+              <tr>
+                <td><%= operating_system %></td>
+                <td class='text-center'><%= visitor_count %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/matey/browser_os_breakdown_component.rb

@@ -0,0 +1,11 @@
+class Matey::BrowserOsBreakdownComponent < Matey::ApplicationComponent
+  def initialize(visits:, time_window:, color_scheme: "neutral")
+    visits_in_time_window = visits.where(started_at: time_window.ago..)
+    @visits_in_time_window = visits_in_time_window.count
+    @browsers = visits_in_time_window.group(:browser).count
+    @operating_systems = visits_in_time_window.group(:os).count
+    @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
+  end
+end

data/app/components/matey/daily_active_users_component.html.erb

@@ -0,0 +1,15 @@
+<div class="card <%= @color_scheme %>">
+  <div class="card-body">
+    <div class="col">
+      <div class="col">
+        <h5>Daily Active Users</h5>
+      </div>
+      <div class="col-auto">
+        <p>Since <%= time_ago_in_words(@time_window.ago).titleize %> Ago</p>
+        <p><%= @distinct_user_visits_by_day %></p>
+        <p><%# @distinct_user_visits_by_day2 %></p>
+        <%# @visits.each {|e| e} %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/matey/daily_active_users_component.rb

@@ -0,0 +1,11 @@
+class Matey::DailyActiveUsersComponent < Matey::ApplicationComponent
+  def initialize(visits:, time_window:, color_scheme: "neutral")
+    @visits = visits
+    @time_window = time_window
+    visits_in_time_window = visits.where(started_at: time_window.ago..)
+    @distinct_user_visits_by_day = visits_in_time_window.order(:day).group(:day).uniq.count
+    # @distinct_user_visits_by_day2 = visits_in_time_window.order(:day).group("DATE(started_at)").map { |k, v| [k, v] }.sort
+
+    @color_scheme = color_scheme(scheme: color_scheme)
+  end
+end

data/app/components/matey/new_activity_component.html.erb

@@ -1,4 +1,4 @@
-<div class="card bg-primary text-light">
+<div class="card <%= @color_scheme %>">
   <div class="card-body">
     <div class="row">
       <div class="col">
@@ -6,7 +6,7 @@
       </div>
       <div class="col-auto">
         <p class="card-text text-end mb-0">
-          <%= (@change_active_number > 0 ? "+" : "") + @change_active_number.to_s + " / " + @change_active_percent.to_s + "%" %>
+          <%= (@change_active_number > 0 ? "+" : "") + @change_active_number.to_s + " / " + @change_active_percent.to_s + "%" %> compared to last period.
         </p>
       </div><!-- .col -->
     </div><!-- .row -->

data/app/components/matey/new_activity_component.rb

@@ -1,5 +1,5 @@
-class Matey::NewActivityComponent < ApplicationComponent
-  def initialize(events:, time_window: 1.week)
+class Matey::NewActivityComponent < Matey::ApplicationComponent
+  def initialize(events:, time_window: 1.week, color_scheme: "neutral")
     raise ArgumentError unless events.is_a?(ActiveRecord::Relation)
     raise ArgumentError unless time_window.is_a?(Integer)
 
@@ -7,8 +7,10 @@ class Matey::NewActivityComponent < ApplicationComponent
     previous_period = events.where(time: (2 * time_window).ago..time_window.ago).pluck(:user_id).count
 
     @change_active_number = @current_period - previous_period
-    @change_active_percent = ((@change_active_number.to_f / (previous_period == 0 ? 1 : previous_period)) * 100).truncate(2)
+    @change_active_percent = ((@change_active_number.to_f / ((previous_period == 0) ? 1 : previous_period)) * 100).truncate(2)
 
     @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
   end
 end

data/app/components/matey/new_users_component.html.erb

@@ -1,4 +1,4 @@
-<div class="card bg-primary text-light">
+<div class="card <%= @color_scheme %>">
   <div class="card-body">
     <div class="row">
       <div class="col">
@@ -6,7 +6,7 @@
       </div>
       <div class="col-auto">
         <p class="card-text text-end mb-0">
-          <%= (@change_new_number > 0 ? "+" : "") + @change_new_number.to_s + " / " + @change_new_percent.to_s + "%" %>
+          <%= (@change_new_number > 0 ? "+" : "") + @change_new_number.to_s + " / " + @change_new_percent.to_s + "%" %> compared to last period.
         </p>
       </div><!-- .col -->
     </div><!-- .row -->

data/app/components/matey/new_users_component.rb

@@ -1,11 +1,13 @@
-class Matey::NewUsersComponent < ApplicationComponent
-  def initialize(users:, time_window: 1.week)
+class Matey::NewUsersComponent < Matey::ApplicationComponent
+  def initialize(users:, time_window: 1.week, color_scheme: "neutral")
     @current_period = users.where(created_at: time_window.ago..Time.current).count
     previous_period = users.where(created_at: (2 * time_window).ago..time_window.ago).count
 
     @change_new_number = @current_period - previous_period
-    @change_new_percent = ((@change_new_number.to_f / (previous_period == 0 ? 1 : previous_period)) * 100).truncate(2)
+    @change_new_percent = ((@change_new_number.to_f / ((previous_period == 0) ? 1 : previous_period)) * 100).truncate(2)
 
     @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
   end
 end

data/app/components/matey/top_events_component.html.erb

@@ -1,6 +1,6 @@
 
 
-<div class="card bg-primary text-light">
+<div class="card <%= @color_scheme %>">
   <div class="card-body">
     <h5>Top Events Since <%= time_ago_in_words(@time_window.ago).titleize %> Ago (<%= @time_window.ago.strftime("%m/%d/%Y") %>)</h5>
     <div>
@@ -11,7 +11,7 @@
             <th>Count</th>
           </tr>
         </thead>
-        <tbody class="text-light">
+        <tbody class="text-dark border-dark">
           <% @events.each do |action, count| %>
             <tr>
               <td><%= action %></td>

data/app/components/matey/top_events_component.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
-class Matey::TopEventsComponent < ApplicationComponent
-  def initialize(events:, time_window: 1.week, limit: 5)
+class Matey::TopEventsComponent < Matey::ApplicationComponent
+  def initialize(events:, time_window: 1.week, limit: 5, color_scheme: "neutral")
     raise ArgumentError unless events.is_a?(ActiveRecord::Relation)
     raise ArgumentError unless time_window.is_a?(Integer)
 
     @events = events.where(time: time_window.ago..Time.current).limit(limit).order("count(name) DESC").group(:name).count
     @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
   end
 end

data/app/components/matey/top_visited_pages_table_component.html.erb

@@ -1,4 +1,4 @@
-<div class="card bg-primary text-light">
+<div class="card <%= @color_scheme %>">
   <div class="card-body">
     <h5>Top Landing Page Visits Since <%= time_ago_in_words(@time_window.ago).titleize %> Ago (<%= @time_window.ago.strftime("%m/%d/%Y") %>)</h5>
     <div>
@@ -9,7 +9,7 @@
             <th>Count</th>
           </tr>
         </thead>
-        <tbody class="text-light">
+        <tbody class="text-dark border-dark">
           <% @user_count_by_event.each do |controller_name_and_action, count| %>
             <tr>
               <td><%= controller_name_and_action %></td>

data/app/components/matey/top_visited_pages_table_component.rb

@@ -1,5 +1,5 @@
-class Matey::TopVisitedPagesTableComponent < ApplicationComponent
-  def initialize(events:, time_window: 1.week, limit: 10)
+class Matey::TopVisitedPagesTableComponent < Matey::ApplicationComponent
+  def initialize(events:, time_window: 1.week, limit: 10, color_scheme: "neutral")
     # Group events by controller (:name) and action. Aggregate number of unique user actions
     @user_count_by_event = events.where(started_at: time_window.ago..).pluck(:landing_page).tally
 
@@ -7,5 +7,7 @@ class Matey::TopVisitedPagesTableComponent < ApplicationComponent
     @user_count_by_event = @user_count_by_event.sort_by { |controller_name_and_action, count| count }.last(limit).reverse
 
     @time_window = time_window
+
+    @color_scheme = color_scheme(scheme: color_scheme)
   end
 end

data/app/components/matey/user_engagement_component.html.erb

@@ -0,0 +1,27 @@
+<div class="card <%= @color_scheme %>">
+  <div class="card-body">
+    <h5>User Activity for <i>user id: <%=@user_id%></i> since <i><%= time_ago_in_words(@time_window.ago).titleize %></i> ago </h5>
+    <div>
+      <table class="table table-hover table-borderless table-sm">
+        <thead class="table-dark">
+          <tr>
+            <th class="text-start">Event</th>
+            <th class="text-end">Count</th>
+          </tr>
+        </thead>
+        <tbody class="text-dark border-dark">
+          <% @count_by_event.each do |event, count| %>
+            <tr>
+              <td><%= event %></td>
+              <td class="text-end"><%= count %></td>
+            </tr>
+          <% end %>
+          <tr class="table-dark">
+            <td><strong>Total:</strong></td>
+            <td class="text-end"><%=  @count_by_event.sum {|event, count| count} %></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div><!-- .card-body -->
+</div><!-- .card -->

data/app/components/matey/user_engagement_component.rb

@@ -0,0 +1,12 @@
+require "ahoy_matey"
+
+class Matey::UserEngagementComponent < Matey::ApplicationComponent
+  def initialize(events:, user_id:, time_window: 1.week, limit: 10, color_scheme: "neutral")
+    @events_for_user = events.where_props(user_id: user_id).where(time: time_window.ago..Time.current).group(:name).count
+    @count_by_event = @events_for_user.sort_by { |event, count| count }.last(limit).reverse
+    @time_window = time_window
+    @user_id = user_id
+
+    @color_scheme = color_scheme(scheme: color_scheme)
+  end
+end

data/app/components/matey/visits_by_day_of_week_component.html.erb

@@ -0,0 +1,26 @@
+<div class="card <%= @color_scheme %>">
+    <div class="card-header">
+      <h5>Visits By Day of Week since <%= time_ago_in_words(@time_window.ago).titleize %> Ago (<%= @time_window.ago.strftime("%m/%d/%Y") %>) </h5>
+      <% if @exclude_days %>
+        <p>Excluding <%= @exclude_days%>
+      <% end %>
+    </div>
+    <div class="card-body">
+      <table class="table table-hover table-borderless table-sm">
+        <thead class="table-dark">
+          <tr>
+            <th class="text-start">DayOfWeek</th>
+            <th class="text-end">Count</th>
+          </tr>
+        </thead>
+        <tbody class="text-dark border-dark">
+          <% @visits_by_day_of_week.each do |day_of_week, count| %>
+            <tr>
+              <td><%= day_of_week %></td>
+              <td class="text-end"><%= count %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div><!-- .card-body -->
+</div><!-- .card -->