PhiaUi.Components.BarList (phia_ui v0.1.17)

Horizontal bar list — ranks items by value with proportional bars.

Inspired by Tremor BarList and Ant Design statistics lists. Useful for leaderboards, category breakdowns, and ranked metrics.

The max value is computed server-side; all widths are inline style percent values (cannot use Tailwind w-* for dynamic widths).

Examples

<.bar_list data={[
  %{name: "Direct", value: 4200},
  %{name: "Referral", value: 2800},
  %{name: "Organic", value: 1100}
]} />

<.bar_list
  data={@traffic}
  color="bg-blue-500"
  value_formatter={fn v -> "$#{v}" end}
/>

Summary

Functions

bar_list(assigns)

Functions

bar_list(assigns)

Attributes

data (:list) (required) - List of maps with :name (string), :value (number), and optional :href (string).
value_formatter (:any) - Optional fn/1 to format displayed values. Receives the raw value. Defaults to nil.
color (:string) - Tailwind bg-* class for the bars. Defaults to "bg-primary".
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div>.