PhiaUi.Components.HeatmapChart (phia_ui v0.1.17)

Copy Markdown View Source

Two-dimensional color-coded grid heatmap — pure SVG, zero JS.

Cells fade in with staggered animation. Color intensity is mapped linearly from the minimum to maximum value in the dataset.

Examples

<.heatmap_chart
  data={[[10, 20, 5], [30, 15, 25], [8, 40, 12]]}
  row_labels={["Mon", "Tue", "Wed"]}
  col_labels={["AM", "PM", "Night"]}
/>

<.heatmap_chart
  data={[[1, 2, 3], [4, 5, 6]]}
  color_scale={["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"]}
/>

Summary

Functions

heatmap_chart(assigns)

Functions

heatmap_chart(assigns)

Attributes

  • data (:list) (required) - 2D list of numbers: [[row_vals...], ...].
  • row_labels (:list) - Labels for each row (left side). Defaults to [].
  • col_labels (:list) - Labels for each column (top). Defaults to [].
  • color_scale (:list) - Two-element list: [low_color, high_color]. Defaults to ["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"].
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 500.
  • theme (:map) - Chart theme overrides. 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.