PhiaUi.Components.WaffleChart (phia_ui v0.1.17)

Copy Markdown View Source

Waffle chart — pure SVG, zero JS.

Renders a 10x10 grid of cells filled proportionally per category. Each cell represents 1% of the total when using default 10x10 grid.

Examples

<.waffle_chart data={[
  %{label: "Chrome", value: 65},
  %{label: "Firefox", value: 20},
  %{label: "Safari", value: 15}
]} />

<.waffle_chart
  data={[%{label: "Yes", value: 72}, %{label: "No", value: 28}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.60 0.25 0)"]}
  cell_size={24}
  cell_gap={3}
/>

Summary

Functions

waffle_chart(assigns)

Functions

waffle_chart(assigns)

Attributes

  • data (:list) - Category data: [%{label, value}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • cell_size (:integer) - Size of each cell in pixels. Defaults to 20.
  • cell_gap (:integer) - Gap between cells in pixels. Defaults to 2.
  • rows (:integer) - Number of rows in the grid. Defaults to 10.
  • cols (:integer) - Number of columns in the grid. Defaults to 10.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • 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.