Circular progress bar ViewComponent

progress_circle_component.html.erb

<!-- Circle -->
<div>
  <!-- Building a Progress Ring: https://css-tricks.com/building-progress-ring-quickly/ -->
  <svg height="<%= @diameter %>" width="<%= @diameter %>">
    <circle
      class="text-gray-300"
      stroke-width="<%= @stroke_width %>"
      stroke="currentColor"
      fill="transparent"
      r="<%= normalized_radius %>"
      cx="<%= radius %>"
      cy="<%= radius %>"
    />
    <circle
      class="text-blue transform -rotate-180 origin-center"
      stroke-width="<%= @stroke_width %>"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="<%= normalized_radius %>"
      cx="<%= radius %>"
      cy="<%= radius %>"
      stroke-dasharray="<%= circumference %> <%= circumference %>"
      stroke-dashoffset="<%= dash_offset %>"
    />
  </svg>
  <span class="text-blue-light"><%= @complete_count %></span>
  <span class="text-blue-light"><%= @total_count %></span>
  <span class="text-blue-light"><%= progress_percent %></span>
</div>

progress_circle_component.rb

# frozen_string_literal: true

class ProgressCircleComponent < ViewComponent::Base
  def initialize(diameter:, stroke_width:, total_count:, complete_count:)
    @diameter = diameter
    @stroke_width = stroke_width
    @total_count = total_count
    @complete_count = complete_count
  end

  def radius
    @diameter / 2
  end

  def normalized_radius
    radius - (@stroke_width * 2)
  end

  def circumference
    normalized_radius * 2 * Math::PI
  end

  def progress
    (@complete_count.fdiv(@total_count) * 100)
  end

  def progress_percent
    number_to_percentage(progress.floor.clamp(0, 100), precision: 0)
  end

  def dash_offset
    circumference - (progress / 100.0 * circumference)
  end
end