PhiaUi.Components.MeterGroup (phia_ui v0.1.17)

Meter group — a labeled collection of progress meters.

Inspired by PrimeReact MeterGroup. Shows multiple metrics, each with its own label, value, max, and color. Useful for storage usage, resource allocation, budget tracking, and multi-category comparisons.

Examples

<.meter_group meters={[
  %{label: "Photos", value: 30, max: 100, color: :blue},
  %{label: "Videos", value: 45, max: 100, color: :purple},
  %{label: "Files",  value: 15, max: 100, color: :green}
]} />

<.meter_group meters={@disk_usage} size={:lg} total_label="Total used: 90 GB" />

Summary

Functions

meter_group(assigns)

Functions

meter_group(assigns)

Attributes

meters (:list) (required) - List of meter maps: %{label: string, value: number, max: number, color: atom}.
total_label (:string) - Optional summary label shown below all meters. Defaults to nil.
size (:atom) - Controls bar height. Defaults to :default. Must be one of :sm, :default, or :lg.
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div>.