Hakumi :: Rails ViewComponents

Basic

The most basic usage.

Active Users

112,893

Code

<%= render Hakumi::Statistic::Component.new(
  title: "Active Users",
  value: 112893
) %>

Unit

Add units with prefix and suffix.

Account Balance

$ 12,893 USD

Code

<%= render Hakumi::Statistic::Component.new(
  title: "Account Balance",
  value: 12893,
  prefix: "$",
  suffix: "USD"
) %>

Animated

Animate numeric values on render.

Transactions

58,293

Code

<%= render Hakumi::Statistic::Component.new(
  title: "Transactions",
  value: 58293,
  animated: true,
  duration: 1200
) %>

In Card

Display statistics inside a card.

Performance

Active Sessions

3,214

Code

<%= render Hakumi::Card::Component.new(title: "Performance", style: "max-width: 200px;") do %>
  <%= render Hakumi::Statistic::Component.new(
    title: "Active Sessions",
    value: 3214,
    prefix: render(Hakumi::Icon::Component.new(name: :setting, color: "currentColor"))
  ) %>
<% end %>

Timer

Countdown timer style statistic.

Countdown

01:00:00

Code

<%= render Hakumi::Statistic::Component.new(
  title: "Countdown",
  value: Time.current + 1.hour,
  countdown: true,
  format: "HH:mm:ss"
) %>

Programmatic

Render a statistic via the component API endpoint.

Click the button to load the statistic.

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Flex::Component.new(
      id: "statistic-programmatic-target",
      align: :center,
      justify: :center,
      style: "min-height: 80px; border: 1px dashed #d9d9d9; border-radius: 8px; padding: 16px;"
    ) do %>
      <%= render(Hakumi::Typography::Text::Component.new(type: :secondary)) { "Click the button to load the statistic." } %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Button::Component.new(id: "statistic-load", type: :primary) do %>
      Load Statistic
    <% end %>
  <% end %>
<% end %>

<script>
  (() => {
    const button = document.getElementById("statistic-load")
    if (!button) return

    const targetSelector = "#statistic-programmatic-target"
    let wired = false

    const wire = () => {
      if (wired) return true
      if (!window.HakumiComponents?.renderComponent) return false

      button.addEventListener("click", async () => {
        await window.HakumiComponents.renderComponent("statistic", {
          target: targetSelector,
          mode: "replace",
          params: {
            title: "Dynamic Revenue",
            value: 98_765,
            prefix: "$",
            suffix: "USD",
            animated: true,
            duration: 1000
          }
        })
      })

      wired = true
      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

Statistic API

Prop	Type	Default	Description
`title`	`String or ViewComponent`	`-`	Statistic label displayed above the value.
`value`	`Numeric \| String or Time`	`-`	Numeric value or countdown target time.
`precision`	`Integer`	`-`	Number of decimal places for numeric values.
`prefix`	`String or ViewComponent`	`-`	Prefix displayed before the value.
`suffix`	`String or ViewComponent`	`-`	Suffix displayed after the value.
`animated`	`Boolean`	`false`	Animate numeric transitions.
`duration`	`Integer`	`800`	Animation duration in milliseconds.
`countdown`	`Boolean`	`false`	Render as a countdown timer.
`format`	`String`	`HH:mm:ss`	Countdown format string (supports DD, HH, mm, ss).
`aria_label`	`String`	`-`	Accessible label for the statistic.
`content`	`Slot`	`-`	Custom value content (overrides value formatting).
`**html_attributes`	`Keyword args`	`-`	Attributes merged into the root element.

Statistic JavaScript API (element.hakumiStatistic)

Prop	Type	Default	Description
`getValue()`	`Function`	`-`	Returns the numeric value or remaining milliseconds for countdowns.
`setValue(value, options)`	`Function`	`-`	Updates the numeric value or countdown target timestamp.
`start()`	`Function`	`-`	Start the countdown timer.
`pause()`	`Function`	`-`	Pause the countdown timer.
`reset()`	`Function`	`-`	Reset and restart the countdown timer.
`isRunning()`	`Function`	`-`	Returns true if the countdown is running.