PhiaUi.Components.CategoryBar (phia_ui v0.1.17)

Copy Markdown View Source

Stacked category bar — normalizes values to 100% and renders colored segments.

Inspired by Tremor CategoryBar, MUI LinearProgress stacked, PrimeReact MeterGroup. Use it to show composition breakdowns like traffic sources, budget allocation, or survey responses.

Colors are atoms mapped to static Tailwind class strings to preserve JIT purging.

Examples

<.category_bar
  values={[40, 30, 20, 10]}
  colors={[:blue, :green, :orange, :red]}
  labels={["Direct", "Referral", "Organic", "Other"]}
  show_labels={true}
/>

<.category_bar values={[60, 40]} colors={[:purple, :pink]} marker_value={55} />

Summary

Functions

category_bar(assigns)

Functions

category_bar(assigns)

Attributes

  • values (:list) (required) - List of numbers — auto-normalized to 100%.
  • colors (:list) (required) - List of color atoms matching :values. Atoms: :blue :green :red :orange :purple :pink :yellow :teal :indigo :cyan.
  • labels (:list) - Optional labels for each segment. Defaults to [].
  • show_labels (:boolean) - When true, renders labels below the bar. Defaults to false.
  • marker_value (:any) - Optional numeric marker position (in the same scale as :values sum). Defaults to nil.
  • class (:string) - Additional CSS classes for the root element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div>.