PhiaUi.Components.TreemapChart (phia_ui v0.1.17)

Copy Markdown View Source

Hierarchical treemap with squarified tile layout — pure SVG, zero JS.

Each tile's area is proportional to its value. Tiles animate in with staggered fade. Label is clipped to fit within each tile.

Examples

<.treemap_chart data={[
  %{label: "React",   value: 450},
  %{label: "Vue",     value: 280},
  %{label: "Angular", value: 210},
  %{label: "Svelte",  value: 120},
  %{label: "Solid",   value: 80}
]} />

<.treemap_chart
  data={[%{label: "A", value: 60}, %{label: "B", value: 40}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
/>

Summary

Functions

treemap_chart(assigns)

Functions

treemap_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, value} (and optional :color).
  • colors (:list) - Override default palette. Defaults to [].
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 500.
  • 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.