A key part of a business application in my opinion is providing the users with a quick, easily understandable overview of what is happening in that application. In my case, I want to provide some statistics about the data and some gentle nudges about what requires user attention.

This is what I am aiming for:

Fortunately, some existing graphing gems will make this a relatively straightforward job. The gem I have chosen is called "chartkick" as it has helper methods for producing all the charts I need to display.

To install it I can add the gem to the Gemfile:

Gemfile

gem 'chartkick'

Since I am using esbuild I need to install the JavaScript package using the following command:

yarn add chartkick chart.js

And finally, import the library:

app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import "../components"
import "chartkick/chart.js"

Now I can start adding charts to the dashboard. chartkick allows individual charts to be loaded asynchronously so the user is not waiting for everything to be generated before they see the page appear, so I'll take advantage of that.

As an example, I'll show the process for the "Used" vs "Not Used" pie chart. Retrieving the count of "used" products is not a straightforward query so it makes sense to build that as a Query Object:

app/models/queries/product_usage_counts.rb

module Queries
  class ProductUsageCounts < Base
    module Scopes
      def having_product_id(product_id: nil)
        return all if product_id.nil?

        where(id: product_id)
      end

      def having_non_zero_count(coalesced_attributes:, only_non_zero: false)
        return all unless only_non_zero

        where("(#{coalesced_attributes.join(' + ')}) > 0")
      end
    end

    def initialize(scope:)
      super
      @scope = scope || Product.all
    end

    def call(options: {})
      @scope
        .extend(Scopes)
        .select("#{coalesced_attributes(attributes: options[:attributes]).join(' + ')} AS usage_count")
        .having_product_id(product_id: options[:product_id])
        .having_non_zero_count(
          coalesced_attributes: coalesced_attributes(attributes: options[:attributes]),
          only_non_zero: options[:only_non_zero]
        )
    end

    private

    def coalesced_attributes(attributes:)
      attributes.map do |a|
        "COALESCE(#{a}, 0)"
      end
    end

    def usage_attributes
      []
    end
  end
end

This query object has various options that can be provided depending on how I want to calculate the count and whether I want to know the count for one product or all products (as is the case for this chart).

Here's how I'm calling it:

app/models/dashboard.rb

class Dashboard  
  def number_of_products_used
    @number_of_products_used ||=
      Queries::ProductUsageCounts
      .call(options:
          {
            attributes: Product.catalogue_usage_attributes |
              Product.transaction_usage_attributes |
              Product.settings_usage_attributes,
            only_non_zero: true
          }
           )
      .size
  end
end

I've created a new class called Dashboard that will hold all the methods I'll need for the data on the dashboard.

In the dashboard controller, I'll create an instance of this Dashboard and expose it to the index view using a helper method:

app/controllers/dashboard_controller.rb

class DashboardController < ApplicationController
  include Authenticated

  helper_method :dashboard

  def percentage_products_used_vs_not_used
    render(json:
      {
        t('.labels.used') => dashboard.percentage_products_used,
        t('.labels.not_used') => dashboard.percentage_products_not_used
      }
          )
  end
end

Because I want this chart to be asynchronous I'm using this via its own endpoint. The routing table needs to know about this as well:

config/routes.rb

Rails.application.routes.draw do
  # Dashboard
  get '/dashboard' => 'dashboard#index'
  get '/dashboard/percentage_products_used_vs_not_used' => 'dashboard#percentage_products_used_vs_not_used'
end

Lastly, the view can render the chart using the pie_chart helper:

app/views/dashboard/index.html.erb

<div id="dashboard" class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 bg-gray-50">
  <div id="dashboard_products_used_vs_not_used" class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
    <%= pie_chart(dashboard_percentage_products_used_vs_not_used_path, id: 'dashboard_products_used_vs_not_used--chart', colors: %w[#10b981 #ef4444]) %>
    <p id="dashboard_products_used_vs_not_used--label" class="font-medium text-gray-500">
      <%= t('.labels.percentage_products_used_vs_not_used.title') %>
    </p>
  </div>
</div>

And that's it! The rest of the charts and graphs will follow a separate pattern. The information boxes that show a number and a percentage are using TailwindUI components backed by the Dashboard class as well.

Useful links:

https://github.com/ankane/chartkick