Stat

Description

Provides a visual representation of statistical data for your key metrics.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::StatComponent.new do |stat| %>
  <% stat.with_title { "Total Page Views" } %>
  <% stat.with_value { "99 %" } %>
  <% stat.with_description { "21% more than last month" } %>
<% end %>

<div class="border p-4 rounded">
  <div class="fw-medium pb-1">Total Page Views</div>
  <div class="fs-2">99 %</div>
  <small class="text-secondary">21% more than last month</small>
</div>

Multiple

<div class="d-flex flex-column gap-5">
  <div class="d-flex gap-2 flex-wrap">
    <%= render Railsboot::StatComponent.new do |stat| %>
      <% stat.with_title { "Total Page Views" } %>
      <% stat.with_value { "99 %" } %>
      <% stat.with_description { "21% more than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new do |stat| %>
      <% stat.with_title { "Total Likes" } %>
      <% stat.with_value { "25.6K" } %>
      <% stat.with_description { "10% less than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new do |stat| %>
      <% stat.with_title { "New Users" } %>
      <% stat.with_value { "4,200" } %>
      <% stat.with_description { "↗︎ 400 (22%)" } %>
    <% end %>
  </div>

  <div class="d-flex">
    <%= render Railsboot::StatComponent.new(class: "border-end-0 rounded-end-0") do |stat| %>
      <% stat.with_title { "Total Page Views" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        99 %
      <% end %>
      <% stat.with_description { "21% more than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "rounded-start-0 border-end-0 rounded-end-0") do |stat| %>
      <% stat.with_title { "Total Likes" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        25.6K
      <% end %>
      <% stat.with_description { "10% less than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "rounded-start-0") do |stat| %>
      <% stat.with_title { "New Users" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        4,200
      <% end %>
      <% stat.with_description { "↗︎ 400 (22%)" } %>
    <% end %>
  </div>

  <div class="d-flex">
    <%= render Railsboot::StatComponent.new(class: "border-0 bg-light rounded-end-0") do |stat| %>
      <% stat.with_title { "Total Page Views" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        99 %
      <% end %>
      <% stat.with_description { "21% more than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "border border-2 border-white border-top-0 border-bottom-0 bg-light rounded-start-0 rounded-end-0") do |stat| %>
      <% stat.with_title { "Total Likes" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        25.6K
      <% end %>
      <% stat.with_description { "10% less than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "border-0 bg-light rounded-start-0") do |stat| %>
      <% stat.with_title { "New Users" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        4,200
      <% end %>
      <% stat.with_description { "↗︎ 400 (22%)" } %>
    <% end %>
  </div>

  <div class="d-flex flex-column" style="width: 200px;">
    <%= render Railsboot::StatComponent.new(class: "border-bottom-0 rounded-bottom-0") do |stat| %>
      <% stat.with_title { "Total Page Views" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        99 %
      <% end %>
      <% stat.with_description { "21% more than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "rounded-top-0 border-bottom-0 rounded-bottom-0") do |stat| %>
      <% stat.with_title { "Total Likes" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        25.6K
      <% end %>
      <% stat.with_description { "10% less than last month" } %>
    <% end %>
    <%= render Railsboot::StatComponent.new(class: "rounded-top-0") do |stat| %>
      <% stat.with_title { "New Users" } %>
      <% stat.with_value(class: "text-primary fw-bolder") do %>
        4,200
      <% end %>
      <% stat.with_description { "↗︎ 400 (22%)" } %>
    <% end %>
  </div>
</div>

<div class="d-flex flex-column gap-5">
  <div class="d-flex gap-2 flex-wrap">
    <div class="border p-4 rounded">
      <div class="fw-medium pb-1">Total Page Views</div>
      <div class="fs-2">99 %</div>
      <small class="text-secondary">21% more than last month</small>
    </div>
    
    <div class="border p-4 rounded">
      <div class="fw-medium pb-1">Total Likes</div>
      <div class="fs-2">25.6K</div>
      <small class="text-secondary">10% less than last month</small>
    </div>
    
    <div class="border p-4 rounded">
      <div class="fw-medium pb-1">New Users</div>
      <div class="fs-2">4,200</div>
      <small class="text-secondary">↗︎ 400 (22%)</small>
    </div>
  </div>
  <div class="d-flex">
    <div class="border p-4 rounded border-end-0 rounded-end-0">
      <div class="fw-medium pb-1">Total Page Views</div>
      <div class="fs-2 text-primary fw-bolder">        99 %
      </div>
      <small class="text-secondary">21% more than last month</small>
    </div>
    
    <div class="border p-4 rounded rounded-start-0 border-end-0 rounded-end-0">
      <div class="fw-medium pb-1">Total Likes</div>
      <div class="fs-2 text-primary fw-bolder">        25.6K
      </div>
      <small class="text-secondary">10% less than last month</small>
    </div>
    
    <div class="border p-4 rounded rounded-start-0">
      <div class="fw-medium pb-1">New Users</div>
      <div class="fs-2 text-primary fw-bolder">        4,200
      </div>
      <small class="text-secondary">↗︎ 400 (22%)</small>
    </div>
  </div>
  <div class="d-flex">
    <div class="border p-4 rounded border-0 bg-light rounded-end-0">
      <div class="fw-medium pb-1">Total Page Views</div>
      <div class="fs-2 text-primary fw-bolder">        99 %
      </div>
      <small class="text-secondary">21% more than last month</small>
    </div>
    
    <div class="border p-4 rounded border-2 border-white border-top-0 border-bottom-0 bg-light rounded-start-0 rounded-end-0">
      <div class="fw-medium pb-1">Total Likes</div>
      <div class="fs-2 text-primary fw-bolder">        25.6K
      </div>
      <small class="text-secondary">10% less than last month</small>
    </div>
    
    <div class="border p-4 rounded border-0 bg-light rounded-start-0">
      <div class="fw-medium pb-1">New Users</div>
      <div class="fs-2 text-primary fw-bolder">        4,200
      </div>
      <small class="text-secondary">↗︎ 400 (22%)</small>
    </div>
  </div>
  <div class="d-flex flex-column" style="width: 200px;">
    <div class="border p-4 rounded border-bottom-0 rounded-bottom-0">
      <div class="fw-medium pb-1">Total Page Views</div>
      <div class="fs-2 text-primary fw-bolder">        99 %
      </div>
      <small class="text-secondary">21% more than last month</small>
    </div>
    
    <div class="border p-4 rounded rounded-top-0 border-bottom-0 rounded-bottom-0">
      <div class="fw-medium pb-1">Total Likes</div>
      <div class="fs-2 text-primary fw-bolder">        25.6K
      </div>
      <small class="text-secondary">10% less than last month</small>
    </div>
    
    <div class="border p-4 rounded rounded-top-0">
      <div class="fw-medium pb-1">New Users</div>
      <div class="fs-2 text-primary fw-bolder">        4,200
      </div>
      <small class="text-secondary">↗︎ 400 (22%)</small>
    </div>
  </div>
</div>

Slots

title

Show a neat stat title.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

value

The actual value.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

description

Small additional description of the stat value.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/stat_component.rb).
A view template (app/components/railsboot/stat_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/stat_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Get access You need to purchase a professional license to download this component.

Spinner Stepper