PhiaUi.Components.ParetoChart (phia_ui v0.1.17)

Copy Markdown View Source

Pareto chart — pure SVG, zero JS.

Combines descending bars with a cumulative percentage line. Shows the 80/20 principle visually with an optional threshold line.

Examples

<.pareto_chart data={[
  %{label: "Bug A", value: 45},
  %{label: "Bug B", value: 30},
  %{label: "Bug C", value: 15},
  %{label: "Bug D", value: 10}
]} />

Summary

Functions

pareto_chart(assigns)

Attributes

  • data (:list) - Data: [%{label, value}] — auto-sorted descending. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • bar_color (:string) - Fill color for bars. Defaults to "oklch(0.60 0.20 240)".
  • line_color (:string) - Stroke color for cumulative line. Defaults to "oklch(0.60 0.25 0)".
  • show_threshold (:boolean) - Show 80% threshold line. Defaults to true.
  • threshold_pct (:float) - Threshold percentage value. Defaults to 80.0.
  • show_grid (:boolean) - Show Y-axis grid lines. Defaults to true.
  • show_labels (:boolean) - Show axis tick labels. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • border_radius (:integer) - Corner radius for bars in pixels. Defaults to 2.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.