PhiaUi.Components.PictogramChart (phia_ui v0.1.17)

Copy Markdown View Source

Pictogram chart — pure SVG, zero JS.

Grid of repeated symbols representing proportional values. Each symbol represents a unit fraction of the total. Categories are distinguished by color, filling the grid left-to-right, bottom-to-top.

Examples

<.pictogram_chart
  data={[
    %{label: "Completed", value: 72},
    %{label: "Remaining", value: 28}
  ]}
/>

<.pictogram_chart
  data={[
    %{label: "Chrome", value: 65},
    %{label: "Firefox", value: 20},
    %{label: "Safari", value: 15}
  ]}
  symbol={:square}
  cols={10}
  total={100}
  colors={["oklch(0.60 0.20 240)", "oklch(0.70 0.18 145)", "oklch(0.65 0.22 30)"]}
/>

Summary

Functions

pictogram_chart(assigns)

Functions

pictogram_chart(assigns)

Attributes

  • data (:list) - Category data: [%{label, value}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • total (:integer) - Total number of symbols in the grid. Defaults to 100.
  • cols (:integer) - Number of columns in the grid. Defaults to 10.
  • symbol_size (:integer) - Size of each symbol in pixels. Defaults to 16.
  • symbol_gap (:integer) - Gap between symbols in pixels. Defaults to 4.
  • symbol (:atom) - Symbol shape. Defaults to :circle. Must be one of :circle, :square, or :person.
  • 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.